decantr 0.9.0

package/src/components/masked-input.js

@@ -0,0 +1,236 @@
+/**
+ * MaskedInput — Format-masked text input for phone numbers, credit cards, dates, etc.
+ * Mask tokens: # (digit), A (letter), * (alphanumeric), literals pass through.
+ *
+ * @module decantr/components/masked-input
+ */
+import { h } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string} props.mask - Mask pattern, e.g. '(###) ###-####', '##/##/####', '####-####-####-####'
+ * @param {string} [props.placeholder='_'] - Placeholder character shown in unfilled slots
+ * @param {string|Function} [props.value] - Current value (unmasked digits/letters)
+ * @param {boolean|Function} [props.disabled]
+ * @param {boolean} [props.readonly]
+ * @param {string} [props.error] - Error state
+ * @param {Function} [props.onchange] - Called with unmasked value string
+ * @param {Function} [props.oncomplete] - Called with unmasked value when all slots filled
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function MaskedInput(props = {}) {
+  injectBase();
+  const {
+    mask,
+    placeholder: ph = '_',
+    value,
+    disabled,
+    readonly,
+    error,
+    onchange,
+    oncomplete,
+    class: cls,
+  } = props;
+
+  if (!mask) throw new Error('MaskedInput requires a mask prop');
+
+  // Parse mask into slot descriptors
+  const slots = [];
+  for (let i = 0; i < mask.length; i++) {
+    const c = mask[i];
+    if (c === '#') slots.push({ type: 'digit', index: i });
+    else if (c === 'A') slots.push({ type: 'letter', index: i });
+    else if (c === '*') slots.push({ type: 'alnum', index: i });
+    else slots.push({ type: 'literal', char: c, index: i });
+  }
+
+  const editableSlots = slots.filter(s => s.type !== 'literal');
+  const totalEditable = editableSlots.length;
+
+  function testChar(slot, ch) {
+    if (slot.type === 'digit') return /\d/.test(ch);
+    if (slot.type === 'letter') return /[a-zA-Z]/.test(ch);
+    if (slot.type === 'alnum') return /[a-zA-Z0-9]/.test(ch);
+    return false;
+  }
+
+  function unmasked(display) {
+    let raw = '';
+    for (const s of editableSlots) {
+      const ch = display[s.index];
+      if (ch && ch !== ph) raw += ch;
+    }
+    return raw;
+  }
+
+  function toDisplay(raw) {
+    let out = '';
+    let rawIdx = 0;
+    for (const s of slots) {
+      if (s.type === 'literal') {
+        out += s.char;
+      } else if (rawIdx < raw.length) {
+        out += raw[rawIdx++];
+      } else {
+        out += ph;
+      }
+    }
+    return out;
+  }
+
+  function cursorToEditableIndex(pos) {
+    let count = 0;
+    for (let i = 0; i < slots.length; i++) {
+      if (slots[i].type !== 'literal') {
+        if (i >= pos) return count;
+        count++;
+      }
+    }
+    return count;
+  }
+
+  function editableIndexToCursor(idx) {
+    let count = 0;
+    for (let i = 0; i < slots.length; i++) {
+      if (slots[i].type !== 'literal') {
+        if (count === idx) return i;
+        count++;
+      }
+    }
+    return mask.length;
+  }
+
+  function nextEditablePos(pos) {
+    for (let i = pos; i < slots.length; i++) {
+      if (slots[i].type !== 'literal') return i;
+    }
+    return -1;
+  }
+
+  function prevEditablePos(pos) {
+    for (let i = pos; i >= 0; i--) {
+      if (slots[i].type !== 'literal') return i;
+    }
+    return -1;
+  }
+
+  // State
+  const initRaw = typeof value === 'function' ? value() : (value || '');
+  let _display = toDisplay(initRaw);
+
+  const input = h('input', {
+    type: 'text',
+    class: cx('d-input', 'd-masked-input', error && 'd-input-error', cls),
+    value: _display,
+    disabled: (typeof disabled === 'function' ? disabled() : disabled) ? '' : undefined,
+    readonly: readonly ? '' : undefined,
+    'aria-invalid': error ? 'true' : undefined,
+  });
+
+  function sync() {
+    input.value = _display;
+    const raw = unmasked(_display);
+    if (onchange) onchange(raw);
+    if (raw.length === totalEditable && oncomplete) oncomplete(raw);
+  }
+
+  input.addEventListener('focus', () => {
+    // On focus, place cursor at first empty slot
+    requestAnimationFrame(() => {
+      const firstEmpty = _display.indexOf(ph);
+      if (firstEmpty >= 0) input.setSelectionRange(firstEmpty, firstEmpty);
+    });
+  });
+
+  input.addEventListener('keydown', (e) => {
+    const pos = input.selectionStart;
+
+    if (e.key === 'Backspace') {
+      e.preventDefault();
+      const ep = prevEditablePos(pos - 1);
+      if (ep >= 0) {
+        const chars = _display.split('');
+        chars[ep] = ph;
+        _display = chars.join('');
+        sync();
+        input.setSelectionRange(ep, ep);
+      }
+      return;
+    }
+
+    if (e.key === 'Delete') {
+      e.preventDefault();
+      const ep = nextEditablePos(pos);
+      if (ep >= 0) {
+        const chars = _display.split('');
+        chars[ep] = ph;
+        _display = chars.join('');
+        sync();
+        input.setSelectionRange(pos, pos);
+      }
+      return;
+    }
+
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') return; // let browser handle
+
+    // Regular character input
+    if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      e.preventDefault();
+      const ep = nextEditablePos(pos);
+      if (ep >= 0 && testChar(slots[ep], e.key)) {
+        const chars = _display.split('');
+        chars[ep] = e.key;
+        _display = chars.join('');
+        sync();
+        // Move cursor to next editable position
+        const next = nextEditablePos(ep + 1);
+        input.setSelectionRange(next >= 0 ? next : ep + 1, next >= 0 ? next : ep + 1);
+      }
+    }
+  });
+
+  input.addEventListener('paste', (e) => {
+    e.preventDefault();
+    const text = (e.clipboardData || window.clipboardData).getData('text');
+    const chars = _display.split('');
+    let rawIdx = cursorToEditableIndex(input.selectionStart);
+
+    for (const ch of text) {
+      if (rawIdx >= totalEditable) break;
+      const slot = editableSlots[rawIdx];
+      if (testChar(slot, ch)) {
+        chars[slot.index] = ch;
+        rawIdx++;
+      }
+    }
+
+    _display = chars.join('');
+    sync();
+    const nextPos = editableIndexToCursor(rawIdx);
+    input.setSelectionRange(nextPos, nextPos);
+  });
+
+  // Prevent default input behavior (we handle everything via keydown)
+  input.addEventListener('input', (e) => {
+    // Reset to our controlled state in case browser modified value
+    input.value = _display;
+  });
+
+  // Reactive value
+  if (typeof value === 'function') {
+    createEffect(() => {
+      _display = toDisplay(value());
+      input.value = _display;
+    });
+  }
+
+  // Reactive disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => { input.disabled = !!disabled(); });
+  }
+
+  return input;
+}

