Custom MDX System

Michal Maslík - Custom MDX System
1
Part I — Text Blocks
2
Part II — Inline Components
3
Part III — Academic Layout
4
Behaviorizmus a jeho predstavitelia
5
Antika a helénska filozofia
6
Part IV — Data Visualisation
7
Part V — Comparison and Tables
8
Part VI — Interactive Components
May 1, 2025
This is the complete reference for every custom MDX component available on this site. Each section shows the simplest possible usage first, followed by special cases, prop combinations, and edge cases. Every demo below is a live render — exactly what these components look like in real articles.
How to read this guide
  • Basic usage — the minimal, most common form of each component
  • Special cases — advanced props, combinations, edge behaviours
  • Every component is globally registered — no imports needed in .mdx files
  • The color prop drives all theming; mainIcon drives header icons; shade+opacity control background intensity

Part I — Text Blocks

Callout

The primary highlighted block. Has a title, header icon, and body. Eight colour themes, 28 icon options, 12 bullet variants, and two background axes (shade + opacity). Basic usage — default pink:
Dôležité pravidlo
Každý JSX tag musí byť správne uzavretý — buď párovým tagom, alebo samouzatváracím <Komponent />.
Vzorový kód — Callout
<Callout title="Dôležité pravidlo" color="pink" mainIcon="note">
  Každý JSX tag musí byť správne uzavretý.
</Callout>
All eight color values:
color=pink — informácia (default)
Základný informačný blok. Vhodný pre všeobecné poznámky a doplňujúce informácie k textu.
color=magenta — autorský komentár
Osobná poznámka alebo alternatívny pohľad autora, ktorý vybočuje z neutrálneho tónu textu.
color=orange — upozornenie
Upozornenie na potenciálne riziká, bežnú chybu alebo dôležitú podmienku, ktorú treba splniť.
color=blue — kód a technické bloky
Technický blok alebo vzorový kód. Kombinuj s kódovým blokom vo vnútri.
color=green — osvedčený postup
Osvedčený postup, kľúčový bod alebo pozitívna odporúčaná prax.
color=red — kritická chyba
Zakázaný postup alebo kritická chyba, ktorá spôsobí nefunkčnosť alebo stratu dát.
color=yellow — kľúčový pojem
Kľúčový pojem alebo najdôležitejšia pasáž v rámci celej sekcie.
color=gray — neutrálna informácia
Všeobecná informácia bez emočného zafarbenia alebo sémantickej naliehavosti.
Special — mainIcon variants:
mainIcon=trap — pascová chyba na skúške
Frekventovaná chyba pri skúške: negatívne posilnenie ZVYŠUJE, nie znižuje frekvenciu správania.
mainIcon=definition — definícia pojmu
Kognitívna disonancia — nepríjemný stav spôsobený dvoma si odporujúcimi presvedčeniami. (Festinger, 1957)
mainIcon=example — príklad
Pavlov kŕmil psa hneď po zvuku zvončeka. Po niekoľkých opakovaniach pes slinel na zvonček samotný.
mainIcon=reflection — otázka na zamyslenie
Prečo vyhásínanie nie je to isté ako zabudnutie? Ako to dokazuje spontánna obnova?
mainIcon=quote — citát
„The signal always precedes the event which it signals." — Ivan Pavlov, 1927
mainIcon=brain — neuroveda
Hipokampus je kľúčový pre konsolidáciu explicitných spomienok. Bilaterálne poškodenie vedie k anterográdnej amnézii.
Special — shade + opacity combinations:
shade=dark opacity=80
Tmavá varianta s vysokou intenzitou — vhodná pre výrazné kľúčové bloky.
shade=light opacity=40
Veľmi jemná priehľadná varianta — iba slabý farebný nádych, takmer bez pozadia.
shade=neutral
Sivé neutrálne pozadie nezávislé od farebnej témy — len ľavý border je farebný.
Special — bullets inside body:
bullets=check — záverečné body
  • Klasické podmieňovanie — asociácia CS–UCS
  • Vyhásínanie nastáva po opakovanom CS bez UCS
  • Spontánna obnova — CR sa môže vrátiť po prestávke
  • Generalizácia podnetu — reakcia na podobné podnety
bullets=arrow — sekvenčné body
  • CS (podmienený podnet) sa páruje s UCS (nepodmienený podnet)
  • Po opakovaných párovaníach sa CS stane signálom pre UCS
  • CR (podmienená reakcia) sa objaví bez prítomnosti UCS
Special — code fence inside color="blue":
Vzorový kód — parseArrayProp
export function parseArrayProp<T>(prop: T[] | string | undefined): T[] {
  if (Array.isArray(prop)) return prop;
  if (typeof prop === "string") {
    try { return JSON.parse(prop) as T[]; } catch { return []; }
  }
  return [];
}

Note

Compact inline note — coloured left border only. No title, no icon. Default shade="neutral" gives a grey background independent of the colour theme. Basic usage:
Doplňujúca informácia priamo v toku textu bez nadpisu ani ikony.
Vzorový kód — Note
<Note color="pink">Doplňujúca informácia priamo v toku textu.</Note>

<Note color="green" bullets="check">

- Pracovná pamäť má kapacitu ~7 ± 2 prvkov
- Chunkovaním je možné kapacitu zvýšiť

</Note>
All color values (left border only, grey background):
color=pink — informácia
color=orange — upozornenie na bežnú chybu alebo podmienku
color=green — osvedčený postup alebo potvrdzujúca poznámka
color=red — zakázaný postup
color=blue — technická poznámka
color=yellow — kľúčový pojem
Special — shade="normal" (coloured background, not grey):
Toto je Note so shade="normal" — pozadie má plnú farebnú témy, nie neutrálnu sivú.
Special — with list and bullets:
  • Pracovná pamäť má kapacitu ~7 ± 2 prvkov (Miller, 1956)
  • Chunkovaním je možné efektívnu kapacitu výrazne zvýšiť
  • Aktívne opakovanie zabraňuje vypadnutiu z krátkodobej pamäti

Definition

Introduces a new term for the first time. Coloured header contains the term name; white body holds the definition. For multiple definitions in sequence, use <TerminologyList> instead. Basic usage:
Klasické podmieňovanie
Forma asociatívneho učenia, pri ktorej sa biologicky neutrálny podnet (CS) po opakovanom párovaní s biologicky významným podnetom (UCS) stane schopným vyvolávať podmienanú reakciu (CR) samostatne.
Vzorový kód — Definition
<Definition title="Klasické podmieňovanie" color="yellow">
  Forma asociatívneho učenia, pri ktorej sa neutrálny CS...
