The bar — destination router, attach chips, state orb
Pick where it goes before you write it. Enter sends,
Shift + Enter makes a newline. Nothing is transmitted anywhere — this demo
only logs the payload the component hands your host.
State orbs — five states, one circle and one ring
No glow, no gradient, no particle field — a dot for the state and a ring for the
motion. Under
prefers-reduced-motion the rings hold still and keep
their color, so the state is never carried by movement alone.
Compact modal — tangible, never a dimmed page
MODULARITY law: the panel is real material on a true shadow. There is no scrim —
the page behind stays legible and un-greyed. An outside click or Esc closes it;
focus returns to the button that opened it.
Hand-written markup, enhanced in place
Same component, no JS-built markup:
ChatBar.enhance('#hand') reads the
destinations straight out of the DOM you wrote and wires the whole bar.
The whole component — two files
<link rel="stylesheet" href="chatbar.css">
<script src="chatbar.js"></script>
<div class="cb-root" data-cb-theme="light"><div id="composer"></div></div>
<script>
var bar = ChatBar.mount('#composer', {
placeholder: 'Write a message…',
destinations: [
{ id:'ora', group:'AI', glyph:'◍', label:'Ora', hint:'Your AI — answers in thread' },
{ id:'enok', group:'Spaces', glyph:'▣', label:'ENOK', hint:'Space chat · 4 members' }
]
});
bar.el.addEventListener('chatbar:send', function (e) {
// e.detail = { text, destination, destinationLabel, attachments }
// e.preventDefault() keeps the draft in the bar (e.g. while your POST is in flight)
send(e.detail);
});
</script>
Ora BUILDERclaude-opus-5MachineSync