Event shortcuts

"code-keyword">import { signal } "code-keyword">from '@astro-dx/core';
"code-keyword">import { onFocus, onHover, onInput, onKey, onResize, onSubmit } "code-keyword">from '@astro-dx/events';

"code-keyword">const query = "code-function">signal('');
"code-keyword">const status = "code-function">signal('idle');
"code-keyword">const hoverState = "code-function">signal('outside');
"code-keyword">const focusState = "code-function">signal('blurred');
"code-keyword">const boxSize = "code-function">signal('waiting resize...');

"code-function">onInput('#search-input', (value) => query."code-function">set(value));
"code-function">onSubmit('#search-form', () => status."code-function">set(`submit:${query()}`));
"code-function">onKey('#search-input', 'Enter', () => status."code-function">set(`enter:${query()}`));

"code-function">onHover('#hover-zone', {
  enter: () => hoverState."code-function">set('inside'),
  leave: () => hoverState."code-function">set('outside'),
});

"code-function">onFocus('#focus-input', {
  focus: () => focusState."code-function">set('focused'),
  blur: () => focusState."code-function">set('blurred'),
});

"code-function">onResize('#resizable-box', (entry) => {
  "code-keyword">const width = Math."code-function">round(entry.contentRect.width);
  "code-keyword">const height = Math."code-function">round(entry.contentRect.height);
  boxSize."code-function">set(`${width} x ${height}`);
});