</Definition>
Special — different color values:
Pracovná pamäť
Krátkodobý systém pre dočasné uchovávanie a manipuláciu s informáciami počas kognitívneho spracovania. Kapacita ~7 ± 2 prvkov (Miller, 1956); revidovaná Baddeleym na 4 komponenty.
Anterográdna amnézia
Neschopnosť tvoriť nové dlhodobé spomienky po vzniku poranenia alebo poruchy. Prípad H.M. (bilaterálna temporálna lobektómia) je emblematickým príkladom čistej anterográdnej amnézie.
Special — with a list inside the body:
Operantné podmieňovanie
Forma učenia, pri ktorej je frekvencia dobrovoľného správania riadená jeho dôsledkami.
  • Pozitívne posilnenie — pridanie príjemného podnetu zvyšuje frekvenciu správania
  • Negatívne posilnenie — odstránenie averzívneho podnetu zvyšuje frekvenciu správania
  • Trest — znižuje frekvenciu správania (pozitívny = pridanie averzívneho; negatívny = odobratie príjemného)

Summary

Closing summary block — more prominent than <Callout>. Coloured top bar, bookmark icon. Place at the end of sections. Basic usage — key takeaways:
Kľúčové poznatky
  • Klasické podmieňovanie = asociácia CS–UCS → CR
  • Vyhásínanie nie je zabudnutie — je to inhibičné učenie
  • Rescorla-Wagnerov model: podmieňovanie závisí od prekvapivosti UCS
  • Biologická pripravenosť narúša predpoklad rovnakej asociovateľnosti
Vzorový kód — Summary
<Summary title="Kľúčové poznatky" color="green" bullets="check">

- Klasické podmieňovanie = asociácia CS–UCS → CR
- Vyhásínanie nie je zabudnutie — je to inhibičné učenie

</Summary>
Special — mainIcon="reflection" (otázky na zamyslenie):
Otázky na zamyslenie
  • Ako by ste vysvetlili rozdiel medzi vyhásínaním a zabudnutím?
  • Prečo Garciov efekt spochybnil behaviorizmus?
  • Kde sú limity aplikácie zvieracích modelov na ľudské správanie?
Special — mainIcon="tip" + bullets="check" + shade="dark":
Praktické tipy pre štúdium
  • Používaj spaced repetition — opakuj po 1 dni, 3 dňoch, 1 týždni, 1 mesiaci
  • Reprodukuj aktívne (recall), nie pasívne čítaj (recognition)
  • Píš vlastné definície — parafrázovanie posilňuje dlhodobú pamäť
Special — mainIcon="brain" + color="blue":
Neurobiologické základy
  • Hipokampus kóduje explicitné spomienky — poškodenie vedie k anterográdnej amnézii
  • Amygdala kóduje emocionálne aspekty pamäti — zvyšuje konsolidáciu stresových zážitkov
  • Konsolidácia prebieha počas pomalého spánku (SWS) — interakcia hipokampus–neokortex

Sub and Divider

Visual section separators. <Sub /> = three dots (strong visual break). <Divider /> = gradient line (subtle break within a topic). <Sub> — all colour options: <Divider> — subtle gradient lines:
Vzorový kód — Sub · Divider
<Sub color="pink" />

<Divider color="blue" />

KeyFact

A bold memorisation card for a single critical value — number, term, or short phrase. The value renders in 2 rem display type in the theme accent colour; label gives it context; optional detail adds a smaller note (author, year, exam relevance). On desktop the value and label sit side-by-side; on mobile they stack vertically. Basic usage:
7 ± 2
Capacity of working memoryG. Miller (1956) — in test questions the accepted answer is 5–7 items
Vzorový kód — KeyFact
<KeyFact
  value="7 ± 2"
  label="Capacity of working memory"
  detail="G. Miller (1956)"
  color="blue"
/>
Special — color palette:
1879
Birth of scientific psychologyWilhelm Wundt, Leipzig — first experimental laboratory
450 V
Maximum shock — Milgram's experiment65 % of participants reached this level
hipokampus
Brain's memory centreLimbic system — structure responsible for consolidating explicit memories
0.3 s
Duration of iconic (sensory) memoryG. Sperling (1960) — nearly unlimited capacity, fades within half a second

Part II — Inline Components

Concept

Small coloured pill tag directly in running text. Used to flag a technical term, theory name, or key concept inline. Optional note prop shows a hover tooltip. Basic usage — inline term label: Teória kognitívnej disonancie predpokladá, že nesúlad medzi dvoma presvedčeniami motivuje zmenu postoja alebo správania.
Vzorový kód — Concept
Teória <Concept>kognitívnej disonancie</Concept> predpokladá...

Tri prístupy: <Concept color="blue">behaviorizmus</Concept>,
<Concept color="pink" note="Festinger, 1957">kognitivizmus</Concept>
a <Concept color="green">humanistická psychológia</Concept>.
Special — with note tooltip: Proces
zabúdania
je exponenciálny — najrýchlejší v prvých hodinách po naučení.
Special — different color values inline: Tri hlavné prístupy: behaviorizmus, kognitivizmus a humanistická psychológia tvoria základ modernej psychológie.

GlossaryTooltip

Discrete alternative to <Concept> — dotted underline only, no colour background. Ideal for dictionary-style definitions that must not break visual flow. Basic usage: Podľa behaviorizmuBehaviorizmus — psychologický smer zameriavajúci sa výlučne na pozorovateľné správanie, nie na vnútorné duševné stavy. sú všetky duševné javy vysvetliteľné podmieňovaním.
Vzorový kód — GlossaryTooltip
Podľa <GlossaryTooltip definition="Behaviorizmus — psychologický smer...">
  behaviorizmu
</GlossaryTooltip> sú všetky duševné javy vysvetliteľné podmieňovaním.
Special — multiple tooltips in one paragraph: HipokampusHipokampus — mozgová štruktúra kľúčová pre tvorbu dlhodobých explicitných spomienok. spolupracuje s amygdalouAmygdala — mandľovitá štruktúra zodpovedná za emocionálne spomienky a strach. pri kódovaní emocionálne nabitých spomienok, čo vysvetľuje, prečo si traumatické zážitky pamätáme výnimočne silne.

Reference

