COMPONENT
IntentTree
Visualisation hiérarchique intent-first (SVG): zoom/pan, collapse, sélection, rendu nodes/links custom. Pensé pour Space Memoria.
datasince 0.2.0
DESIGN SYSTEM
mode
Dataset
Targaryen 🐉
Intent
Variant
Glow
Intensity
State
PLAYGROUND
Scope mode
fratrie = siblings (B)
Search
Match = intent “empowered” via nodeIntent (et/ou ton moteur interne).
Lineage highlight
Mini-map / Fullscreen / Toolbar
Toolbar actions
Layout
Orientation
Link style
Sizing
Interactions
Tree features
Grid
State (debug)
selectedId: null
collapsed: 0
PREVIEW
RESOLVED
{
"mode": "dark",
"intent": "informed",
"variant": "elevated",
"intensity": "medium",
"toneEffective": "informed",
"glowKey": null,
"glowBackground": null,
"style": {
"--intent-bg": "rgb(var(--ids-informed))",
"--intent-ring": "rgb(var(--ids-informed))",
"--intent-text": "var(--ids-color-blue-200)",
"--intent-bg-opacity": "0.16",
"--intent-ring-opacity": "0.3045",
"--intent-border": "rgb(var(--ids-informed))",
"--intent-glow-bg": "",
"--intent-glow-fill-opacity": "0",
"--intent-glow-border-opacity": "0",
"--intent-glow-filter": "none"
},
"classes": {
"base": "intent-surface inline-flex items-center gap-2",
"surface": "intent-bg",
"border": "intent-ring",
"text": "intent-text",
"ring": "",
"shadow": "intent-shadow-soft",
"glow": "",
"disabled": ""
},
"warnings": []
}PROPS
| Prop | Type | Default |
|---|---|---|
| PROPS SYSTÈME | ||
intent Intent sémantique (informed/empowered/warned/threatened/themed/toned/glowed). | IntentName | DEFAULT_INTENT |
variant Variant visuel (flat/outlined/elevated/ghost). | VariantName | DEFAULT_VARIANT |
tone Override de tone (n’a d’effet que si intent='toned'). | ToneName | DEFAULT_TONE (si toned) |
glow Glow normal (true/false) ou glow esthétique (uniquement si intent='glowed'). | boolean | GlowName | false (ou DEFAULT_GLOW_BY_INTENT) |
intensity Intensité (soft/medium/strong). | Intensity | medium |
mode Mode colorimétrique (dark/light). | ModeName | dark |
disabled Désactive l’état visuel (hooks + styles). | boolean | false |
| PROPS LOCALES | ||
rootrequis Racine de l’arbre. | T | — |
getChildrenrequis Accès aux enfants. | (node: T) => T[] | null | undefined | — |
getIdrequis Id stable par nœud. | (node: T) => string | number | — |
getLabel Label (renderer par défaut). | (node: T) => React.ReactNode | — |
getSubtitle Sous-label (renderer par défaut). | (node: T) => React.ReactNode | — |
layout Mode de layout: auto ou custom. | "auto" | "custom" | auto |
orientation Orientation: vertical/horizontal. | "vertical" | "horizontal" | vertical |
linkStyle Style des liens. | "curve" | "elbow" | "straight" | curve |
nodeWidth Largeur node (default renderer + auto layout). | number | 220 |
nodeHeight Hauteur node (default renderer + auto layout). | number | 64 |
levelGap Distance entre niveaux. | number | 90 |
siblingGap Distance entre siblings. | number | 28 |
padding Padding autour du contenu. | number | 40 |
getNodePosition Position custom (ex: D3 tree). | (args) => {x:number;y:number} | — |
collapsible Active collapse/expand. | boolean | true |
collapsedIds Ids collapsés (controlled). | string[] | — |
defaultCollapsedIds Ids collapsés init (uncontrolled). | string[] | [] |
onCollapsedChange Callback collapse. | (ids: string[]) => void | — |
selectable Active sélection. | boolean | true |
selectedId Sélection (controlled). | string | null | — |
defaultSelectedId Sélection init (uncontrolled). | string | null | null |
onSelectionChange Callback sélection. | (id: string | null, node?: T) => void | — |
nodeIntent Override intent par node. | IntentInput | ((node:T)=>IntentInput|null) | — |
renderNode Renderer node custom. | (ctx) => React.ReactNode | — |
renderLink Renderer lien custom. | (ctx) => React.ReactNode | — |
zoomable Zoom (wheel/pinch). | boolean | true |
pannable Pan (drag). | boolean | true |
minZoom Zoom min. | number | 0.25 |
maxZoom Zoom max. | number | 2.5 |
viewport Viewport (controlled). | {x:number;y:number;k:number} | — |
defaultViewport Viewport init (uncontrolled). | {x:0,y:0,k:1} | {x:0,y:0,k:1} |
onViewportChange Callback viewport. | (vp) => void | — |
autoFit Fit contenu au mount. | boolean | true |
showGrid Affiche grille de repère. | boolean | false |
gridSize Taille grille. | number | 40 |
scopeMode Mode scope: asc/desc/fratrie/full. | "asc" | "desc" | "siblings" | "full" | full |
scopeDepth Limite de profondeur pour asc/desc. | number | Infinity |
searchable Active la recherche. | boolean | true |
miniMap Active la mini-map. | boolean | true |
fullscreenable Active le fullscreen. | boolean | true |
emptyLabel Label si arbre vide. | React.ReactNode | No nodes |
TYPES & CONSTANTES
| API | Valeur / Référence |
|---|---|
| TYPES | |
IntentNametype Type union des intents sémantiques. | "informed" | "empowered" | "warned" | "threatened" | "themed" | "toned" | "glowed" |
VariantNametype Type union des variants visuels. | "flat" | "outlined" | "elevated" | "ghost" |
ToneNametype Type union des tones (familles Tailwind + theme + black). | ("slate" | "gray" | ... | "theme" | "black") |
GlowNametype Type union des aesthetic glows (utilisable quand intent='glowed'). | "aurora" | "ember" | "cosmic" | "mythic" | "royal" | "mono" |
Intensitytype Intensité des effets (glow/contraste). | "soft" | "medium" | "strong" |
ModeNametype Mode colorimétrique. | "dark" | "light" |
| CONSTANTES | |
DEFAULT_INTENTconst Intent par défaut si aucun intent n’est fourni. | informed |
DEFAULT_VARIANTconst Variant par défaut si aucun variant n’est fourni. | elevated |
DEFAULT_GLOW_BY_INTENTconst Mapping intent → glow par défaut (quand glow est implicite). | DEFAULT_GLOW_BY_INTENT |