// Method section — Six Principles with interactive SVG visualizations // Mounts to #method-root (function() { const { useState, useEffect, useRef } = React; // Language helpers function useLang() { const [lang, setLang] = useState(window.PilatesI18n?.getLang() || "en"); useEffect(() => window.PilatesI18n?.subscribe(setLang), []); return lang; } function pick(obj, lang) { return obj && typeof obj === "object" && obj[lang] !== undefined ? obj[lang] : obj?.en ?? obj; } function tt(key) { return window.PilatesI18n?.t(key) || key; } /* ════════════════════════════════════════════════════ PRINCIPLE DATA (bilingual) ════════════════════════════════════════════════════ */ const PRINCIPLES = [ { id: "filament", num: "01", title: { en: "Sliding Filament", th: "กลไกการหดตัวของกล้ามเนื้อระดับจิ๋ว" }, tag: { en: "sarcomere mechanics", th: "กลไกของซาร์โคเมียร์" }, body: { en: "Every cue translates into an electrical signal — the nervous system triggers a calcium (Ca²⁺) release from the sarcoplasmic reticulum. Calcium binds troponin, tropomyosin shifts, and the myosin-binding sites on actin are exposed. Fueled by ATP, myosin heads pull the actin filaments toward the center of the sarcomere — the basic functional unit of muscle. This microscopic sliding is the source of all human movement.", th: "ทุกครั้งที่เราสั่งร่างกาย จะมีกระแสไฟฟ้าส่งไปกระตุ้นให้มีการปล่อยแคลเซียม (Ca²⁺) ออกมาในกล้ามเนื้อ แคลเซียมไปจับกับ Troponin ทำให้ Tropomyosin เลื่อน เปิดทางให้ Myosin มาเกาะกับ Actin ได้ ด้วยพลังจาก ATP หัว Myosin จะดึง Actin เข้าหากึ่งกลางของซาร์โคเมียร์ — หน่วยทำงานพื้นฐานของกล้ามเนื้อนะ การเลื่อนเล็กๆ ในระดับจุลภาคนี่แหละคือต้นกำเนิดของทุกการเคลื่อนไหวเลยล่ะ", }, cues: { en: ["Cue → electrical signal → Ca²⁺ release", "Myosin power-stroke against actin", "Sarcomere shortens · the muscle contracts"], th: ["สั่ง → สัญญาณไฟฟ้า → ปล่อย Ca²⁺", "Myosin ดึง Actin แบบ Power-stroke", "ซาร์โคเมียร์หดสั้น · กล้ามเนื้อหดตัวเลย"], }, }, { id: "size", num: "02", title: { en: "The Size Principle", th: "ลำดับการเรียกใช้งานกล้ามเนื้อ" }, tag: { en: "motor-unit recruitment", th: "การเรียกใช้หน่วยมอเตอร์" }, body: { en: "Muscle activation is governed by motor-unit size. The body recruits smaller, fatigue-resistant slow-twitch fibers first, before reaching for larger, more powerful fast-twitch units. Small motor units stabilize joints and maintain posture; large units generate raw force. We earn the right to ask for power — the smaller stabilizers must fire before the prime movers do.", th: "ร่างกายเราฉลาดนะ — มันจะเรียกใช้กล้ามเนื้อเล็กๆ ที่ทนทาน (slow-twitch) ก่อนเพื่อจัดท่าทางให้เป๊ะ แล้วค่อยเรียกกล้ามเนื้อใหญ่ที่ทรงพลัง (fast-twitch) ออกมาใช้พลังแรงๆ ทีหลัง หน่วยเล็กดูแลท่าทางและข้อต่อ ส่วนหน่วยใหญ่สร้างพลังดิบเลย เราเลยต้องค่อยๆ \"สร้างสิทธิ์\" ในการเรียกพลังนะ — กล้ามเนื้อค้ำจุนต้องทำงานก่อนกล้ามเนื้อหลักเสมอ", }, cues: { en: ["Slow-twitch first · postural endurance", "Demand rises → fast-twitch joins", "Stabilize before you mobilize"], th: ["Slow-twitch มาก่อน · เน้นความทน", "งานหนักขึ้น → Fast-twitch มาช่วย", "ค้ำให้มั่นก่อน แล้วค่อยเคลื่อนนะ"], }, }, { id: "cylinder", num: "03", title: { en: "The Cylinder", th: "แกนกลางลำตัวทรงกระบอก" }, tag: { en: "intra-abdominal pressure", th: "ความดันในช่องท้อง" }, body: { en: "The deep core is a cylinder: diaphragm above, pelvic floor below, transversus abdominis wrapping the front and sides like a corset, multifidi behind. When all four co-contract, they create Intra-Abdominal Pressure (IAP) — a pneumatic brace for the spine. Proximal stability before distal mobility: every advanced movement of the limbs descends from a stable canister.", th: "นึกถึงถังทรงกระบอกที่ล้อมด้วยกะบังลมเป็นหลังคา อุ้งเชิงกรานเป็นพื้น Transversus abdominis ห่อหน้าและด้านข้างเหมือนรัดคอร์เซ็ต ส่วน Multifidi อยู่ด้านหลัง พอทั้งสี่หดร่วมกันก็จะสร้างแรงดันในช่องท้อง (IAP) — เหมือนเครื่องค้ำลมให้กระดูกสันหลังเลยค่ะ ถ้า \"ทรงกระบอก\" นี้แข็งแรง เราจะขยับแขนขาได้คล่องแคล่วและปลอดภัยสุดๆ เลย", }, cues: { en: ["Diaphragm · roof", "Pelvic floor · base", "TVA + multifidi · walls", "Co-contract → IAP → spine braced"], th: ["กะบังลม · หลังคา", "อุ้งเชิงกราน · พื้น", "TVA + Multifidi · ผนัง", "หดร่วม → IAP → ค้ำกระดูกสันหลัง"], }, }, { id: "lever", num: "04", title: { en: "The Lever", th: "ร่างกายคือระบบคานดีๆ นี่เอง" }, tag: { en: "biomechanics of force", th: "ชีวกลศาสตร์ของแรง" }, body: { en: "Human movement runs on biomechanical levers — joint as fulcrum, muscle insertion as force, body weight or load as resistance. Most levers in the body are third-class: effort applied between fulcrum and resistance. Third-class levers operate at a mechanical disadvantage — the muscle generates more force than the load it moves — but trade that disadvantage for speed and range. Design every exercise from the joint outward.", th: "ข้อต่อเราคือจุดหมุน ส่วนกล้ามเนื้อคือแรงส่งค่ะ ส่วนน้ำหนักตัวหรือของหนักก็คือแรงต้านนะ คานในร่างกายส่วนใหญ่เป็นคานชั้นที่ 3 (แรงอยู่ระหว่างจุดหมุนกับแรงต้าน) แม้จะดูเหมือนต้องใช้แรงเยอะกว่าน้ำหนักที่ยก แต่ก็แลกมาด้วยความเร็วและความกว้างในการเคลื่อนไหวนะ ออกแบบทุกท่าฝึกโดยเริ่มจากข้อต่อก่อนเลยล่ะ", }, cues: { en: ["Joint = axis · muscle = force · weight = resistance", "3rd-class lever dominates the body", "Force always greater than load · trade for speed"], th: ["ข้อต่อ = จุดหมุน · กล้ามเนื้อ = แรง · น้ำหนัก = แรงต้าน", "คานชั้นที่ 3 ครองร่างกายเลย", "แรงมากกว่าน้ำหนักเสมอ · แลกกับความเร็ว"], }, }, { id: "contraction", num: "05", title: { en: "Contraction Modes", th: "3 วิธีการทำงานของกล้ามเนื้อ" }, tag: { en: "concentric · eccentric · isometric", th: "คอนเซนทริก · เอกเซนทริก · ไอโซเมตริก" }, body: { en: "A muscle fibre contracts in three distinct modes. Concentric — it shortens while overcoming resistance, as in curling a weight up or pressing the Reformer carriage away. Eccentric — it lengthens while still producing tension, braking the load against gravity, as in lowering that weight under control; this is where joints are protected and real strength is forged. Isometric — it generates force with no change in length and no joint motion: the held Plank, the still centre. Every controlled repetition is a sequence of all three.", th: "กล้ามเนื้อทำงานได้ 3 แบบนะ คอนเซนทริก — เกร็งแล้วกล้ามเนื้อสั้นลง เช่นตอนยกของขึ้น หรือดันแคร่ Reformer ออกไป เอกเซนทริก — เกร็งแล้วยืดออก ต้านแรงโน้มถ่วงไว้ เช่นค่อยๆ วางน้ำหนักลง ตรงนี้แหละที่ปกป้องข้อต่อและสร้างความแข็งแรงที่แท้จริง และไอโซเมตริก — เกร็งค้างไว้เฉยๆ ไม่ขยับ เช่นท่าแพลงก์ ทุกท่าคือการฝึกที่ยอดเยี่ยม ทุกการเคลื่อนไหวที่ควบคุมได้ก็คือลำดับของทั้งสามแบบนี้ผสมกันเลย", }, cues: { en: ["Concentric — shortens, overcomes the load", "Eccentric — lengthens, brakes against gravity", "Isometric — holds, force without motion"], th: ["คอนเซนทริก — หดสั้น เอาชนะแรงต้าน", "เอกเซนทริก — ยืดยาว เบรกสู้แรงโน้มถ่วง", "ไอโซเมตริก — ค้างไว้ มีแรงแต่ไม่ขยับ"], }, }, { id: "breath", num: "06", title: { en: "Lateral Breathing", th: "ฝึกหายใจเข้าซี่โครง (ไม่ใช่เข้าพุงนะ!)" }, tag: { en: "bellows breathing", th: "การหายใจแบบสูบลม" }, body: { en: "Also called bellows breathing — inhalation is directed into the sides and back of the ribcage instead of the belly. The ribs expand laterally like an accordion, allowing deep oxygen intake while the transversus abdominis and obliques stay engaged. On exhale, ribs funnel inward and downward, navel drawing toward the spine. Stabilizing the trunk while breathing fully under load is the signature of advanced practice.", th: "หรือที่เรียกว่า Bellows Breathing — เวลาหายใจเข้า ให้ส่งลมไปที่ซี่โครงด้านข้างและด้านหลัง ไม่ต้องดันท้องนะ ซี่โครงจะกางออกเหมือนหีบเพลง ทำให้รับออกซิเจนได้เต็มที่ ส่วนพุงให้เกร็งแบนไว้เหมือนเดิม ตอนหายใจออก ซี่โครงม้วนเข้าและลง สะดือดึงเข้าหากระดูกสันหลัง การที่ทำให้ลำตัวนิ่งและหายใจได้เต็มที่ใต้แรงโหลด คือเอกลักษณ์ของการฝึกขั้นสูงเลยล่ะ", }, cues: { en: ["Inhale → ribs widen sideways and back", "Belly stays drawn in · core engaged", "Exhale → ribs funnel down · TVA tightens"], th: ["หายใจเข้า → ซี่โครงขยายด้านข้างและหลัง", "พุงเกร็งแบนไว้ · แกนกลางทำงาน", "หายใจออก → ซี่โครงม้วนลง · TVA หดแน่น"], }, }, ]; // Display sequence — principles are presented (and numbered) in this order const METHOD_SEQUENCE = ["breath", "filament", "contraction", "size", "lever", "cylinder"]; const ORDERED_PRINCIPLES = METHOD_SEQUENCE.map((id, i) => ({ ...PRINCIPLES.find(p => p.id === id), num: String(i + 1).padStart(2, "0"), })); /* ════════════════════════════════════════════════════ 1. SLIDING FILAMENT ════════════════════════════════════════════════════ */ function VisFilament() { const [contracted, setContracted] = useState(false); const zL = contracted ? 110 : 30; const zR = contracted ? 290 : 370; const actinShift = contracted ? 78 : 0; return ( <> {/* Z-disk labels */} Z-disk Z-disk {/* Sarcomere baseline */} {/* Z-disks (move) */} {/* Myosin (thick) - center, fixed */} {/* Myosin heads pointing outward */} {[0,1,2,3].map(i => ( ))} {/* Actin (thin) - left side, slides right when contracted */} {/* actin beads */} {Array.from({length:8}).map((_,i) => ( ))} {Array.from({length:8}).map((_,i) => ( ))} {/* Actin - right side, slides left */} {Array.from({length:8}).map((_,i) => ( ))} {Array.from({length:8}).map((_,i) => ( ))} {/* Calcium ions burst */} {contracted && Array.from({length:10}).map((_,i) => { const angle = (i/10) * Math.PI * 2; const dx = Math.cos(angle) * 60; const dy = Math.sin(angle) * 40; return ( ); })} {/* Length readout */} sarcomere length · {Math.round((zR-zL))} a.u.
state
{contracted ? "contracted" : "relaxed"}
); } /* ════════════════════════════════════════════════════ 2. SIZE PRINCIPLE ════════════════════════════════════════════════════ */ function VisSize() { const [effort, setEffort] = useState(15); // Motor units: smallest first (low threshold, slow-twitch), to largest (high threshold, fast-twitch) const UNITS = [ { name: "MU-1", type: "S", threshold: 8, size: 28 }, { name: "MU-2", type: "S", threshold: 22, size: 38 }, { name: "MU-3", type: "FR", threshold: 42, size: 52 }, { name: "MU-4", type: "FR", threshold: 65, size: 72 }, { name: "MU-5", type: "FF", threshold: 88, size: 100 }, ]; const recruited = UNITS.filter(u => effort >= u.threshold).length; return ( <> {/* Header labels */} SLOW · fatigue-resistant FAST · powerful {/* Threshold line */} effort {effort}% {/* Motor unit bars */} {UNITS.map((u, i) => { const y = 50 + i * 32; const active = effort >= u.threshold; const barW = u.size * 3; return ( {/* Background */} {/* Active fill */} {/* Label */} {u.name} type-{u.type} {/* Threshold marker */} {u.threshold} ); })}
effort setEffort(parseInt(e.target.value))} className="mth-slider"/> {effort}%
recruited
{recruited}/5
); } /* ════════════════════════════════════════════════════ 3. THE CYLINDER ════════════════════════════════════════════════════ */ function VisCylinder() { const [active, setActive] = useState({}); const toggle = (k) => setActive(prev => ({...prev, [k]: !prev[k]})); const allOn = ["diaphragm","pelvic","tva","multifidi"].every(k => active[k]); const reset = () => setActive({}); const allOn4 = (active.diaphragm && active.pelvic && active.tva && active.multifidi); return ( <> {/* Outer torso outline */} {/* IAP fill (pressurized state) */} {allOn4 && ( )} {/* Diaphragm (top dome) */} toggle("diaphragm")}/> diaphragm {/* TVA — wraps around front (left + right side bands) */} toggle("tva")}/> toggle("tva")}/> TVA TVA {/* Multifidi — back center band */} toggle("multifidi")}/> multifidi (post.) {/* Pelvic floor (bottom dome) */} toggle("pelvic")}/> pelvic floor {/* IAP indicator at center */} {allOn4 && ( IAP active SPINE BRACED )}
↑ click each region to engage
cylinder
{Object.values(active).filter(Boolean).length}/4
); } /* ════════════════════════════════════════════════════ 4. THE LEVER ════════════════════════════════════════════════════ */ function VisLever() { const [load, setLoad] = useState(10); // kg at hand // Bicep insertion ~ 4cm from elbow; hand ~ 36cm from elbow → ratio 9:1 const ratio = 9; const muscleForce = load * ratio; return ( <> {/* Upper arm (humerus) - stays vertical */} humerus {/* Elbow joint - fulcrum */} A · axis {/* Forearm (lever) - tilts based on load */} {/* Bicep insertion point - F (force) */} F · {muscleForce}kg {/* Hand (load) - R (resistance) */} R · {load}kg {/* Distance brackets */} d₁=4cm d₂=36cm {/* Equation */} F × d₁ = R × d₂ → F = R × {ratio}
load (R) setLoad(parseInt(e.target.value))} className="mth-slider"/> {load} kg
muscle force (F)
{muscleForce} kg
disadvantage
{ratio}×
); } /* ════════════════════════════════════════════════════ 5. CONTRACTION MODES — concentric · eccentric · isometric ════════════════════════════════════════════════════ */ function VisContraction() { const [mode, setMode] = useState("concentric"); const [t, setT] = useState(0); const [running, setRunning] = useState(false); const rafRef = useRef(); const startRef = useRef(); const DUR = { concentric: 1700, eccentric: 4200, isometric: 2800 }; useEffect(() => { if (!running) return; const duration = DUR[mode]; startRef.current = performance.now(); function tick(now) { const p = Math.min((now - startRef.current) / duration, 1); setT(p); if (p < 1) rafRef.current = requestAnimationFrame(tick); else setRunning(false); } rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [running, mode]); const run = () => { setT(0); setRunning(true); }; const reset = () => { setRunning(false); setT(0); }; const pickMode = (m) => { setMode(m); setRunning(false); setT(0); }; // mode-specific kinematics let angle, shorten, tension, motionWord, lenWord, caption; if (mode === "concentric") { angle = -95 * t; // extends → curls up shorten = t; // 0 long → 1 short tension = 60 + 28 * Math.sin(t * Math.PI); motionWord = "flexing"; lenWord = "shortening"; caption = "concentric — muscle shortens, lifts the load"; } else if (mode === "eccentric") { angle = -95 * (1 - t); // curled → lowers down shorten = 1 - t; // 1 short → 0 long tension = 94 - 16 * t; // stays high — the brake motionWord = "extending"; lenWord = "lengthening"; caption = "eccentric — muscle lengthens, brakes the load"; } else { // isometric angle = -52; // held, no motion shorten = 0.5; tension = 72 + 16 * Math.sin(t * Math.PI * 8); // pulsing hold motionWord = "none"; lenWord = "constant"; caption = "isometric — force held, no change in length"; } // bicep belly on the fixed upper arm — bulges as it shortens const brx = 8 + shorten * 11; const bry = 36 - shorten * 15; return ( <> {/* torso + head */} {/* shoulder link */} {/* upper arm — fixed vertical */} {/* bicep belly — morphs with contraction state */} biceps {/* elbow fulcrum */} {/* forearm — rotates at elbow */} {/* motion arrow */} {mode !== "isometric" && running && ( )} {mode === "isometric" && running && ( )} {/* tension bar */} tension {Math.round(tension)}% {/* caption */} {caption}
muscle length
{lenWord}
joint motion
{motionWord}
); } /* ════════════════════════════════════════════════════ 6. LATERAL BREATHING — guided timer + singing-bowl cues ════════════════════════════════════════════════════ */ function VisBreathing() { const [mode, setMode] = useState("lateral"); const [sound, setSound] = useState(true); const [running, setRunning] = useState(false); const [elapsed, setElapsed] = useState(0); const [phase, setPhase] = useState("rest"); const rafRef = useRef(); const startRef = useRef(0); const phaseRef = useRef("rest"); const audioRef = useRef(null); const soundRef = useRef(true); useEffect(() => { soundRef.current = sound; }, [sound]); // guided pattern — inhale 4s · hold 4s · exhale 6s const SEQ = [ { name: "inhale", dur: 4000 }, { name: "hold", dur: 4000 }, { name: "exhale", dur: 6000 }, ]; const CYCLE = 14000; const FREQ = { inhale: 466.16, hold: 392.00, exhale: 311.13, close: 233.08 }; // Tibetan singing-bowl tone — synthesised with the Web Audio API (no audio files) function ensureAudio() { try { if (!audioRef.current) { const AC = window.AudioContext || window.webkitAudioContext; audioRef.current = new AC(); } if (audioRef.current.state === "suspended") audioRef.current.resume(); } catch (e) { /* audio unavailable */ } } function playBowl(base) { const ctx = audioRef.current; if (!ctx) return; try { const now = ctx.currentTime; const master = ctx.createGain(); master.gain.setValueAtTime(0.0001, now); master.gain.exponentialRampToValueAtTime(0.40, now + 0.05); master.gain.exponentialRampToValueAtTime(0.0001, now + 5.4); master.connect(ctx.destination); // inharmonic partials + detuned pairs → the characteristic bowl shimmer const partials = [ { r: 1.00, g: 1.00, d: 1.6 }, { r: 2.74, g: 0.45, d: 2.6 }, { r: 5.41, g: 0.22, d: 3.6 }, { r: 8.88, g: 0.10, d: 4.6 }, ]; partials.forEach(p => { [-p.d, p.d].forEach(det => { const osc = ctx.createOscillator(); osc.type = "sine"; osc.frequency.value = base * p.r; osc.detune.value = det; const g = ctx.createGain(); g.gain.value = p.g * 0.5; osc.connect(g); g.connect(master); osc.start(now); osc.stop(now + 5.6); }); }); } catch (e) { /* silent */ } } useEffect(() => { if (!running) return; startRef.current = performance.now(); phaseRef.current = "rest"; function tick() { const el = performance.now() - startRef.current; setElapsed(el); const cyc = el % CYCLE; let acc = 0, ph = "inhale"; for (const s of SEQ) { if (cyc < acc + s.dur) { ph = s.name; break; } acc += s.dur; } if (ph !== phaseRef.current) { phaseRef.current = ph; setPhase(ph); if (soundRef.current) playBowl(FREQ[ph]); } } tick(); rafRef.current = setInterval(tick, 80); return () => clearInterval(rafRef.current); }, [running]); const begin = () => { ensureAudio(); setElapsed(0); setPhase("inhale"); phaseRef.current = "rest"; setRunning(true); }; const stop = () => { setRunning(false); setPhase("rest"); setElapsed(0); if (soundRef.current) { ensureAudio(); playBowl(FREQ.close); } }; const toggleSound = () => { ensureAudio(); setSound(s => !s); }; // derive phase progress + a continuous breath fill (0 empty → 1 full) let phaseLeft = 0, breath = 0, phaseProg = 0; if (running) { const cyc = elapsed % CYCLE; let acc = 0; for (const s of SEQ) { if (cyc < acc + s.dur) { phaseProg = (cyc - acc) / s.dur; phaseLeft = Math.ceil((acc + s.dur - cyc) / 1000); breath = s.name === "inhale" ? phaseProg : s.name === "hold" ? 1 : 1 - phaseProg; break; } acc += s.dur; } } const cycleNum = running ? Math.floor(elapsed / CYCLE) + 1 : 0; const mm = String(Math.floor(elapsed / 60000)).padStart(2, "0"); const ss = String(Math.floor((elapsed % 60000) / 1000)).padStart(2, "0"); const isLateral = mode === "lateral"; const rx = isLateral ? 80 + breath * 44 : 80 + breath * 10; const ry = isLateral ? 66 + breath * 8 : 66 + breath * 30; const tvaActive = isLateral; const phaseColor = phase === "exhale" ? "var(--ink-2)" : "var(--accent)"; const RING = 2 * Math.PI * 27; return ( <> ↓ ribcage · top-down view {/* spine */} {/* ribcage */} {[0,1,2,3,4].map(i => ( ))} {/* TVA corset */} {tvaActive && } {tvaActive && TVA · engaged} {!tvaActive && running && belly distends · TVA released} {/* lateral widen arrows on inhale */} {running && phase === "inhale" && isLateral && ( )} {/* phase label */} {running ? phase.toUpperCase() : "READY · 4 · 4 · 6"} {/* countdown dial */} {running && ( {phaseLeft} )}
time
{mm}:{ss}
breath
{cycleNum}
); } const VIS_MAP = { filament: VisFilament, size: VisSize, cylinder: VisCylinder, lever: VisLever, contraction: VisContraction, breath: VisBreathing, }; /* ════════════════════════════════════════════════════ MAIN COMPONENT ════════════════════════════════════════════════════ */ function MethodSection() { const [active, setActive] = useState("breath"); const lang = useLang(); const p = ORDERED_PRINCIPLES.find(x => x.id === active); const Vis = VIS_MAP[active]; return (

{lang === "th" ? ( <>ให้มองว่าร่างกายเราคือระบบ คานงัด ที่ทำงานด้วย แรงดัน และมี กลุ่มกล้ามเนื้อ คอยควบคุมการเคลื่อนไหวอีกทีนะ หัวใจของพิลาทิสคือการฝึกกล้ามเนื้อทีละชั้นตามลำดับที่ถูกต้อง — โดยเริ่มตั้งแต่กะบังลม อุ้งเชิงกราน TVA ไปจนถึง Multifidi ให้ทำงานสอดประสานกันเหมือนเป็นก้อนเดียวกันเลย แล้วค่อยเริ่มขยับร่างกายกันนะ! ) : ( <>The body is a system of levers, governed by pressure, executed by motor units. Pilates is the discipline of training each layer in the right order — diaphragm, pelvic floor, transversus and multifidi as one continuous cylinder, then ask it to do work. )}

{ORDERED_PRINCIPLES.map(pp => ( ))}
{lang === "th" ? "// หลักการ" : "// principle"} {p.num} · {pick(p.tag, lang)}
{pick(p.title, lang)}

{pick(p.body, lang)}

{lang === "th" ? "// สาระสำคัญ" : "// distillation"}
    {pick(p.cues, lang).map(c =>
  • {c}
    • )}
); } const root = document.getElementById("method-root"); if (root) ReactDOM.createRoot(root).render(); })();