Async server component for formal academic citations. direct="true" = direct quote with quotation marks; direct="false" = paraphrase. I18n-aware labels rendered server-side. Basic — direct quote:
The signal always precedes the event which it signals.
QuoteIvan Pavlov • s. s. 16
Vzorový kód — Reference
<Reference
  author="Ivan Pavlov"
  year="1927"
  book="Conditioned Reflexes"
  page="s. 16"
  quote="The signal always precedes the event which it signals."
  direct="true"
  color="gray"
/>

<Reference
  author="Atkinson, R. L. a kol."
  year="2003"
  book="Psychologie"
  page="s. 247"
  quote="Klasické podmieňovanie zahŕňa tri základné fázy..."
  direct="false"
  color="pink"
/>
Special — paraphrase (direct="false"):
Klasické podmieňovanie zahŕňa tri základné fázy: akvizíciu, vyhásínanie a spontánnu obnovu, pričom vyhásínanie je inhibičným učením, nie zabudnutím.
QuoteAtkinson, R. L. a kol. • s. s. 247
Special — color="blue" technical citation:
We propose that working memory consists of a central executive and at least two slave systems: the phonological loop and the visuospatial sketchpad.
QuoteBaddeley, A. D. & Hitch, G. • s. Psychology of Learning and Motivation, Vol. 8

Part III — Academic Layout

SectionHeader

Visual replacement for standard ## headings. Coloured left border, optional period badge, TOC inclusion control via noToc, semantic level via as. Basic — H2 (default):

Behaviorizmus a jeho predstavitelia

Vzorový kód — SectionHeader
<SectionHeader title="Behaviorizmus a jeho predstavitelia" color="pink" />

<SectionHeader title="Antika a helénska filozofia"
  period="8. – 3. stor. pred n. l."
  color="yellow"
/>

<SectionHeader title="Kľúčové experimenty" as="h3" color="blue" noToc />
Special — H2 with period badge:

Antika a helénska filozofia8. – 3. stor. pred n. l.

Special — H3 (as="h3") for sub-sections:

Kľúčové experimenty

Special — noToc (excluded from table of contents):

Táto sekcia nie je v TOC

TopicHighlight

The primary card component for any named academic entity: person, theory, anatomy, experiment, disorder, method, school, or concept. Basic — mainIcon="person" (psychologist profile):
Ivan Pavlov
1849–1936Fyziológia / Behaviorizmus
Ruský fyziológ a Nobelov laureát (1904). Objavil klasické podmieňovanie pri štúdiu tráviacich reflexov psov. Ukázal, že fyziologické reakcie môžu byť vyvolané podmienene — neutrálny podnet (zvonček) sa stane signálom po párovaní s biologicky významným podnetom (jedlo).
Vzorový kód — TopicHighlight
<TopicHighlight
  title="Ivan Pavlov"
  subtitle="1849–1936"
  badge="Fyziológia / Behaviorizmus"
  mainIcon="person"
  color="blue"
>
  Ruský fyziológ a Nobelov laureát (1904). Objavil klasické podmieňovanie.
</TopicHighlight>
Special — mainIcon="theory" (psychological theory):
Model pracovnej pamäti
Baddeley & Hitch, 1974Kognitívna psychológia
Štvorkomponentová architektúra nahrádzajúca unitárnu krátkodobú pamäť: centrálna exekutíva (pozornosť), fonologická slučka (verbálna pamäť), visuopriestorová tabuľa (vizuálna pamäť) a epizodický zásobník (integrácia).
Special — mainIcon="anatomy" (brain structure):
Hipokampus
Mediálny temporálny lalokNeuroanatómia
Kľúčová štruktúra pre tvorbu dlhodobých explicitných spomienok. Bilaterálne poškodenie (prípad H.M.) spôsobuje hlbokú anterográdnu amnéziu. Obsahuje miestne bunky (place cells) pre priestorovú navigáciu — preto je hipokampálna neurogenéza spojená s priestorovým učením.
Special — mainIcon="disorder" + color="orange" (clinical syndrome):
Generalizovaná úzkostná porucha
MKN-10: F41.1Klinická psychológia
Chronická, excesívna a ťažko kontrolovateľná úzkosť a starosti týkajúce sa rôznych každodenných situácií. Prítomná väčšinu dní aspoň 6 mesiacov. Sprevádzaná vegetatívnymi príznakmi: napätie svalstva, únava, podráždenosť, poruchy spánku.
Special — mainIcon="experiment" + color="green":
Experiment neznámej situácie
Mary Ainsworth, 1978Vývojová psychológia
Štandardizovaný postup na meranie štýlu citovej väzby u detí (12–18 mes.). 8 epizód striedajúcich prítomnosť/neprítomnosť matky a cudzej osoby. Definoval 3 vzorce: bezpečná väzba (B), neistá-vyhýbavá (A), neistá-ambivalentná (C). Neskôr Main pridala dezorganizovanú (D).
Special — mainIcon="school" + color="magenta" (psychological school):
Behaviorizmus
1913 – 1950sPsychologická škola
Smer zameriavajúci sa výlučne na pozorovateľné správanie, odmieta introspekciu a mentálne konštrukty ako vedecky neprípustné. Zakladateľom manifesto Watson (1913), vrchol Skinnerov radikálny behaviorizmus (1938–1960s). Bol nahradený kognitívnou revolúciou (1950s–60s).
Special — with <SubSection> headings inside the card:
Sigmund Freud
1856–1939Psychoanalýza
Rakúsky neurológ a zakladateľ psychoanalýzy. Vypracoval tri vzájomne sa doplňujúce modely psychiky, z ktorých každý opisuje jej inú stránku.
Topografický model (1900)
Psychiku rozdeľuje na tri vrstvy: vedomie (okamžité obsahy), predvedomie (dostupné spomienky), nevedomie (potlačené obsahy — jadro psychoanalýzy).
Štrukturálny model (1923)
Id (pudy, princíp slasti), Ego (mediátor, princíp reality), Superego (morálka, introjektované normy rodičov a spoločnosti).
Psychosexuálne štádiá
Orálne (0–1,5 r.), análne (1,5–3 r.), falické (3–6 r., Oidipovský komplex), latentné (6–12 r.), genitálne (puberta+).
Special — secondary=true for nested cards:
Kognitivizmus
od 1950sPsychologická škola
Smer zdôrazňujúci úlohu vnútorných mentálnych procesov (pamäť, pozornosť, jazyk, riešenie problémov). Vznikol ako reakcia na obmedzenia behaviorizmu.
George Miller
1920–2012Zakladateľská postava
Vydal „The Magical Number Seven" (1956) — ukázal, že kapacita pracovnej pamäte je ~7 ± 2 prvkov. Spolu s Chomskym a Newell/Simonom sa pokladá za zakladateľa kognitívnej vedy.

