Playground
Try the real resolver and components
This page is the only place where the landing imports the package. Tweak intent, variant, tone and glow to see the system react.
PLAYGROUND
Explore intents, variants, tones, glow, intensity and see the resolver output.
Presets
CONTROLS
DARK
mode="dark"
IntentSurface preview
Stable hooks + CSS variables. No dynamic Tailwind classes.
intent=informed · variant=elevated · intensity=medium
RESOLVED (DEBUG)
{
"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": []
}COMPONENTS
Browse components and jump to dedicated playground pages.
18/18 shownTip: Ctrl/⌘ + K (CommandPalette)
🧱
SURFACE
(2)🕹️
CONTROL
(9)IntentControlButton
ControlPrimary control button: intent-driven visuals, glow-ready, stable hooks.
Open→
IntentControlField
ControlIntent-first field wrapper: label/description/error, optional leading/trailing slots, layout variants.
Open→
IntentControlLink
ControlNavigation/link control with the same intent mechanics as buttons.
Open→
IntentControlSegmented
ControlIntent-first segmented control: toggle button group (single/multi) for state selection (not navigation).
Open→
IntentControlSelect
ControlIntent-first custom select: combobox + listbox, keyboard nav, glow-ready.
Open→
IntentControlTabs
ControlIntent-first tabs (segmented control): keyboard nav, optional equal/fullWidth, glow-ready.
Open→
IntentControlToggle
ControlIntent-first toggle switch: track + thumb, optional label/description, glow-ready.
Open→
IntentPickerGlow
ControlIntent-first glow picker: ignite the aura (toggle) or choose an omen (aurora/ember/cosmic/mythic/royal/mono).
Open→
IntentPickerTone
ControlIntent-first tone picker: Tailwind palette + themed/ink options, native select, stable and accessible.
Open→
🧬
DATA
(3)IntentCodeViewer
DataIntent-first code/data viewer: highlight tokens reflect intent, optional header/meta, copy, wrap, line numbers.
Open→
IntentTable
DataIntent-first table for structured data: render columns, loading/empty states, density, stripes, selection.
Open→
IntentTree
DataIntent-first hierarchical tree (SVG): zoom/pan, collapse, selection, custom nodes/links. Built for genealogies.
Open→
🧭
LAYOUT
(2)