package/src/components/mentions.js

@@ -0,0 +1,165 @@
+/**
+ * Mentions — Textarea with @mention autocomplete dropdown.
+ * Uses createFieldOverlay + createListbox behaviors.
+ *
+ * @module decantr/components/mentions
+ */
+import { onDestroy } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createListbox, createFormField } from './_behaviors.js';
+import { applyFieldState, createFieldOverlay } from './_primitives.js';
+
+const { div, textarea: textareaTag } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {{ value: string, label: string }[]} [props.options]
+ * @param {string} [props.prefix='@']
+ * @param {string|Function} [props.value]
+ * @param {string} [props.placeholder]
+ * @param {number} [props.rows=3]
+ * @param {boolean|Function} [props.disabled]
+ * @param {boolean|string|Function} [props.error]
+ * @param {boolean|string|Function} [props.success]
+ * @param {string} [props.variant='outlined'] - 'outlined'|'filled'|'ghost'
+ * @param {string} [props.size] - xs|sm|lg
+ * @param {string} [props.label]
+ * @param {string} [props.help]
+ * @param {boolean} [props.required]
+ * @param {Function} [props.onchange]
+ * @param {Function} [props.onSelect]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Mentions(props = {}) {
+  injectBase();
+  const {
+    options = [], prefix = '@', value, placeholder, rows = 3,
+    disabled, error, success, variant, size, label, help, required,
+    onchange, onSelect, class: cls
+  } = props;
+
+  let mentionStart = -1;
+  let mentionQuery = '';
+
+  const textarea = textareaTag({
+    class: 'd-textarea',
+    placeholder,
+    rows: String(rows)
+  });
+
+  if (typeof value === 'function') textarea.value = value();
+  else if (value) textarea.value = value;
+
+  // Reactive disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => { textarea.disabled = disabled(); });
+  } else if (disabled) {
+    textarea.disabled = true;
+  }
+
+  const dropdown = div({ class: 'd-mentions-dropdown', role: 'listbox' });
+
+  const textWrap = div({ class: 'd-textarea-wrap' }, textarea);
+  const wrap = div({ class: cx('d-mentions', cls) }, textWrap, dropdown);
+
+  applyFieldState(textWrap, { error, success, disabled, variant, size });
+
+  const overlay = createFieldOverlay(textWrap, dropdown, {
+    matchWidth: true,
+    onClose: () => {
+      mentionStart = -1;
+      mentionQuery = '';
+    }
+  });
+
+  const listbox = createListbox(dropdown, {
+    itemSelector: '.d-mentions-option',
+    activeClass: 'd-option-active',
+    orientation: 'vertical',
+    onSelect: (el) => {
+      const val = el.dataset.value;
+      insertMention(val);
+    }
+  });
+
+  function showDropdown(filtered) {
+    dropdown.replaceChildren();
+    if (!filtered.length) { overlay.close(); return; }
+
+    filtered.forEach(opt => {
+      const el = div({
+        class: 'd-mentions-option',
+        role: 'option',
+        'data-value': opt.value
+      }, opt.label);
+      el.addEventListener('click', () => insertMention(opt.value));
+      dropdown.appendChild(el);
+    });
+
+    if (!overlay.isOpen()) overlay.open();
+    listbox.highlight(0);
+  }
+
+  function insertMention(val) {
+    const text = textarea.value;
+    const before = text.slice(0, mentionStart);
+    const after = text.slice(textarea.selectionStart);
+    textarea.value = `${before}${prefix}${val} ${after}`;
+    const cursorPos = before.length + prefix.length + val.length + 1;
+    textarea.setSelectionRange(cursorPos, cursorPos);
+    textarea.focus();
+    overlay.close();
+    if (onSelect) onSelect(val);
+    if (onchange) onchange(textarea.value);
+  }
+
+  textarea.addEventListener('input', () => {
+    const pos = textarea.selectionStart;
+    const text = textarea.value;
+
+    let triggerIdx = -1;
+    for (let i = pos - 1; i >= 0; i--) {
+      if (text[i] === prefix) { triggerIdx = i; break; }
+      if (text[i] === ' ' || text[i] === '\n') break;
+    }
+
+    if (triggerIdx >= 0) {
+      mentionStart = triggerIdx;
+      mentionQuery = text.slice(triggerIdx + prefix.length, pos).toLowerCase();
+      const filtered = options.filter(o =>
+        o.label.toLowerCase().includes(mentionQuery) || o.value.toLowerCase().includes(mentionQuery)
+      );
+      showDropdown(filtered);
+    } else {
+      overlay.close();
+    }
+
+    if (onchange) onchange(textarea.value);
+  });
+
+  textarea.addEventListener('keydown', (e) => {
+    if (overlay.isOpen()) {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+        e.preventDefault();
+        listbox.handleKeydown(e);
+      } else if (e.key === 'Escape') {
+        overlay.close();
+      }
+    }
+  });
+
+  onDestroy(() => {
+    overlay.destroy();
+    listbox.destroy();
+  });
+
+  if (label || help) {
+    const { wrapper } = createFormField(wrap, { label, error, help, required, success, variant, size });
+    return wrapper;
+  }
+
+  return wrap;
+}

