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",
"toneStep": 500,
"toneEffective": "blue",
"glowKey": null,
"glowBackground": null,
"style": {
"--intent-bg": "var(--ids-color-blue-500)",
"--intent-ring": "var(--ids-color-blue-700)",
"--intent-text": "var(--ids-color-blue-200)",
"--intent-bg-opacity": "0.16",
"--intent-ring-opacity": "0.304",
"--intent-border": "var(--ids-color-blue-700)",
"--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.
50/50 shownTip: Ctrl/⌘ + K (CommandPalette)
🧱
SURFACE
(9)IntentCommandPalette
SurfaceCommand palette (⌘K/Ctrl+K): overlay + panel + search + list, keyboard nav, glow-ready.
Open→
IntentDialog
SurfaceModal dialog (overlay + centered panel): sizes, focus trap, ESC/overlay close, scroll lock, glow-ready.
Open→
IntentDrawer
SurfaceSliding drawer (overlay + panel): left/right/top/bottom, sizes, focus trap, ESC/overlay close, scroll lock.
Open→
IntentPopover
SurfaceIntent-first popover / tooltip surface: hover/click/manual, smart positioning, arrow, interactive mode.
Open→
IntentSurface
SurfaceSemantic surface container with ring, bg, and optional glow layers.
Open→
IntentSurfaceCard
SurfaceItem surface (Card): media/header/footer optionnels, padding scale, bleed mode, dividers, interactive/pressed states. Intent-first + glow layers.
Open→
IntentSurfacePanel
SurfaceSection container surface: header/footer optionnels, padding scale, bleed mode, dividers. Intent-first + glow layers.
Open→
IntentSurfaceSkeleton
SurfaceIntent-first loading placeholder for widgets, cards, panels, and generic surfaces with header/body/footer anatomy.
Open→
IntentSurfaceWidget
SurfaceCompact dashboard widget surface: light header, emoji/title, badges/actions, optional collapse and dismiss.
Open→
🕹️
CONTROL
(20)IntentControlButton
ControlPrimary control button: intent-driven visuals, glow-ready, stable hooks.
Open→
IntentControlButtonGroup
ControlIntent-first grouped buttons/links: single or multiple toggle selection, attached mode, orientation, keyboard navigation.
Open→
IntentControlColor
ControlIntent-first color picker: selectable swatches, grid/list layouts, preset color sets, optional custom native picker, standalone or wrapped by IntentControlField.
Open→
IntentControlCombobox
ControlIntent-first combobox (typeahead/autocomplete): accessible dropdown, full keyboard support, standalone or wrapped by IntentControlField.
Open→
IntentControlData
ControlIntent-first structural data editor (JSON/YAML/XML/…): textarea + syntax overlay, read-only, line numbers, standalone or wrapped by IntentControlField.
Open→
IntentControlDate
ControlIntent-first date control: single input (native or text) or split day/month/year inputs with validation, paste parsing, and ISO value model.
Open→
IntentControlDropdown
ControlDropdown / actions menu in a popover: custom trigger or IntentControlButton trigger, keyboard nav + typeahead, header/footer slots, glow-ready.
Open→
IntentControlField
ControlIntent-first field wrapper: label/description/error, optional leading/trailing slots, layout variants.
Open→
IntentControlFiles
ControlIntent-first file picker / dropzone: single or multiple files, drag & drop, clear/remove actions, validation, standalone or wrapped by IntentControlField.
Open→
IntentControlInput
ControlIntent-first input/textarea: standalone or wrapped by IntentControlField (insideField).
Open→
IntentControlLink
ControlNavigation/link control with the same intent mechanics as buttons.
Open→
IntentControlMarkdown
ControlIntent-first Markdown editor: toolbar, shortcuts, preview/split, standalone or wrapped by IntentControlField.
Open→
IntentControlNavList
ControlIntent-first vertical navigation (sidebar-style): wrapper + listbox items, active/inactive overrides, keyboard nav + typeahead, optional href items.
Open→
IntentControlRange
ControlIntent-first range slider: standalone or naked, labels, value display, leading/trailing slots, glow-ready.
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→
IntentControlTags
ControlIntent-first multi-value input (tags/tokens). Standalone or wrapped by IntentControlField.
Open→
IntentControlTime
ControlTime control (single or split hour/minute) with paste + validation.
Open→
IntentControlToggle
ControlIntent-first toggle switch: track + thumb, optional label/description, glow-ready.
Open→
🧬
DATA
(5)IntentCodeViewer
DataIntent-first code/data viewer: highlight tokens reflect intent, optional header/meta, copy, wrap, line numbers.
Open→
IntentPdfViewer
DataIntent-first PDF viewer: embedded preview (iframe/object), optional header/meta, open/download actions, toolbar hide, fullscreen.
Open→
IntentStat
DataIntent-first stat block for dashboards: value + label + optional delta/trend, icon and right slot, glow-ready.
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→
🔔
FEEDBACK
(4)IntentConfirmDialog
FeedbackIntent-first confirmation dialog (modal): overlay + panel, keyboard (Esc/Enter), focus trap, confirm/cancel actions.
Open→
IntentLoader
FeedbackIntent-first animated loader: cosmic spinner/orbit/comet/radar/warp/galaxy variants, labels, progress, centered and framed modes.
Open→
IntentProgressBar
FeedbackIntent-first progress bar: determinate or indeterminate, horizontal/vertical, labels, marker, stripes, pulse and glow-ready.
Open→
IntentToast
FeedbackIntent-first toast notification: auto-dismiss, optional action, dismissible, placements.
Open→
🧭
LAYOUT
(5)IntentDivider
LayoutIntent-first layout divider: horizontal or vertical line with optional label.
Open→
IntentJourney
LayoutIntent-first journey (stepper/timeline): vertical or horizontal, statuses, clickable steps, keyboard nav.
Open→
IntentStepper
LayoutIntent-first stepper for multi-step forms and workflows: clickable steps, inferred or explicit statuses, progress bar, compact mode.
Open→
IntentTimeline
LayoutIntent-first linear timeline for events: vertical/horizontal, marker variants, grouping headers, selection, optional expand/collapse, keyboard nav.
Open→
IntentToolbar
LayoutIntent-first toolbar surface: left/center/right slots, wrap/align/justify, optional sticky and divider, glow-ready.
Open→
🚦
INDICATOR
(1)✨
DESIGN
(3)IntentPickerGlow
DesignIntent-first glow picker: ignite the aura (toggle) or choose an omen (aurora/ember/cosmic/mythic/royal/mono).
Open→
IntentPickerTone
DesignIntent-first tone picker: Tailwind palette + themed/ink options, native select, stable and accessible.
Open→
IntentThemePreview
DesignCompact theme preview grid: validate intents + aesthetic glows across mode/variant/intensity/toneStep at a glance.
Open→