TerminologyList + Term

Structured definition list for multiple paired term + definition entries. More efficient than repeating <Definition> for each term. Basic usage:
Podmienená reakcia (CR)
Naučená reakcia vyvolaná CS po úspešnom podmieňovaní. Typicky slabšia a kratšia ako nepodmienená reakcia (UCR).
Vyhásínanie (Extinction)
Postupné oslabovanie CR pri opakovanom prezentovaní CS bez UCS. Nejde o zabudnutie — dôkaz: spontánna obnova.
Generalizácia podnetu
Tendencia reagovať CR aj na podnety podobné pôvodnému CS. Opisuje ju gradient generalizácie — čím väčšia podobnosť, tým silnejšia CR.
Vzorový kód — TerminologyList + Term
<TerminologyList color="yellow">
  <Term title="Podmienená reakcia (CR)">
    Naučená reakcia vyvolaná CS po úspešnom podmieňovaní.
  </Term>
  <Term title="Vyhásínanie" bullets="arrow">
    Postupné oslabovanie CR.

    - Nejde o zabudnutie — dôkaz: spontánna obnova
    - Nastáva pri opakovanom CS bez UCS
  </Term>
</TerminologyList>
Special — different color + lists inside <Term> bodies:
Fonologická slučka
Podsystém pracovnej pamäti pre verbálne a sluchové informácie.
  • Fonologické úložisko — pasívny sklad sluchových stôp (~2 s)
  • Artikulačný opakovací proces — "vnútorný hlas" obnovujúci informácie
Visuopriestorová tabuľa
Podsystém pre vizuálne a priestorové informácie.
  • Mentálna rotácia objektov
  • Priestorová navigácia a kognitívne mapy
Centrálna exekutíva
Riadiaci systém pracovnej pamäti — nemá vlastné pamäťové kapacity, len koordinuje podsystémy a riadi pozornosť. Zodpovedná za inhibíciu, prepínanie a aktualizáciu.

AccordionGroup + AccordionItem

Collapsible panels for supplementary detail. Uses native <details>/<summary> HTML for accessibility. Open/close with animated chevron. Basic usage:
Čo je blokovanie (blocking effect)?
Kamin (1969): ak je CS A (svetlo) plne asociovaný s UCS, pridanie CS B (tón) v kombinácii A+B→UCS nezvedie ku kondicionovaniu B. UCS nie je surprizný, keď je A prítomné — Rescorla-Wagnerov model to formalizoval.
Čo je latentná inhibícia?
Opakovaná predexpozícia CS bez UCS spomaľuje neskoršie podmieňovanie — CS stráca "novinkovú hodnotu". Znížená latentná inhibícia bola nájdená u pacientov so schizofréniou.
Čo je podmienená chuťová averzia (Garciov efekt)?
Garcia & Koelling (1966): potkany si ľahko spájajú chuť s nevoľnosťou (aj po jedinom párovaní a 6-hodinovom intervale), ale nie so šokom. Porušuje predpoklad equipotentiality a dokazuje biologickú pripravenosť.
Vzorový kód — AccordionGroup + AccordionItem
<AccordionGroup color="orange">
  <AccordionItem title="Čo je blokovanie?">
    Kamin (1969): ak je CS A plne asociovaný s UCS, pridanie CS B
    v kombinácii A+B nezvedie ku kondicionovaniu B.
  </AccordionItem>
  <AccordionItem title="Čo je latentná inhibícia?">
    Opakovaná predexpozícia CS bez UCS spomaľuje neskoršie podmieňovanie.
  </AccordionItem>
</AccordionGroup>
Special — color="pink" for general Q&A:
Prečo je vyhásínanie inhibičné učenie, nie zabudnutie?
Dôkaz pochádza zo spontánnej obnovy: po prestávke sa CR čiastočne obnoví bez ďalšieho podmieňovania. Keby išlo o zabudnutie, žiadna obnova by nenastala. Vyhásínanie teda len maskuje pôvodnú asociáciu novým inhibičným zápisom.
Aký je rozdiel medzi pozitívnym a negatívnym posilnením?
Oba ZVYŠUJÚ frekvenciu správania — líšia sa mechanizmom. Pozitívne: pridáme príjemný podnet. Negatívne: odstránime averzívny podnet. Negatívne posilnenie NIE JE trest.

Mnemonic + MnemonicItem

Study aid block for acronyms and memory devices. Use <MnemonicItem title="Word"> children — the first letter of title becomes a themed tile; the remaining characters appear as the concept label beside it. Body content (text + lists) renders below the label. Basic usage — OCEAN:
OCEANBig Five model osobnosti (McCrae & Costa)
penness
otvorenosť skúsenostiam: zvedavosť, kreativita, estetická citlivosť
onscientiousness
svedomitosť: organizovanosť, spoľahlivosť, sebakontrola
xtraversion
extraverzia: spoločenskosť, asertivita, pozitívny afekt
greeableness
prívetivosť: empatia, kooperácia, dôvera
euroticism
neurotizmus: emočná nestabilita, úzkosť, podráždenosť
Vzorový kód — Mnemonic + MnemonicItem
<Mnemonic word="OCEAN" title="Big Five model osobnosti" color="magenta">
  <MnemonicItem title="Openness">
    otvorenosť skúsenostiam: zvedavosť, kreativita
  </MnemonicItem>
  <MnemonicItem title="Conscientiousness" bullets="disc">

    svedomitosť

    - organizovanosť
    - spoľahlivosť

  </MnemonicItem>
</Mnemonic>
Special — color="blue" technical acronym:
CRUDZákladné databázové operácie
reate
vytvorenie nového záznamu (INSERT)
ead
čítanie záznamu (SELECT)
pdate
aktualizácia existujúceho záznamu (UPDATE)
elete
zmazanie záznamu (DELETE)
Special — color="green" therapy acronym:
SMARTKritériá pre ciele v koučingu a terapii
pecific
konkrétny cieľ, nie vágne prianie
easurable
merateľný pokrok (napr. číslom, frekvenciou)
chievable
dosiahnuteľný v danom kontexte klienta
elevant
relevantný pre hodnoty a priority klienta
ime-bound
ohraničený časovým rámcom