package/src/components/menu.js

@@ -0,0 +1,259 @@
+/**
+ * Menu — Vertical navigation menu with items, groups, submenus, and separators.
+ * Shares item structure with Dropdown and ContextMenu.
+ * Uses createListbox behavior for keyboard navigation.
+ * Uses createOverlay for submenu show/hide.
+ *
+ * @module decantr/components/menu
+ */
+import { onDestroy } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createListbox, createOverlay, caret } from './_behaviors.js';
+import { icon as iconFn } from './icon.js';
+
+const { div, span, button: buttonTag, nav } = tags;
+
+/**
+ * @typedef {Object} MenuItem
+ * @property {string} label
+ * @property {string} [value]
+ * @property {string|Node} [icon]
+ * @property {boolean} [disabled]
+ * @property {boolean} [separator] - Render as separator instead
+ * @property {string} [group] - Group label
+ * @property {MenuItem[]} [children] - Submenu items
+ * @property {Function} [onclick]
+ */
+
+/**
+ * @param {Object} [props]
+ * @param {MenuItem[]} [props.items]
+ * @param {string|Function} [props.selected] - Selected item value
+ * @param {Function} [props.onSelect] - Called with value on selection
+ * @param {boolean} [props.collapsed=false] - Icon-only mode
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Menu(props = {}) {
+  injectBase();
+  const { items = [], selected, onSelect, collapsed = false, class: cls } = props;
+
+  const menu = nav({
+    class: cx('d-menu', cls),
+    role: 'menu'
+  });
+
+  let currentSelected = typeof selected === 'function' ? selected() : selected;
+  const _cleanups = [];
+
+  function renderItem(item) {
+    if (item.separator) {
+      return div({ class: 'd-menu-separator', role: 'separator' });
+    }
+    if (item.group) {
+      return div({ class: 'd-menu-group-label' }, item.group);
+    }
+
+    const children = [];
+    if (item.icon) {
+      const iconEl = typeof item.icon === 'string'
+        ? iconFn(item.icon, { size: '1em', class: 'd-menu-item-icon' })
+        : item.icon;
+      children.push(iconEl);
+    }
+    if (!collapsed) {
+      children.push(span({ class: 'd-menu-item-label' }, item.label));
+    }
+    if (item.children && item.children.length && !collapsed) {
+      children.push(caret('right', { class: 'd-menu-item-arrow' }));
+    }
+
+    const isSelected = item.value === currentSelected;
+    const el = buttonTag({
+      type: 'button',
+      class: cx('d-menu-item', item.disabled && 'd-menu-item-disabled', isSelected && 'd-menu-item-active'),
+      role: 'menuitem',
+      'aria-disabled': item.disabled ? 'true' : undefined,
+      'aria-label': collapsed ? item.label : undefined,
+      tabindex: '-1'
+    }, ...children);
+
+    if (!item.disabled) {
+      el.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (item.onclick) item.onclick(item.value || item.label);
+        if (onSelect) onSelect(item.value || item.label);
+      });
+    }
+
+    // Submenu handling via createOverlay
+    if (item.children && item.children.length) {
+      const subWrap = div({ class: 'd-menu-sub-wrap' });
+      subWrap.appendChild(el);
+      const submenu = div({ class: 'd-menu-sub', role: 'menu' });
+      item.children.forEach(child => submenu.appendChild(renderItem(child)));
+      subWrap.appendChild(submenu);
+
+      const ov = createOverlay(el, submenu, {
+        trigger: 'hover',
+        hoverDelay: 50,
+        hoverCloseDelay: 150,
+        closeOnEscape: true,
+        closeOnOutside: false
+      });
+      _cleanups.push(() => ov.destroy());
+
+      el.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          ov.open();
+          const first = submenu.querySelector('.d-menu-item');
+          if (first) first.focus();
+        }
+      });
+
+      submenu.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          ov.close();
+          el.focus();
+        }
+      });
+
+      return subWrap;
+    }
+
+    return el;
+  }
+
+  function render() {
+    // Destroy previous behavior instances
+    _cleanups.forEach(fn => fn());
+    _cleanups.length = 0;
+
+    menu.replaceChildren();
+    items.forEach(item => menu.appendChild(renderItem(item)));
+
+    // Wire up keyboard nav
+    const lb = createListbox(menu, {
+      itemSelector: '.d-menu-item:not(.d-menu-item-disabled)',
+      activeClass: 'd-menu-item-highlight',
+      orientation: 'vertical',
+      onSelect: (el) => el.click()
+    });
+    _cleanups.push(() => lb.destroy());
+  }
+
+  render();
+
+  if (typeof selected === 'function') {
+    createEffect(() => {
+      currentSelected = selected();
+      render();
+    });
+  }
+
+  onDestroy(() => {
+    _cleanups.forEach(fn => fn());
+  });
+
+  return menu;
+}
+
+/**
+ * Menubar — Horizontal menu bar.
+ * Uses createOverlay for dropdown show/hide and renderMenuItems for content.
+ * @param {Object} [props]
+ * @param {{ label: string, items: MenuItem[] }[]} [props.menus]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+Menu.Bar = function Menubar(props = {}) {
+  injectBase();
+  const { menus = [], class: cls } = props;
+
+  const bar = div({ class: cx('d-menubar', cls), role: 'menubar' });
+  const _cleanups = [];
+
+  menus.forEach(menuDef => {
+    const trigger = buttonTag({
+      type: 'button',
+      class: 'd-menubar-item',
+      'aria-haspopup': 'menu',
+      'aria-expanded': 'false'
+    }, menuDef.label);
+
+    const dropdown = div({
+      class: 'd-dropdown-menu',
+      role: 'menu',
+      tabindex: '-1'
+    });
+
+    // Render items using same pattern as Dropdown
+    menuDef.items.forEach(item => {
+      if (item.separator) {
+        dropdown.appendChild(div({ class: 'd-dropdown-separator', role: 'separator' }));
+        return;
+      }
+      const el = buttonTag({
+        type: 'button',
+        class: cx('d-dropdown-item', item.disabled && 'd-dropdown-item-disabled'),
+        role: 'menuitem',
+        tabindex: '-1'
+      }, span({ class: 'd-dropdown-item-label' }, item.label));
+
+      if (!item.disabled) {
+        el.addEventListener('click', () => {
+          overlay.close();
+          if (item.onclick) item.onclick(item.value || item.label);
+        });
+      }
+      dropdown.appendChild(el);
+    });
+
+    const wrap = div({ class: 'd-menubar-wrap' });
+    wrap.appendChild(trigger);
+    wrap.appendChild(dropdown);
+
+    const overlay = createOverlay(trigger, dropdown, {
+      trigger: 'click',
+      closeOnEscape: true,
+      closeOnOutside: true,
+      onOpen: () => {
+        wrap.classList.add('d-dropdown-open');
+        lb.reset();
+        if (typeof dropdown.focus === 'function') dropdown.focus();
+      },
+      onClose: () => {
+        wrap.classList.remove('d-dropdown-open');
+      }
+    });
+
+    const lb = createListbox(dropdown, {
+      itemSelector: '.d-dropdown-item:not(.d-dropdown-item-disabled)',
+      activeClass: 'd-dropdown-item-highlight',
+      orientation: 'vertical',
+      onSelect: (el) => el.click()
+    });
+
+    trigger.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        if (!overlay.isOpen()) overlay.open();
+        lb.highlight(0);
+      }
+    });
+
+    _cleanups.push(() => { overlay.destroy(); lb.destroy(); });
+
+    bar.appendChild(wrap);
+  });
+
+  onDestroy(() => {
+    _cleanups.forEach(fn => fn());
+  });
+
+  return bar;
+};