decantr 0.9.0

package/src/components/toggle.js

@@ -0,0 +1,213 @@
+/**
+ * Toggle — A pressable button with on/off state.
+ * Uses aria-pressed for accessibility. Supports reactive pressed state.
+ *
+ * @module decantr/components/toggle
+ */
+import { onDestroy } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx, reactiveAttr } from './_base.js';
+import { createRovingTabindex } from './_behaviors.js';
+
+const { div, button: buttonTag } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {boolean|Function} [props.pressed=false] - Pressed state (static or signal getter)
+ * @param {string} [props.variant] - default|outline
+ * @param {string} [props.size] - xs|sm|lg
+ * @param {boolean|Function} [props.disabled]
+ * @param {Function} [props.onchange] - Called with new pressed state
+ * @param {string} [props.class]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+export function Toggle(props = {}, ...children) {
+  injectBase();
+
+  const { pressed = false, variant, size, disabled, onchange, class: cls, ...rest } = props;
+
+  const className = cx(
+    'd-toggle',
+    variant && `d-toggle-${variant}`,
+    size && `d-toggle-${size}`,
+    cls
+  );
+
+  let _pressed = typeof pressed === 'function' ? pressed() : pressed;
+
+  const el = buttonTag({
+    type: 'button',
+    class: className,
+    role: 'button',
+    'aria-pressed': String(_pressed),
+    ...rest
+  }, ...children);
+
+  el.addEventListener('click', () => {
+    _pressed = !_pressed;
+    el.setAttribute('aria-pressed', String(_pressed));
+    if (onchange) onchange(_pressed);
+  });
+
+  reactiveAttr(el, disabled, 'disabled');
+
+  if (typeof pressed === 'function') {
+    createEffect(() => {
+      _pressed = pressed();
+      el.setAttribute('aria-pressed', String(_pressed));
+    });
+  }
+
+  return el;
+}
+
+/**
+ * ToggleGroup — A group of toggles, single or multi-select.
+ * Features a sliding indicator for single-select mode.
+ * Uses createRovingTabindex for keyboard navigation.
+ *
+ * @param {Object} [props]
+ * @param {{ value: string, label?: string, icon?: string|Node, disabled?: boolean }[]} [props.items]
+ * @param {string|string[]|Function} [props.value] - Selected value(s)
+ * @param {'single'|'multiple'} [props.type='single']
+ * @param {boolean} [props.multiple] - Alias for type='multiple'
+ * @param {string} [props.variant]
+ * @param {string} [props.size] - sm|lg
+ * @param {boolean} [props.block=false] - Full-width layout
+ * @param {boolean|Function} [props.disabled] - Group-level disabled
+ * @param {Function} [props.onchange] - Called with new value(s)
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function ToggleGroup(props = {}) {
+  injectBase();
+
+  const { items = [], value, type, multiple, variant, size, block, disabled, onchange, class: cls } = props;
+
+  const isMulti = multiple || type === 'multiple';
+  const isSingle = !isMulti;
+
+  let current = typeof value === 'function' ? value() : (value || (isMulti ? [] : ''));
+
+  // Single-select uses radiogroup/radio; multi-select uses group/button+aria-pressed
+  const group = div({
+    class: cx('d-toggle-group', size && `d-toggle-group-${size}`, block && 'd-toggle-group-block', cls),
+    role: isSingle ? 'radiogroup' : 'group'
+  });
+
+  // Sliding indicator for single-select
+  let indicator = null;
+  if (isSingle) {
+    indicator = div({ class: 'd-toggle-indicator' });
+    indicator.style.opacity = '0';
+    group.appendChild(indicator);
+  }
+
+  let _rafId = null;
+  const rAF = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : (fn) => { fn(); return 0; };
+  const cAF = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : () => {};
+
+  function isSelected(val) {
+    return isMulti ? current.includes(val) : current === val;
+  }
+
+  function select(val) {
+    if (isMulti) {
+      current = current.includes(val) ? current.filter(v => v !== val) : [...current, val];
+    } else {
+      current = current === val ? '' : val;
+    }
+    updateAll();
+    if (onchange) onchange(current);
+  }
+
+  const buttons = items.map(item => {
+    const content = item.icon
+      ? (typeof item.icon === 'string' ? item.icon : item.icon)
+      : (item.label || item.value);
+
+    const ariaAttrs = isSingle
+      ? { role: 'radio', 'aria-checked': String(isSelected(item.value)) }
+      : { role: 'button', 'aria-pressed': String(isSelected(item.value)) };
+
+    const btn = buttonTag({
+      type: 'button',
+      class: cx('d-toggle', variant && `d-toggle-${variant}`),
+      'aria-label': item.label || item.value,
+      disabled: item.disabled ? '' : undefined,
+      ...ariaAttrs
+    }, content);
+
+    btn.addEventListener('click', () => {
+      if (!item.disabled) select(item.value);
+    });
+
+    group.appendChild(btn);
+    return { btn, value: item.value };
+  });
+
+  function positionIndicator() {
+    if (!indicator) return;
+    const selected = buttons.find(b => isSelected(b.value));
+    if (selected) {
+      const btn = selected.btn;
+      const pad = typeof getComputedStyle === 'function'
+        ? (parseFloat(getComputedStyle(group).paddingLeft) || 0)
+        : 0;
+      indicator.style.transform = `translateX(${btn.offsetLeft - pad}px)`;
+      indicator.style.width = `${btn.offsetWidth}px`;
+      indicator.style.opacity = '1';
+    } else {
+      indicator.style.opacity = '0';
+    }
+  }
+
+  function updateAll() {
+    const attr = isSingle ? 'aria-checked' : 'aria-pressed';
+    buttons.forEach(({ btn, value: v }) => {
+      btn.setAttribute(attr, String(isSelected(v)));
+    });
+    if (_rafId) cAF(_rafId);
+    _rafId = rAF(positionIndicator);
+  }
+
+  // Roving tabindex — single mode auto-selects on focus; multi mode focus-only
+  const roving = createRovingTabindex(group, {
+    itemSelector: '.d-toggle:not([disabled])',
+    orientation: 'horizontal',
+    onFocus: isSingle ? (el) => el.click() : undefined
+  });
+
+  // Reactive value
+  if (typeof value === 'function') {
+    createEffect(() => {
+      current = value();
+      updateAll();
+    });
+  }
+
+  // Reactive group-level disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => {
+      const v = disabled();
+      group.toggleAttribute('data-disabled', v);
+      buttons.forEach(({ btn }) => { btn.disabled = v; });
+    });
+  } else if (disabled) {
+    group.setAttribute('data-disabled', '');
+    buttons.forEach(({ btn }) => { btn.disabled = true; });
+  }
+
+  // Initial indicator position after mount
+  _rafId = rAF(positionIndicator);
+
+  // Cleanup
+  onDestroy(() => {
+    roving.destroy();
+    if (_rafId) cAF(_rafId);
+  });
+
+  return group;
+}

package/src/components/tooltip.js

@@ -0,0 +1,57 @@
+/**
+ * Tooltip — Informational popup that appears on hover or focus.
+ * Uses createOverlay behavior with hover trigger.
+ *
+ * @module decantr/components/tooltip
+ */
+import { onDestroy } from '../core/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createOverlay } from './_behaviors.js';
+
+const { div } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {string} props.content - Tooltip text
+ * @param {string} [props.position] - top|bottom|left|right (default: top)
+ * @param {number} [props.delay] - Show delay in ms (default: 200)
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+export function Tooltip(props = {}, ...children) {
+  injectBase();
+
+  const { content, position = 'top', delay = 200, class: cls } = props;
+
+  const tooltipId = `d-tooltip-${_tooltipId++}`;
+
+  const tooltipEl = div({
+    class: cx('d-tooltip', `d-tooltip-${position}`, cls),
+    role: 'tooltip',
+    id: tooltipId
+  }, content);
+
+  const wrapper = div({ class: 'd-tooltip-wrap', 'aria-describedby': tooltipId }, ...children, tooltipEl);
+
+  const overlay = createOverlay(wrapper, tooltipEl, {
+    trigger: 'hover',
+    hoverDelay: delay,
+    hoverCloseDelay: 0,
+    closeOnEscape: true,
+    closeOnOutside: false
+  });
+
+  // Keyboard a11y: show on focusin, hide on focusout
+  wrapper.addEventListener('focusin', () => overlay.open());
+  wrapper.addEventListener('focusout', () => overlay.close());
+
+  onDestroy(() => {
+    overlay.destroy();
+  });
+
+  return wrapper;
+}
+
+let _tooltipId = 0;

