# `lr-mind-map` - **Import** `import '@aceshooting/lyra-ui/components/lr-mind-map.js';` (stable tag alias; registers the tag) - **Class** `LyraMindMap`, also available unregistered from `@aceshooting/lyra-ui/components/retrieval/mind-map/mind-map.class.js` - **Family** `components/retrieval/` — see `llms/index.md` for its siblings - **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt) - **Deprecations** none - **Optional peers** none - **Themeable via** 8 parts, 2 custom properties — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-mind-map` A radial expandable topic tree (NotebookLM Mind Maps): a spatial overview of a topic hierarchy where activating a topic drills in or hands the topic to the chat. Hierarchy, not network — no cross-links, no force simulation, no communities, no edge labels (that's `lr-graph`). Zero-dependency SVG; the radial layout is closed-form arithmetic, in its own `mind-map-layout.ts` module, mirroring `lr-word-cloud`'s dependency-free precedent. **Properties:** - `topics: LyraTopic[] = []` (attribute: false) — `LyraTopic { id: string; label: string; children?: LyraTopic[] }`; a single root sits at the center, multiple roots hang off an implicit center hub - `label?: string` — accessible name for the SVG group and the implicit hub's text; omission uses the localized mind-map label, while an explicit empty string stays empty - `expandDepth: number = 1` (attribute `expand-depth`) — initial expansion depth (root + first ring); expansion state afterward is component-managed per topic id and survives `topics` reassignment **Events:** `lr-topic-select` (`detail: { topicId }`, a _leaf_ topic was activated), `lr-topic-toggle` (`detail: { topicId, expanded }`, a parent topic was activated, or auto-expanded by keyboard descent). **Slots:** none. **CSS parts:** `base`, `svg` (the single-tab-stop focus target), `node`, `node-label`, `link` (parent-child connector), `focus-ring` (keyboard focus ring), `live-region` (visually hidden announcement region), `empty` (shown when `topics` is empty). **Themeable custom properties:** `--lr-mind-map-ring-gap` (default `6rem`, radius step per depth ring). `--lr-mind-map-node-hover-halo` (default `var(--lr-color-brand-quiet)`) — stroke color of the halo drawn around a topic node's dot on `:hover`, giving mouse users the same "this is clickable" feedback keyboard users already get from the drawn `focus-ring` part. **Optional peer deps:** none. ```html ``` **Known gotchas:** - A user's explicit expand/collapse only ever overrides the `depth < expandDepth` default in the direction chosen — reassigning `topics` (even with the same ids) never silently discards that override. - Node-position transitions use `--lr-transition-base`, which already collapses to near-zero under `prefers-reduced-motion: reduce` globally, so expansion snaps rather than tweening for a reduced-motion user with no extra branching in this component. - Topic ids must be nonblank and unique across the complete hierarchy. Later depth-first duplicates and their subtrees are omitted before layout, navigation, expansion state, rendering, or events. ---