Timeline

Vertical chronological list with a coloured connecting line. Items are passed as a JSON string. Basic usage:
1879Wilhelm Wundt zakladá prvé experimentálne laboratórium psychológie v Lipsku.
1890William James vydáva Principles of Psychology — zakladá funkcionalizmus.
1900Freud vydáva Výklad snov — začiatok psychoanalýzy.
1913Watson vydáva Psychology as the Behaviourist Views It — manifest behaviorizmu.
1927Pavlov vydáva Conditioned Reflexes — systematizácia klasického podmieňovania.
1956Miller publikuje The Magical Number Seven — kognitívna revolúcia sa začína.
1974Baddeley & Hitch navrhujú Model pracovnej pamäti.
Vzorový kód — Timeline
<Timeline
  color="blue"
  items='[
    {"date": "1879", "text": "Wilhelm Wundt zakladá laboratórium psychológie."},
    {"date": "1913", "text": "Watson vydáva manifest behaviorizmu."},
    {"date": "1956", "text": "Miller: The Magical Number Seven."}
  ]'
/>
Special — color="pink" developmental milestones:
0–2 r.Senzomotorické štádium (Piaget) — koordinácia zmyslov a pohybu, trvalnosť objektu.
2–7 r.Predoperačné štádium — symbolické myslenie, egocentrizmus, animizmus.
7–11 r.Konkrétno-operačné štádium — zachovanie množstva, reverzibilita, triedenie.
12+ r.Formálno-operačné štádium — abstraktné myslenie, hypotetické uvažovanie.

ExperimentCard

Structured reference card for a famous psychological study. Displays name, researcher, and year in a themed header, then up to four labelled content sections: question (optional), method, finding, and significance (optional). Omitted sections are simply not rendered. Basic usage — all four sections:
Milgramův experiment
Stanley Milgram1961–1963
Výzkumná otázka

Jak daleko půjde běžný člověk v poslušnosti vůči autoritě?

Metoda

Účastníci uštedřovali zdánlivé elektrošoky žákům na pokyn experimentátora — od mírných po maximálních 450 V.

Nález

65 % účastníků dospělo k maximálnímu šoku. Normální lidé jsou pod vlivem situace schopni neuvěřitelné krutosti.

Dosah

Vysvětlil mechanismy slepé poslušnosti v hierarchických systémech. Dnes eticky nepřípustný a nereprodukovatelný.

Vzorový kód — ExperimentCard
<ExperimentCard
  color="red"
  name="Milgramův experiment"
  researcher="Stanley Milgram"
  year="1961–1963"
  question="Jak daleko půjde běžný člověk v poslušnosti vůči autoritě?"
  method="Účastníci uštedřovali zdánlivé elektrošoky až po 450 V…"
  finding="65 % účastníků dospělo k maximálnímu šoku…"
  significance="Vysvětlil mechanismy slepé poslušnosti…"
/>
Special — two-section variant (question + significance omitted):
Sperlingův experiment
George Sperling1960
Metoda

Participants were shown a 4x3 grid of 12 letters for 50 ms. Using a partial-report method, a tone immediately after indicated which row to recall.

Nález

Iconic (sensory) memory has a very large capacity but decays in roughly 0.3–0.5 seconds — confirming that attention, not capacity, limits what enters short-term memory.

Special — color="orange" for classical conditioning experiments:
Watson & Raynerin experiment — Little Albert
J. B. Watson & R. Rayner1920
Výzkumná otázka

Can a conditioned emotional response (fear) be established in a human infant?

Metoda

An 11-month-old infant (Albert) was exposed to a white rat paired with a loud bang. After several pairings the rat alone elicited fear.

Nález

Emotional responses can be classically conditioned in humans. Fear generalised to similar stimuli: fur, cotton wool, Santa Claus mask.

Dosah

Proved that emotions are learnable — foundational evidence for behaviourism. Today considered deeply unethical and unreproducible.

Part IV — Data Visualisation

ScoreRing

SVG donut chart for an overall score. score and max accept both number and string (MDX compatibility). Basic usage:
Vzorový kód — ScoreRing
<ScoreRing score={8.8} max={10} label="Celkové hodnotenie" />
<ScoreRing score={4.2} max={5} label="Empirická podpora (škála 0–5)" />
Special — custom max (e.g. 5-point scale): Special — lower score for contrast:

RatingBars

Labelled progress bars for per-dimension analysis. Basic usage:
Hodnotenie aspektov behaviorizmu
Empirická podpora9.1/10
Vysvetľovacia sila7.8/10
Praktická aplikácia8.5/10
Historický vplyv9.7/10
Biologická platnosť5.2/10
Vzorový kód — RatingBars
<RatingBars
  title="Hodnotenie aspektov behaviorizmu"
  ratings='[
    {"label": "Empirická podpora", "score": 9.1},
    {"label": "Historický vplyv", "score": 9.7},
    {"label": "Biologická platnosť", "score": 5.2}
  ]'
/>
Special — custom max per item:
Výsledky experimentu (1 = min, 5 = max)
Sila podmienené reakcie4.1/5
Rýchlosť vyhásínania3.2/5
Miera generalizácie2.8/5

BarChart

Horizontal bar chart for benchmark comparisons. highlight: true marks an item in the accent colour. Basic usage:
Percentuálna úspešnosť rôznych terapeutických prístupov
Kognitívno-behaviorálna terapia
72 %
Psychodynamická terapia
58 %
Humanistická terapia
54 %
Medikamentózna liečba
64 %
Bez terapie (kontrolná sk.)
31 %
Vzorový kód — BarChart
<BarChart
  title="Úspešnosť terapeutických prístupov"
  suffix=" %"
  data='[
    {"label": "KBT", "value": 72, "highlight": true},
    {"label": "Psychodynamická", "value": 58},
    {"label": "Bez terapie", "value": 31}
  ]'
/>
Special — without suffix, multiple highlights:
Indexy kognitívneho výkonu (norma = 100)
Verbálna pamäť
112
Pracovná pamäť
98
Procesná rýchlosť
87
Krátkodobá pamäť
105
Exekutívne funkcie
91

SpecGrid + SpecItem