package/src/components/tour.js

@@ -0,0 +1,159 @@
+/**
+ * Tour — Step-by-step onboarding guide that highlights elements on the page.
+ * Draws a spotlight overlay + popover with step content.
+ *
+ * @module decantr/components/tour
+ */
+import { onDestroy } from '../core/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+
+const { div, span, button: buttonTag } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {{ target: HTMLElement|string, title?: string, description?: string, placement?: 'top'|'bottom'|'left'|'right' }[]} props.steps
+ * @param {Function} [props.onFinish]
+ * @param {Function} [props.onChange] - Called with (currentStep, direction)
+ * @param {Function} [props.onClose]
+ * @param {string} [props.class]
+ * @returns {{ start: Function, next: Function, prev: Function, close: Function, goTo: Function }}
+ */
+export function Tour(props = {}) {
+  injectBase();
+  const { steps = [], onFinish, onChange, onClose, class: cls } = props;
+
+  let current = 0;
+  let overlayEl = null;
+  let popoverEl = null;
+
+  function resolveTarget(target) {
+    if (typeof target === 'string') return document.querySelector(target);
+    return target;
+  }
+
+  function createOverlayEl() {
+    return div({ class: cx('d-tour-overlay', cls) });
+  }
+
+  // Read the offset token at runtime
+  function getOffset() {
+    if (typeof document === 'undefined') return 12;
+    const val = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--d-offset-tour'), 10);
+    return isNaN(val) ? 12 : val;
+  }
+
+  function positionPopover(targetEl, placement = 'bottom') {
+    if (!targetEl || !popoverEl) return;
+    const rect = targetEl.getBoundingClientRect();
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    const offset = getOffset();
+
+    // Spotlight cutout
+    overlayEl.style.setProperty('--tour-x', `${rect.left + scrollX}px`);
+    overlayEl.style.setProperty('--tour-y', `${rect.top + scrollY}px`);
+    overlayEl.style.setProperty('--tour-w', `${rect.width}px`);
+    overlayEl.style.setProperty('--tour-h', `${rect.height}px`);
+
+    // Position popover — all runtime values from DOM measurement
+    let top, left;
+    if (placement === 'bottom') { top = rect.bottom + scrollY + offset; left = rect.left + scrollX; }
+    else if (placement === 'top') { top = rect.top + scrollY - offset; left = rect.left + scrollX; popoverEl.style.transform = 'translateY(-100%)'; }
+    else if (placement === 'left') { top = rect.top + scrollY; left = rect.left + scrollX - offset; popoverEl.style.transform = 'translateX(-100%)'; }
+    else { top = rect.top + scrollY; left = rect.right + scrollX + offset; }
+
+    popoverEl.style.position = 'absolute';
+    popoverEl.style.top = `${top}px`;
+    popoverEl.style.left = `${left}px`;
+  }
+
+  function renderStep() {
+    const step = steps[current];
+    if (!step) return;
+    const targetEl = resolveTarget(step.target);
+
+    if (popoverEl) popoverEl.remove();
+
+    const prevBtn = buttonTag({ type: 'button', class: 'd-btn d-btn-sm d-btn-outline', disabled: current === 0 }, 'Prev');
+    const nextBtn = buttonTag({ type: 'button', class: 'd-btn d-btn-sm d-btn-primary' },
+      current === steps.length - 1 ? 'Finish' : 'Next');
+    const closeBtn = buttonTag({ type: 'button', class: 'd-tour-close', 'aria-label': 'Close tour' }, '\u00d7');
+
+    const body = div({ class: 'd-tour-body' });
+    if (step.title) body.appendChild(div({ class: 'd-tour-title' }, step.title));
+    if (step.description) body.appendChild(div({ class: 'd-tour-desc' }, step.description));
+
+    const footer = div({ class: 'd-tour-footer' },
+      span({ class: 'd-tour-steps' }, `${current + 1} / ${steps.length}`),
+      div({ class: 'd-tour-actions' }, prevBtn, nextBtn)
+    );
+
+    popoverEl = div({ class: cx('d-tour-popover', cls) }, closeBtn, body, footer);
+    document.body.appendChild(popoverEl);
+
+    prevBtn.addEventListener('click', prev);
+    nextBtn.addEventListener('click', () => {
+      if (current === steps.length - 1) { close(); if (onFinish) onFinish(); }
+      else next();
+    });
+    closeBtn.addEventListener('click', close);
+
+    if (targetEl) {
+      targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      requestAnimationFrame(() => positionPopover(targetEl, step.placement));
+    }
+  }
+
+  function start(stepIndex = 0) {
+    if (typeof document === 'undefined') return;
+    current = stepIndex;
+    overlayEl = createOverlayEl();
+    document.body.appendChild(overlayEl);
+    renderStep();
+
+    // Close on Escape
+    document.addEventListener('keydown', _onKey);
+  }
+
+  function _onKey(e) {
+    if (e.key === 'Escape') close();
+  }
+
+  function next() {
+    if (current < steps.length - 1) {
+      current++;
+      if (onChange) onChange(current, 'next');
+      renderStep();
+    }
+  }
+
+  function prev() {
+    if (current > 0) {
+      current--;
+      if (onChange) onChange(current, 'prev');
+      renderStep();
+    }
+  }
+
+  function goTo(index) {
+    if (index >= 0 && index < steps.length) {
+      current = index;
+      if (onChange) onChange(current, 'goto');
+      renderStep();
+    }
+  }
+
+  function close() {
+    if (overlayEl) { overlayEl.remove(); overlayEl = null; }
+    if (popoverEl) { popoverEl.remove(); popoverEl = null; }
+    document.removeEventListener('keydown', _onKey);
+    if (onClose) onClose();
+  }
+
+  onDestroy(() => {
+    close();
+  });
+
+  return { start, next, prev, close, goTo };
+}

