decantr 0.9.0

package/src/components/color-picker.js

@@ -0,0 +1,314 @@
+/**
+ * ColorPicker — Color selection with lightness/chroma panel, hue slider, and presets.
+ * Uses OKLCH color space for perceptually uniform manipulation.
+ * Uses createFieldOverlay + createDrag behaviors.
+ *
+ * @module decantr/components/color-picker
+ */
+import { onDestroy } from '../core/index.js';
+import { createEffect, untrack } from '../state/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createDrag, createFormField } from './_behaviors.js';
+import { applyFieldState, createFieldOverlay, hexToOklch, oklchToHex } from './_primitives.js';
+
+const { div, button: buttonTag, span, input: inputTag } = tags;
+
+const HEX_RE = /^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const STEP_L = 0.01;
+const STEP_C = 0.01;
+const STEP_H = 1;
+const STEP_A = 0.01;
+
+/**
+ * @param {Object} [props]
+ * @param {string|Function} [props.value='#1366D9']
+ * @param {boolean} [props.alpha=false]
+ * @param {string[]} [props.presets]
+ * @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 {Function} [props.onchange]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function ColorPicker(props = {}) {
+  injectBase();
+  const {
+    value = '#1366D9', alpha = false, presets, disabled,
+    error, success, variant, size, label, help, onchange, class: cls
+  } = props;
+
+  let current = typeof value === 'function' ? untrack(value) : value;
+  let oklch = hexToOklch(current);
+  let _init = true;
+
+  // Swatch trigger
+  const swatch = div({ class: 'd-colorpicker-swatch' });
+  swatch.style.background = current;
+  const hexLabel = span(current);
+  const trigger = buttonTag({
+    type: 'button',
+    class: 'd-colorpicker-trigger',
+    'aria-label': 'Pick color'
+  }, swatch, hexLabel);
+
+  // Saturation/lightness panel
+  const satThumb = div({ class: 'd-colorpicker-thumb' });
+  const satPanel = div({
+    class: 'd-colorpicker-saturation',
+    role: 'slider',
+    'aria-label': 'Color saturation and lightness',
+    'aria-valuetext': '',
+    tabindex: '0'
+  }, satThumb);
+
+  // Hue bar
+  const hueThumb = div({ class: 'd-colorpicker-thumb' });
+  hueThumb.style.top = '50%';
+  const hueBar = div({
+    class: 'd-colorpicker-hue',
+    role: 'slider',
+    'aria-label': 'Hue',
+    'aria-valuemin': '0',
+    'aria-valuemax': '360',
+    'aria-valuenow': '0',
+    tabindex: '0'
+  }, hueThumb);
+
+  // Panel container
+  const panel = div({ class: 'd-colorpicker-panel', role: 'dialog', 'aria-label': 'Color picker' });
+
+  // Controls group (sat + bars) — intimate gap via .d-colorpicker-controls
+  const controls = div({ class: 'd-colorpicker-controls' });
+  controls.appendChild(satPanel);
+  const hueWrap = div({ class: 'd-colorpicker-bar-wrap' });
+  hueWrap.appendChild(hueBar);
+  controls.appendChild(hueWrap);
+
+  // Alpha bar (optional)
+  let alphaBar, alphaThumb, alphaDrag, alphaInput;
+  if (alpha) {
+    alphaThumb = div({ class: 'd-colorpicker-thumb' });
+    alphaThumb.style.top = '50%';
+    alphaBar = div({
+      class: 'd-colorpicker-alpha',
+      role: 'slider',
+      'aria-label': 'Opacity',
+      'aria-valuemin': '0',
+      'aria-valuemax': '100',
+      'aria-valuenow': '100',
+      tabindex: '0'
+    }, alphaThumb);
+    const alphaWrap = div({ class: 'd-colorpicker-bar-wrap' });
+    alphaWrap.appendChild(alphaBar);
+    controls.appendChild(alphaWrap);
+  }
+  panel.appendChild(controls);
+
+  // Hex input
+  const hexInput = inputTag({
+    type: 'text',
+    'aria-label': 'Hex color value',
+    spellcheck: 'false',
+    autocomplete: 'off'
+  });
+  const hexInputRow = div({ class: 'd-colorpicker-input' });
+  hexInputRow.appendChild(hexInput);
+
+  if (alpha) {
+    alphaInput = inputTag({
+      type: 'text',
+      'aria-label': 'Opacity percentage',
+      spellcheck: 'false',
+      autocomplete: 'off'
+    });
+    alphaInput.style.width = '3.5em';
+    alphaInput.style.flex = 'none';
+    hexInputRow.appendChild(alphaInput);
+  }
+  panel.appendChild(hexInputRow);
+
+  // Hex input change handler
+  hexInput.addEventListener('change', () => {
+    const val = hexInput.value.trim();
+    if (HEX_RE.test(val)) {
+      const hex = val.startsWith('#') ? val : `#${val}`;
+      current = hex;
+      oklch = hexToOklch(hex);
+      update();
+    } else {
+      hexInput.value = current;
+    }
+  });
+
+  // Alpha input change handler
+  if (alpha && alphaInput) {
+    alphaInput.addEventListener('change', () => {
+      const raw = alphaInput.value.replace('%', '').trim();
+      const num = parseFloat(raw);
+      if (!isNaN(num) && num >= 0 && num <= 100) {
+        oklch.a = num / 100;
+        update();
+      } else {
+        alphaInput.value = `${Math.round(oklch.a * 100)}%`;
+      }
+    });
+  }
+
+  // Presets
+  if (presets && presets.length) {
+    const presetsSection = div({ class: 'd-colorpicker-presets-section' });
+    const presetsLabel = span({ class: 'd-colorpicker-presets-label' }, 'Presets');
+    const presetsRow = div({ class: 'd-colorpicker-presets' });
+    presets.forEach(color => {
+      const p = buttonTag({
+        type: 'button',
+        class: 'd-colorpicker-preset',
+        'aria-label': color
+      });
+      p.style.background = color;
+      p.addEventListener('click', () => {
+        current = color;
+        oklch = hexToOklch(color);
+        update();
+      });
+      presetsRow.appendChild(p);
+    });
+    presetsSection.appendChild(presetsLabel);
+    presetsSection.appendChild(presetsRow);
+    panel.appendChild(presetsSection);
+  }
+
+  const wrap = div({ class: cx('d-colorpicker', cls) }, trigger, panel);
+  applyFieldState(wrap, { error, success, disabled, variant, size });
+
+  function update() {
+    const a = alpha ? oklch.a : 1;
+    current = oklchToHex(oklch.l, oklch.c, oklch.h, a);
+    swatch.style.background = current;
+    hexLabel.textContent = current;
+    // OKLCH-based gradient: vary chroma (x) and lightness (y) at fixed hue
+    const hueHex = oklchToHex(0.7, 0.15, oklch.h);
+    satPanel.style.background = `linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,${hueHex})`;
+    // Map L (0-1) to Y position (1=top, 0=bottom) and C (0-0.4) to X position
+    satThumb.style.left = `${Math.min(100, (oklch.c / 0.4) * 100)}%`;
+    satThumb.style.top = `${Math.max(0, (1 - oklch.l) * 100)}%`;
+    hueThumb.style.left = `${(oklch.h / 360) * 100}%`;
+    // Hex input sync
+    hexInput.value = current;
+    // ARIA updates
+    satPanel.setAttribute('aria-valuetext', `Lightness ${Math.round(oklch.l * 100)}%, Chroma ${Math.round((oklch.c / 0.4) * 100)}%`);
+    hueBar.setAttribute('aria-valuenow', String(Math.round(oklch.h)));
+    // Alpha updates
+    if (alpha && alphaBar) {
+      const pct = Math.round(a * 100);
+      alphaThumb.style.left = `${pct}%`;
+      alphaBar.style.background = `linear-gradient(to right,transparent,${oklchToHex(oklch.l, oklch.c, oklch.h)})`;
+      alphaBar.setAttribute('aria-valuenow', String(pct));
+      if (alphaInput) alphaInput.value = `${pct}%`;
+    }
+    if (onchange && !_init) onchange(current);
+  }
+
+  // Saturation/lightness drag — OKLCH L/C plane
+  const satDrag = createDrag(satPanel, {
+    onMove(x, y) {
+      const rect = satPanel.getBoundingClientRect();
+      oklch.c = Math.max(0, Math.min(0.4, ((x - rect.left) / rect.width) * 0.4));
+      oklch.l = Math.max(0, Math.min(1, 1 - ((y - rect.top) / rect.height)));
+      update();
+    }
+  });
+
+  // Hue drag
+  const hueDrag = createDrag(hueBar, {
+    onMove(x) {
+      const rect = hueBar.getBoundingClientRect();
+      oklch.h = Math.max(0, Math.min(360, ((x - rect.left) / rect.width) * 360));
+      update();
+    }
+  });
+
+  // Alpha drag
+  if (alpha && alphaBar) {
+    alphaDrag = createDrag(alphaBar, {
+      onMove(x) {
+        const rect = alphaBar.getBoundingClientRect();
+        oklch.a = Math.max(0, Math.min(1, (x - rect.left) / rect.width));
+        update();
+      }
+    });
+  }
+
+  // Keyboard support for saturation panel
+  satPanel.addEventListener('keydown', (e) => {
+    let handled = true;
+    switch (e.key) {
+      case 'ArrowRight': oklch.c = Math.min(0.4, oklch.c + STEP_C); break;
+      case 'ArrowLeft': oklch.c = Math.max(0, oklch.c - STEP_C); break;
+      case 'ArrowUp': oklch.l = Math.min(1, oklch.l + STEP_L); break;
+      case 'ArrowDown': oklch.l = Math.max(0, oklch.l - STEP_L); break;
+      default: handled = false;
+    }
+    if (handled) { e.preventDefault(); update(); }
+  });
+
+  // Keyboard support for hue bar
+  hueBar.addEventListener('keydown', (e) => {
+    let handled = true;
+    switch (e.key) {
+      case 'ArrowRight': oklch.h = Math.min(360, oklch.h + STEP_H); break;
+      case 'ArrowLeft': oklch.h = Math.max(0, oklch.h - STEP_H); break;
+      default: handled = false;
+    }
+    if (handled) { e.preventDefault(); update(); }
+  });
+
+  // Keyboard support for alpha bar
+  if (alpha && alphaBar) {
+    alphaBar.addEventListener('keydown', (e) => {
+      let handled = true;
+      switch (e.key) {
+        case 'ArrowRight': oklch.a = Math.min(1, oklch.a + STEP_A); break;
+        case 'ArrowLeft': oklch.a = Math.max(0, oklch.a - STEP_A); break;
+        default: handled = false;
+      }
+      if (handled) { e.preventDefault(); update(); }
+    });
+  }
+
+  const overlay = createFieldOverlay(trigger, panel, {
+    trigger: 'click',
+    matchWidth: false
+  });
+
+  update();
+
+  if (typeof value === 'function') {
+    createEffect(() => {
+      current = value();
+      oklch = hexToOklch(current);
+      update();
+    });
+  }
+  _init = false;
+
+  onDestroy(() => {
+    overlay.destroy();
+    satDrag.destroy();
+    hueDrag.destroy();
+    if (alphaDrag) alphaDrag.destroy();
+  });
+
+  if (label || help) {
+    const { wrapper } = createFormField(wrap, { label, error, help, variant, size });
+    return wrapper;
+  }
+
+  return wrap;
+}

package/src/components/combobox.js

@@ -0,0 +1,181 @@
+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 { caret, createListbox, createFormField } from './_behaviors.js';
+import { applyFieldState, createFieldOverlay } from './_primitives.js';
+
+const { div, input: inputTag } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {{ value: string, label: string, disabled?: boolean }[]} [props.options]
+ * @param {string|Function} [props.value]
+ * @param {string} [props.placeholder='Search...']
+ * @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.onfilter]
+ * @param {string} [props['aria-label']]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Combobox(props = {}) {
+  injectBase();
+
+  const {
+    options = [], value, placeholder = 'Search...', disabled, error, success,
+    variant, size, label, help, required, onchange, onfilter,
+    'aria-label': ariaLabel, class: cls
+  } = props;
+
+  let currentValue = typeof value === 'function' ? value() : (value || '');
+  let filtered = [...options];
+
+  const input = inputTag({
+    type: 'text',
+    class: 'd-combobox-input',
+    placeholder,
+    role: 'combobox',
+    autocomplete: 'off',
+    'aria-expanded': 'false',
+    'aria-haspopup': 'listbox',
+    'aria-autocomplete': 'list',
+    'aria-label': ariaLabel
+  });
+
+  const arrow = caret('down', { class: 'd-combobox-arrow' });
+  const inputWrap = div({ class: 'd-combobox-input-wrap' }, input, arrow);
+  const listboxEl = div({ class: 'd-combobox-listbox', role: 'listbox' });
+
+  const wrap = div({ class: cx('d-combobox', cls) }, inputWrap, listboxEl);
+
+  applyFieldState(wrap, { error, success, disabled, variant, size });
+
+  const overlay = createFieldOverlay(inputWrap, listboxEl, {
+    onOpen: () => {
+      filterOptions(input.value);
+      renderList();
+      wrap.classList.add('d-combobox-open');
+      input.setAttribute('aria-expanded', 'true');
+    },
+    onClose: () => {
+      wrap.classList.remove('d-combobox-open');
+      input.setAttribute('aria-expanded', 'false');
+    }
+  });
+
+  const listbox = createListbox(listboxEl, {
+    itemSelector: '.d-combobox-option:not(.d-combobox-option-disabled)',
+    activeClass: 'd-combobox-option-highlight',
+    orientation: 'vertical',
+    onSelect: (el, idx) => {
+      const selectableFiltered = filtered.filter(o => !o.disabled);
+      if (selectableFiltered[idx]) selectOption(selectableFiltered[idx].value);
+    }
+  });
+
+  function updateDisplay() {
+    const opt = options.find(o => o.value === currentValue);
+    input.value = opt ? opt.label : '';
+  }
+
+  function filterOptions(query) {
+    if (onfilter) {
+      filtered = onfilter(query, options);
+    } else {
+      const q = query.toLowerCase();
+      filtered = q ? options.filter(o => o.label.toLowerCase().includes(q)) : [...options];
+    }
+  }
+
+  function renderList() {
+    listboxEl.replaceChildren();
+    if (filtered.length === 0) {
+      listboxEl.appendChild(div({ class: 'd-combobox-empty' }, 'No results'));
+      return;
+    }
+    filtered.forEach((opt) => {
+      const el = div({
+        class: cx('d-combobox-option', opt.value === currentValue && 'd-combobox-option-active', opt.disabled && 'd-combobox-option-disabled'),
+        role: 'option',
+        'aria-selected': opt.value === currentValue ? 'true' : 'false'
+      }, opt.label);
+      if (!opt.disabled) {
+        el.addEventListener('click', (e) => {
+          e.stopPropagation();
+          selectOption(opt.value);
+        });
+      }
+      listboxEl.appendChild(el);
+    });
+    listbox.reset();
+  }
+
+  function selectOption(val) {
+    currentValue = val;
+    updateDisplay();
+    overlay.close();
+    if (onchange) onchange(val);
+  }
+
+  input.addEventListener('focus', () => {
+    if (!overlay.isOpen()) overlay.open();
+  });
+
+  input.addEventListener('input', () => {
+    if (!overlay.isOpen()) overlay.open();
+    filterOptions(input.value);
+    renderList();
+  });
+
+  arrow.addEventListener('click', (e) => {
+    e.stopPropagation();
+    if (overlay.isOpen()) overlay.close();
+    else { input.focus(); overlay.open(); }
+  });
+
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (!overlay.isOpen()) overlay.open();
+      listbox.handleKeydown(e);
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (overlay.isOpen()) listbox.selectCurrent();
+    } else if (e.key === 'Escape') {
+      overlay.close();
+      updateDisplay();
+    }
+  });
+
+  onDestroy(() => {
+    overlay.destroy();
+    listbox.destroy();
+  });
+
+  updateDisplay();
+
+  if (typeof value === 'function') {
+    createEffect(() => { currentValue = value(); updateDisplay(); });
+  }
+
+  if (typeof disabled === 'function') {
+    createEffect(() => { input.disabled = disabled(); });
+  } else if (disabled) {
+    input.disabled = true;
+  }
+
+  if (label || help) {
+    const { wrapper } = createFormField(wrap, { label, error, help, required, success, variant, size });
+    return wrapper;
+  }
+
+  return wrap;
+}

package/src/components/command.js

@@ -0,0 +1,174 @@
+/**
+ * Command — Command palette / spotlight search dialog.
+ * Combines search input + filtered list of actions.
+ * Uses native <dialog> two-layer pattern, createListbox for keyboard navigation, createFocusTrap.
+ *
+ * @module decantr/components/command
+ */
+import { h } from '../core/index.js';
+import { createSignal, createEffect } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+import { createListbox, createFocusTrap } from './_behaviors.js';
+import { icon } from './icon.js';
+
+/**
+ * @param {Object} [props]
+ * @param {Function} props.visible - Signal getter for visibility
+ * @param {{ label: string, value?: string, icon?: string|Node, group?: string, shortcut?: string, disabled?: boolean, onSelect?: Function }[]} [props.items]
+ * @param {Function} [props.onSelect] - Called with selected item
+ * @param {Function} [props.onClose]
+ * @param {string} [props.placeholder='Type a command or search...']
+ * @param {Function} [props.filter] - Custom filter: (item, query) => boolean
+ * @param {string} [props.class]
+ * @returns {HTMLDialogElement}
+ */
+export function Command(props = {}) {
+  injectBase();
+  const { visible, items = [], onSelect, onClose, placeholder = 'Type a command or search...', filter, class: cls } = props;
+
+  const input = h('input', {
+    type: 'text',
+    class: 'd-command-input',
+    placeholder,
+    autocomplete: 'off',
+    spellcheck: 'false'
+  });
+
+  const searchWrap = h('div', { class: 'd-command-search' },
+    h('span', { class: 'd-command-search-icon', 'aria-hidden': 'true' }, icon('search', { size: '1em' })),
+    input
+  );
+
+  const listEl = h('div', { class: 'd-command-list', role: 'listbox' });
+  const emptyEl = h('div', { class: 'd-command-empty', style: { display: 'none' } }, 'No results found.');
+
+  const panel = h('div', { class: cx('d-command-panel', cls) }, searchWrap, listEl, emptyEl);
+
+  const dialog = h('dialog', {
+    class: 'd-command',
+    role: 'dialog',
+    'aria-modal': 'true',
+    'aria-label': 'Command palette'
+  }, panel);
+
+  const trap = createFocusTrap(dialog);
+
+  const listbox = createListbox(listEl, {
+    itemSelector: '.d-command-item:not(.d-command-item-disabled)',
+    activeClass: 'd-command-item-active',
+    orientation: 'vertical',
+    onSelect: (el) => {
+      const idx = parseInt(el.dataset.index, 10);
+      const item = _filteredItems[idx];
+      if (item) {
+        if (item.onSelect) item.onSelect(item);
+        if (onSelect) onSelect(item);
+        close();
+      }
+    }
+  });
+
+  let _filteredItems = [];
+
+  const defaultFilter = (item, query) => {
+    if (!query) return true;
+    const q = query.toLowerCase();
+    return item.label.toLowerCase().includes(q) || (item.value && item.value.toLowerCase().includes(q));
+  };
+
+  function renderItems(query) {
+    const filterFn = filter || defaultFilter;
+    _filteredItems = items.filter(item => filterFn(item, query));
+
+    listEl.replaceChildren();
+    let currentGroup = null;
+
+    _filteredItems.forEach((item, i) => {
+      if (item.group && item.group !== currentGroup) {
+        currentGroup = item.group;
+        listEl.appendChild(h('div', { class: 'd-command-group' }, currentGroup));
+      }
+
+      const children = [];
+      if (item.icon) {
+        children.push(typeof item.icon === 'string'
+          ? h('span', { class: 'd-command-item-icon', 'aria-hidden': 'true' }, item.icon)
+          : item.icon);
+      }
+      children.push(h('span', { class: 'd-command-item-label' }, item.label));
+      if (item.shortcut) {
+        children.push(h('span', { class: 'd-command-item-shortcut' }, item.shortcut));
+      }
+
+      const el = h('div', {
+        class: cx('d-command-item', item.disabled && 'd-command-item-disabled'),
+        role: 'option',
+        tabindex: '-1',
+        'data-index': String(i)
+      }, ...children);
+
+      if (!item.disabled) {
+        el.addEventListener('click', () => {
+          if (item.onSelect) item.onSelect(item);
+          if (onSelect) onSelect(item);
+          close();
+        });
+      }
+
+      listEl.appendChild(el);
+    });
+
+    emptyEl.style.display = _filteredItems.length ? 'none' : '';
+    listbox.reset();
+    if (_filteredItems.length) listbox.highlight(0);
+  }
+
+  input.addEventListener('input', () => renderItems(input.value));
+
+  function close() {
+    if (dialog.open) dialog.close();
+  }
+
+  dialog.addEventListener('close', () => {
+    trap.deactivate();
+    input.value = '';
+    if (onClose) onClose();
+  });
+
+  dialog.addEventListener('cancel', () => {
+    if (onClose) onClose();
+  });
+
+  // Backdrop click closes
+  dialog.addEventListener('click', (e) => {
+    const rect = panel.getBoundingClientRect();
+    if (e.clientX < rect.left || e.clientX > rect.right ||
+        e.clientY < rect.top || e.clientY > rect.bottom) {
+      close();
+    }
+  });
+
+  // Key forwarding: let listbox handle arrows while input has focus
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+      listbox.handleKeydown(e);
+    }
+  });
+
+  if (typeof visible === 'function') {
+    createEffect(() => {
+      if (visible()) {
+        if (!dialog.open) {
+          renderItems('');
+          dialog.showModal();
+          trap.activate();
+          input.focus();
+        }
+      } else {
+        close();
+      }
+    });
+  }
+
+  return dialog;
+}