Responsive key-value card grid. <SpecGrid color="..."> cascades a default colour to all children; individual <SpecItem color="..."> overrides it. Basic — colour cascade from <SpecGrid>:
Narodený14. 9. 1849, Riazaň
Zomrel27. 2. 1936, Leningrad
OblasťFyziológia, psychológia
InštitúciaVojenskolekárska akadémia, St. Petersburg
Nobelova cena1904 — fyziológia trávenia
Hlavný objavKlasické podmieňovanie (1890s)
Vzorový kód — SpecGrid + SpecItem
<SpecGrid color="blue">
  <SpecItem label="Narodený" value="14. 9. 1849, Riazaň" />
  <SpecItem label="Nobelova cena" value="1904" color="yellow" />
  <SpecItem label="Hlavný objav" value="Klasické podmieňovanie" color="green" />
</SpecGrid>

<SpecGrid>
  <SpecItem label="Komponenta" value="Centrálna exekutíva" color="pink" />
  <SpecItem label="Rok" value="1974" color="gray" />
</SpecGrid>
Special — no cascade, individual color per item:
KomponentaCentrálna exekutíva
FunkciaRiadenie pozornosti
KapacitaObmedzená
Subsystémy2 slave systems
AutoriBaddeley & Hitch
Rok1974

ProsCons

Two-column strengths/weaknesses block. variant="hardware" (green/red) for product reviews; variant="theory" (blue/orange) for academic evaluations. Basic — variant="hardware" (default):
Výhody
  • Silná empirická podpora z laboratórnych experimentov
  • Jasné operacionálne definície — ľahko overiteľné a replikovateľné
  • Priame klinické aplikácie (desenzibilizácia, averzná terapia)
  • Ekonomický princíp: vysvetlenie bez mentálnych konštruktov
Nevýhody
  • Ignoruje kognitívne procesy a vnútorné duševné stavy
  • Zvieracie modely nemusia platiť pre ľudské správanie
  • Redukcionistický — nevysvetlí komplexné ľudské správanie
  • Biologická pripravenosť narúša predpoklad equipotentiality
Vzorový kód — ProsCons
<ProsCons
  prosLabel="Výhody"
  consLabel="Nevýhody"
  pros='["Silná empirická podpora","Jasné operacionálne definície"]'
  cons='["Ignoruje kognitívne procesy","Redukcionistický prístup"]'
/>

<ProsCons
  variant="theory"
  prosLabel="Prínosy"
  consLabel="Kritika"
  pros='["Metodologická prísnosť","Základ pre KBT"]'
  cons='["Nezohľadňuje jazyk","Biologická pripravenosť"]'
/>
Special — variant="theory" (academic evaluation):
Prínosy behaviorizmu
  • Metodologická prísnosť — merateľné, replikovateľné
  • Odhalenie základných mechanizmov učenia aplikovateľných na kliniku
  • Základ pre KBT — najlepšie empiricky podložená psychoterapia
  • Behaviorálna analýza — základy neurovedy správania
Kritika a obmedzenia
  • Kognitívna revolúcia ukázala limity čisto behaviorálnych vysvetlení
  • Nezohľadňuje jazyk a vyššie kognitívne funkcie (Chomsky vs. Skinner)
  • Biologická pripravenosť — nie všetky asociácie sú rovnako ľahké
  • Etická kontroverzia averznej terapie a punishment-based prístupov

Part V — Comparison and Tables

Versus

Side-by-side comparison of two concepts using one shared colour theme. Basic usage:
Klasické podmieňovanie
  • Nedobrovoľné reflexné reakcie
  • Stimulus predchádza správaniu
  • Asociácia: CS–UCS
  • Vyhásínanie: CS bez UCS
  • Pavlov, Watson, Rescorla
Operantné podmieňovanie
  • Dobrovoľné zámerné správanie
  • Dôsledok nasleduje správaniu
  • Asociácia: správanie–výsledok
  • Vyhásínanie: správanie bez posilnenia
  • Skinner, Thorndike, Premack
Vzorový kód — Versus
<Versus
  color="orange"
  leftTitle="Klasické podmieňovanie"
  rightTitle="Operantné podmieňovanie"
  leftContent='["Nedobrovoľné reflexné reakcie","Stimulus predchádza správaniu"]'
  rightContent='["Dobrovoľné zámerné správanie","Dôsledok nasleduje správaniu"]'
  bullets="chevron"