package/src/components/transfer.js

@@ -0,0 +1,163 @@
+/**
+ * Transfer — Dual-list transfer component with search and selection.
+ *
+ * @module decantr/components/transfer
+ */
+import { h } from '../core/index.js';
+import { createEffect, createSignal } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+import { caret, createCheckControl } from './_behaviors.js';
+
+/**
+ * @param {Object} [props]
+ * @param {{ key: string, label: string, disabled?: boolean }[]} [props.dataSource=[]]
+ * @param {string[]} [props.targetKeys=[]] - Keys in right panel
+ * @param {boolean} [props.searchable=false]
+ * @param {string[]} [props.titles=['Source', 'Target']]
+ * @param {Function} [props.onchange] - Called with (targetKeys, direction, movedKeys)
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Transfer(props = {}) {
+  injectBase();
+  const { dataSource = [], targetKeys: initTarget = [], searchable = false, titles = ['Source', 'Target'], onchange, class: cls } = props;
+
+  let targetKeys = [...initTarget];
+  let leftChecked = new Set();
+  let rightChecked = new Set();
+
+  const container = h('div', { class: cx('d-transfer', cls) });
+
+  function getLeftItems() {
+    return dataSource.filter(d => !targetKeys.includes(d.key));
+  }
+
+  function getRightItems() {
+    return dataSource.filter(d => targetKeys.includes(d.key));
+  }
+
+  function renderPanel(items, checked, searchFilter, title) {
+    const panel = h('div', { class: 'd-transfer-panel' });
+
+    // Header
+    const allChecked = items.length > 0 && items.filter(i => !i.disabled).every(i => checked.has(i.key));
+    const { wrap: selectAllWrap, input: selectAll } = createCheckControl();
+    selectAll.checked = allChecked;
+    selectAll.indeterminate = checked.size > 0 && !allChecked;
+    selectAll.addEventListener('change', () => {
+      if (selectAll.checked) items.filter(i => !i.disabled).forEach(i => checked.add(i.key));
+      else checked.clear();
+      render();
+    });
+
+    const header = h('div', { class: 'd-transfer-header' },
+      h('label', null,
+        selectAllWrap,
+        h('span', null, `${checked.size}/${items.length}`)
+      ),
+      h('span', null, title)
+    );
+    panel.appendChild(header);
+
+    // Search
+    let filteredItems = items;
+    if (searchable) {
+      const search = h('input', {
+        type: 'text',
+        class: 'd-input',
+        placeholder: 'Search...',
+              });
+      search.addEventListener('input', () => {
+        searchFilter.value = search.value.toLowerCase();
+        render();
+      });
+      panel.appendChild(h('div', { class: 'd-transfer-search' }, search));
+      if (searchFilter.value) {
+        filteredItems = items.filter(i => i.label.toLowerCase().includes(searchFilter.value));
+      }
+    }
+
+    // Body
+    const body = h('div', { class: 'd-transfer-body' });
+    filteredItems.forEach(item => {
+      const { wrap: cbWrap, input: cb } = createCheckControl({ disabled: item.disabled ? '' : undefined });
+      cb.checked = checked.has(item.key);
+      cb.addEventListener('change', () => {
+        if (cb.checked) checked.add(item.key);
+        else checked.delete(item.key);
+        render();
+      });
+
+      const row = h('div', {
+        class: cx('d-transfer-item', item.disabled && 'd-transfer-item-disabled')
+      }, cbWrap, h('span', null, item.label));
+
+      if (!item.disabled) {
+        row.addEventListener('click', (e) => {
+          if (e.target === cb) return;
+          cb.checked = !cb.checked;
+          if (cb.checked) checked.add(item.key);
+          else checked.delete(item.key);
+          render();
+        });
+      }
+
+      body.appendChild(row);
+    });
+    panel.appendChild(body);
+
+    return panel;
+  }
+
+  const leftSearch = { value: '' };
+  const rightSearch = { value: '' };
+
+  function render() {
+    container.replaceChildren();
+
+    const leftItems = getLeftItems();
+    const rightItems = getRightItems();
+
+    const leftPanel = renderPanel(leftItems, leftChecked, leftSearch, titles[0]);
+    const rightPanel = renderPanel(rightItems, rightChecked, rightSearch, titles[1]);
+
+    // Action buttons
+    const moveRight = h('button', {
+      type: 'button',
+      class: 'd-btn d-btn-sm',
+      disabled: leftChecked.size === 0 ? '' : undefined,
+      'aria-label': 'Move to target'
+    }, caret('right'));
+    const moveLeft = h('button', {
+      type: 'button',
+      class: 'd-btn d-btn-sm',
+      disabled: rightChecked.size === 0 ? '' : undefined,
+      'aria-label': 'Move to source'
+    }, caret('left'));
+
+    moveRight.addEventListener('click', () => {
+      const moved = [...leftChecked];
+      targetKeys = [...targetKeys, ...moved];
+      leftChecked.clear();
+      render();
+      if (onchange) onchange(targetKeys, 'right', moved);
+    });
+
+    moveLeft.addEventListener('click', () => {
+      const moved = [...rightChecked];
+      targetKeys = targetKeys.filter(k => !rightChecked.has(k));
+      rightChecked.clear();
+      render();
+      if (onchange) onchange(targetKeys, 'left', moved);
+    });
+
+    const actions = h('div', { class: 'd-transfer-actions' }, moveRight, moveLeft);
+
+    container.appendChild(leftPanel);
+    container.appendChild(actions);
+    container.appendChild(rightPanel);
+  }
+
+  render();
+  return container;
+}