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 shown
🧱
SURFACE
(9)
🕹️
CONTROL
(20)
IntentControlButton
Control
Primary control button: intent-driven visuals, glow-ready, stable hooks.
Open
IntentControlButtonGroup
Control
Intent-first grouped buttons/links: single or multiple toggle selection, attached mode, orientation, keyboard navigation.
Open
IntentControlColor
Control
Intent-first color picker: selectable swatches, grid/list layouts, preset color sets, optional custom native picker, standalone or wrapped by IntentControlField.
Open
IntentControlCombobox
Control
Intent-first combobox (typeahead/autocomplete): accessible dropdown, full keyboard support, standalone or wrapped by IntentControlField.
Open
IntentControlData
Control
Intent-first structural data editor (JSON/YAML/XML/…): textarea + syntax overlay, read-only, line numbers, standalone or wrapped by IntentControlField.
Open
IntentControlDate
Control
Intent-first date control: single input (native or text) or split day/month/year inputs with validation, paste parsing, and ISO value model.
Open
IntentControlDropdown
Control
Dropdown / actions menu in a popover: custom trigger or IntentControlButton trigger, keyboard nav + typeahead, header/footer slots, glow-ready.
Open
IntentControlField
Control
Intent-first field wrapper: label/description/error, optional leading/trailing slots, layout variants.
Open
IntentControlFiles
Control
Intent-first file picker / dropzone: single or multiple files, drag & drop, clear/remove actions, validation, standalone or wrapped by IntentControlField.
Open
IntentControlInput
Control
Intent-first input/textarea: standalone or wrapped by IntentControlField (insideField).
Open
IntentControlLink
Control
Navigation/link control with the same intent mechanics as buttons.
Open
IntentControlMarkdown
Control
Intent-first Markdown editor: toolbar, shortcuts, preview/split, standalone or wrapped by IntentControlField.
Open
IntentControlNavList
Control
Intent-first vertical navigation (sidebar-style): wrapper + listbox items, active/inactive overrides, keyboard nav + typeahead, optional href items.
Open
IntentControlRange
Control
Intent-first range slider: standalone or naked, labels, value display, leading/trailing slots, glow-ready.
Open
IntentControlSegmented
Control
Intent-first segmented control: toggle button group (single/multi) for state selection (not navigation).
Open
IntentControlSelect
Control
Intent-first custom select: combobox + listbox, keyboard nav, glow-ready.
Open
IntentControlTabs
Control
Intent-first tabs (segmented control): keyboard nav, optional equal/fullWidth, glow-ready.
Open
IntentControlTags
Control
Intent-first multi-value input (tags/tokens). Standalone or wrapped by IntentControlField.
Open
IntentControlTime
Control
Time control (single or split hour/minute) with paste + validation.
Open
IntentControlToggle
Control
Intent-first toggle switch: track + thumb, optional label/description, glow-ready.
Open