/>
Special — bullets="check" + color="pink":
Explicitná pamäť (deklaratívna)
    Implicitná pamäť (nedeklaratívna)
    • Nevedomé — nereflektuje sa
    • Procedurálna, priming, podmienené reakcie
    • Bazálne gangliá, mozoček, amygdala
    • Nevie sa verbálne opísať — len demonštrovaním
    • Vývojovo starší systém
    Special — color="blue" + shade="dark" for technical contrast:
    Monolith (pred refaktoringom)
    • 4 372 riadkov v jedinom súbore
    • Typy, helpery a JSX spoločne
    • Každá zmena zasiahne celý súbor
    • Nezávislé testovanie nemožné
    Feature-sliced (po refaktoringu)
    • 212-riadkový orchestrátor + 30 modulov
    • Každý súbor má jednu zodpovednosť
    • Zmeny v types.ts majú nulový blast radius
    • Každá komponenta je samostatne importovateľná

    CompareTable + CompareTableItem

    N-column side-by-side comparison — any number of items. Unlike Versus (limited to exactly two), CompareTable accepts any number of <CompareTableItem> children. color, shade, opacity, and bullets are inherited from the parent and can be overridden per item. On mobile the columns stack vertically. Basic usage — three-way comparison:
    James-Langeova teória
    • Periferná teória — telesná reakcia predá emócii
    • Bojíme sa, lebo sa trasieme a utekáme
    • Autori: William James, Carl Lange
    Cannon-Bardova teória
    • Thalamická teória — reakcia a emócia súčasne
    • Talamus vysiela signál naráz do tela aj do kortexu
    • Autori: Walter Cannon, Philip Bard
    Schachter-Singer
    • Dvoufaktorová teória — excitácia + kogn. zhodnotenie
    • Záleží, ako situáciu interpretújeme
    • Autori: Stanley Schachter, Jerome Singer
    Vzorový kód — CompareTable
    <CompareTable color="blue">
      <CompareTableItem title="James-Langeova">
        - Periferná teória — reakcia predá emócii
      </CompareTableItem>
      <CompareTableItem title="Cannon-Bardova">
        - Thalamická teória — reakcia a emócia súčasne
      </CompareTableItem>
      <CompareTableItem title="Schachter-Singer">
        - Dvoufaktorová — excitácia + kogn. zhodnotenie
      </CompareTableItem>
    </CompareTable>
    
    Special — per-item color override:
    Neuróza
    • Miernejšia porucha — zachovaný kontakt s realitou
    • Úzkosť, obsedantné myšlienky, fóbie
    • Pacient si poruchu zvyčajne uvedomuje
    Psychóza
    • Závažná porucha — stratený kontakt s realitou
    • Bludy, halucinácie, dezorganizované myslenie
    • Pacient si poruchu zvyčajne neuvedomuje
    Special — shade="dark" opacity={70} bullets="check" inherited by all items:
    Explicitná pamäť
    • Vedomé vybavovanie faktov a udalostí
    • Epizodická + sémantická
    • Závislaná na hipokampe
    Implicitná pamäť
    • Nevedomá — prejavuje sa konaním, nie verbálne
    • Procedurálna, priming, podmienené reflexy
    • Bazálne gangliá, mozoček, amygdala

    Table

    Structured data table with coloured header and alternating row striping. Always prefer this over standard Markdown tables. Basic usage:
    Typ posilneniaDefiníciaPríklad
    Pozitívne posilneniePridanie príjemného podnetu → frekvencia správania rastiePochvala za dobrý výkon
    Negatívne posilnenieOdstránenie averzívneho podnetu → frekvencia správania rastieVypnutie alarmu po prebudení
    Pozitívny trestPridanie averzívneho podnetu → frekvencia správania klesáPokuta za neskorý príchod
    Negatívny trestOdstránenie príjemného podnetu → frekvencia správania klesáOdobratie privilégia dieťaťu
    Vzorový kód — Table
    <Table
      color="pink"
      headers='["Typ posilnenia", "Definícia", "Príklad"]'
      rows='[
        ["Pozitívne posilnenie", "Pridanie príjemného podnetu", "Pochvala za výkon"],
        ["Negatívne posilnenie", "Odstránenie averzívneho podnetu", "Vypnutie alarmu"]
      ]'
    />
    
    Special — color="blue" multi-column reference table:
    KomponentTypKapacitaObsahPorucha pri poškodení
    Centrálna exekutívaRiadiaciObmedzenáPozornostné zdrojeDysexekutívny syndróm
    Fonologická slučkaSlave system~2 s / 7 slabíkVerbálne, sluchovéFoném. dyslexia
    Visuopriestorová tabuľaSlave systemObmedzenáVizuálne, priestorovéVizuokonštrukčná apráxia
    Epizodický zásobníkIntegračný~4 epizódyMultimodálna integráciaAmnézia (väzba na LTM)
    Special — color="yellow" + shade="dark" header:
    ŠtádiumVekKľúčové akvizícieObmedzenia
    Senzomotorické0–2 r.Trvalnosť objektu (8–12 mes.), motorická koordináciaŽiadne symbolické myslenie
    Predoperačné2–7 r.Symbolická hra, jazyk, egocentrizmusChýba reverzibilita, konzervačné mylenie
    Konkrétno-operačné7–11 r.Zachovanie množstva, triedenie, radenieLen konkrétne obsahy, nie abstraktné
    Formálno-operačné12+ r.Abstrakcia, hypotetické uvažovanie, deduktívna logikaNie všetci dospelí dosahujú

    Part VI — Interactive Components

    QuizCard

    Flashcard-style component — question always visible, answer revealed on click. answer shows a highlighted key answer; children add elaborated explanation below. Basic — question and short answer only:
    Čo je spontánna obnova v kontexte klasického podmieňovania?
    Čiastočná obnova podmienené reakcie (CR) po prestávke nasledujúcej po vyhásínaní — bez ďalšieho podmieňovania.
    Vzorový kód — QuizCard
    <QuizCard
      question="Čo je spontánna obnova?"
      answer="Čiastočná obnova CR po prestávke po vyhásínaní."
      color="pink"
    />
    
    <QuizCard
      question="Ako Baddeley & Hitch (1974) vylepšili model krátkodobej pamäte?"
      answer="Nahradili unitárnu STM štvorkomponentovým modelom pracovnej pamäte."
      color="pink"
      bullets="check"
    >
    
    - **Centrálna exekutíva** — koordinuje podsystémy
    - **Fonologická slučka** — verbálna pamäť
    - **Visuopriestorová tabuľa** — vizuálna pamäť
    
    </QuizCard>
    
    Special — with detailed elaboration in children:
    Ako Baddeley & Hitch (1974) vylepšili Atkinson-Shiffrinov model krátkodobej pamäte?
    Nahradili unitárnu STM štvorkomponentovým modelom pracovnej pamäte: centrálna exekutíva + 2 slave systems + epizodický zásobník.
    • Hlavný problém STM: Atkinson-Shiffrinov model predpokladal jeden unitárny úložný systém
    • Dôkaz: Duálne-task experimenty ukázali, že verbálne a vizuálne úlohy sa vzájomne nerušia — svedčí o separátnych subsystémoch
    • Centrálna exekutíva — nemá vlastné pamäťové kapacity, riadi iba pozornosť a koordináciu
    • Epizodický zásobník (pridaný 2000) — integruje informácie z oboch slave systems a z dlhodobej pamäte
    Special — color="blue" + bullets="arrow" without children:
    Čo je biologická pripravenosť (preparedness) a kto ju opisal?
    Seligman (1971): niektoré asociácie sa učíme oveľa ľahšie kvôli evolučnej histórii druhu. Chuť–choroba sa podmieňuje jedným párovaním; chuť–šok oveľa ťažšie.
    Special — color="orange" for exam traps:
    Prečo negatívne posilnenie NIE JE trest?
    Negatívne posilnenie ZVYŠUJE frekvenciu správania (odstraňuje averzívny podnet). Trest frekvenciu ZNIŽUJE. Obe operácie sú smer správania opačné.
    • Negatívne posilnenie: averzívny podnet sa odstráni → správanie sa opakuje, lebo vedie k úľave
    • Trest: averzívny podnet sa pridá (alebo príjemný odstráni) → správanie sa potlačí
    • Bežná chyba: stotožniť „negatívne" s „zlé" — v behaviorálnej terminológii len znamená „odstránenie"

    StepList + Step

    Numbered (ordered) or icon-bulleted (unordered) step-by-step sequence. Basic — variant="ordered" (default):
    Akvizičná fáza
    CS (napr. zvonček) sa opakovane páruje s UCS (jedlo) v tesnom časovom súsledí (~0,5 s). Sila CR rastie s počtom párovaní až po asymptotu — závisí od intenzity UCS.
    Vyhásínanie
    CS sa prezentuje bez UCS. CR postupne slabne. Toto je nové inhibičné učenie, nie zabudnutie.
    Spontánna obnova
    Po dostatočnej prestávke sa CR čiastočne obnoví pri prvom prezentovaní CS — dôkaz, že pôvodná asociácia nebola vymazaná.
    Akvizičná fáza
    CS (napr. zvonček) sa opakovane páruje s UCS (jedlo) v tesnom časovom súsledí (~0,5 s). Sila CR rastie s počtom párovaní až po asymptotu — závisí od intenzity UCS.
    Vyhásínanie
    CS sa prezentuje bez UCS. CR postupne slabne. Toto je nové inhibičné učenie, nie zabudnutie.
    Spontánna obnova
    • CS sa prezentuje bez UCS. CR postupne slabne. Toto je nové inhibičné učenie, nie zabudnutie.
    • ďalší text
    Vzorový kód — StepList + Step
    <StepList color="blue" variant="ordered">
      <Step title="Akvizičná fáza">
        CS sa opakovane páruje s UCS v tesnom časovom súsledí (~0,5 s).
      </Step>
      <Step title="Vyhásínanie">
        CS sa prezentuje bez UCS. CR postupne slabne.
      </Step>
      <Step title="Spontánna obnova">
        Po prestávke sa CR čiastočne obnoví — pôvodná asociácia nebola vymazaná.
      </Step>
    </StepList>
    
    Special — variant="unordered" + bullets="check" in body:
    Systematická desenzibilizácia
    Wolpe (1958) — aplikácia klasického podmieňovania pri liečbe fóbií:
    • Nacvičenie hlbokej svalovej relaxácie
    • Zostrojenie hierarchie strachových podnetov (od najslabších)
    • Postupná expozícia pri simultánnej relaxácii
    Averzná terapia
    Parovanie nežiaduceho správania (alkohol, fajčenie) s averzívnym podnetom (nauzea, elektrošok). Eticky kontroverzná; prednosť má KBT.
    Biofeedback
    Podmieňovanie autonómnych reakcií (srdcová frekvencia, krvný tlak) cez meranie a spätné oznamovanie fyziologických signálov v reálnom čase.
    Special — color="pink" without body content (title only):
    Definovanie výskumnej otázky a hypotézy
    Návrh experimentálneho designu a výber participantov
    Zber dát a kontrola konfundujúcich premenných
    Štatistická analýza a interpretácia výsledkov
    Publikácia a peer-review

    TreeList

    Transforms a nested markdown list into a visual taxonomy tree with L-shaped connector lines. No JSON — just indented markdown list syntax (two spaces per level). Basic — two levels:
    • Podmieňovanie
      • Klasické podmieňovanie (Pavlov)
      • Operantné podmieňovanie (Skinner)
      • Pozorovacie učenie (Bandura)
    Vzorový kód — TreeList
    <TreeList color="green">
    - Podmieňovanie
      - Klasické podmieňovanie (Pavlov)
      - Operantné podmieňovanie (Skinner)
      - Pozorovacie učenie (Bandura)
    </TreeList>
    
    Special — deep nesting (3 levels):
    • Pamäťové systémy
      • Senzorická pamäť
        • Ikonická (zraková, ~250 ms)
        • Echoická (sluchová, ~3–4 s)
      • Krátkodobá / Pracovná pamäť
        • Centrálna exekutíva
        • Fonologická slučka
        • Visuopriestorová tabuľa
        • Epizodický zásobník
      • Dlhodobá pamäť
        • Explicitná (deklaratívna)
          • Epizodická — osobné udalosti
          • Sémantická — všeobecné vedomosti
        • Implicitná (nedeklaratívna)
          • Procedurálna — zručnosti a návyky
          • Priming — facilitácia spracovania
          • Podmienené reakcie
    Special — color="yellow" DSM diagnostic hierarchy:
    • Úzkostné poruchy (MKN-10: F40–F48)
      • Fobické úzkostné poruchy (F40)
        • Agorafóbia
        • Sociálna fóbia
        • Špecifické fóbie
      • Iné úzkostné poruchy (F41)
        • Panická porucha
        • Generalizovaná úzkostná porucha
      • Obsesívno-kompulzívna porucha (F42)
      • Reakcie na závažný stres (F43)
        • Akútna stresová reakcia
        • PTSD
        • Poruchy prispôsobenia

    Tabs

    Client-side tabbed interface. Content is server-rendered; only the tab selection runs client-side. Basic — 3 tabs:
    Forma asociatívneho učenia, pri ktorej sa neutrálny CS po párovaní s UCS stane schopným vyvolávať CR. Pavlov (1890s) → Watson (1913) → Rescorla-Wagner model (1972).
    Vzorový kód — Tabs + Tab
    <Tabs color="pink">
      <Tab title="Klasické podmieňovanie">
        Forma asociatívneho učenia, pri ktorej sa neutrálny CS...
      </Tab>
      <Tab title="Operantné podmieňovanie">
        Skinner (1938) — správanie je riadené dôsledkami.
      </Tab>
    </Tabs>
    
    Special — color="blue" technical tabs:
    Shared utility function used by every block component (Callout, Summary, Definition, etc.). It walks the React children tree and replaces createList/createListItem elements with SVG-bulleted versions. Detection is via reference equality checks — child.type === createList — which is why all imports must use the canonical source path.
    Complete component inventory
    • Text blocks (7): Callout · Note · Definition · Summary · Sub · Divider · KeyFact
    • Inline (3): Concept · GlossaryTooltip · Reference
    • Academic layout (8): SectionHeader · SubSection · TopicHighlight · TerminologyList+Term · AccordionGroup+AccordionItem · Mnemonic+MnemonicItem · Timeline · ExperimentCard
    • Data visualisation (6): ScoreRing · RatingBars · BarChart · SpecGrid+SpecItem · ProsCons
    • Comparison + Tables (3): Versus · CompareTable+CompareTableItem · Table
    • Interactive (4): QuizCard · StepList+Step · TreeList · Tabs+Tab
    • Architecture: Feature-sliced into base/, blocks/, content/, data/, interactive/ — 34 files total, 214-line orchestrator