decantr 0.9.0

package/src/components/skeleton.js

@@ -0,0 +1,39 @@
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.variant] - text|rect|circle (default: text)
+ * @param {string} [props.width]
+ * @param {string} [props.height]
+ * @param {number} [props.lines] - Number of text lines
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Skeleton(props = {}) {
+  injectBase();
+
+  const { variant = 'text', width, height, lines, class: cls } = props;
+
+  if (lines && lines > 1) {
+    const container = h('div', { class: cx('d-skeleton-group', cls) });
+    for (let i = 0; i < lines; i++) {
+      const line = h('div', { class: 'd-skeleton d-skeleton-text' });
+      if (i === lines - 1) line.style.width = '60%';
+      container.appendChild(line);
+    }
+    return container;
+  }
+
+  const skeletonClass = cx(
+    'd-skeleton',
+    variant === 'circle' ? 'd-skeleton-circle' : variant === 'rect' ? 'd-skeleton-rect' : 'd-skeleton-text',
+    cls
+  );
+
+  const el = h('div', { class: skeletonClass, 'aria-hidden': 'true' });
+  if (width) el.style.width = width;
+  if (height) el.style.height = height;
+
+  return el;
+}

package/src/components/slider.js

@@ -0,0 +1,141 @@
+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 { createDrag } from './_behaviors.js';
+
+const { div, span } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {number|Function} [props.value=0]
+ * @param {number} [props.min=0]
+ * @param {number} [props.max=100]
+ * @param {number} [props.step=1]
+ * @param {boolean|Function} [props.disabled]
+ * @param {Function} [props.onchange]
+ * @param {Function} [props.oninput]
+ * @param {boolean} [props.showValue=false]
+ * @param {string} [props['aria-label']]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Slider(props = {}) {
+  injectBase();
+
+  const {
+    value = 0, min = 0, max = 100, step = 1,
+    disabled, onchange, oninput, showValue = false,
+    'aria-label': ariaLabel, class: cls
+  } = props;
+
+  let currentValue = typeof value === 'function' ? value() : value;
+
+  const track = div({ class: 'd-slider-track' });
+  const fill = div({ class: 'd-slider-fill' });
+  const thumb = div({
+    class: 'd-slider-thumb',
+    role: 'slider',
+    tabindex: '0',
+    'aria-valuemin': String(min),
+    'aria-valuemax': String(max),
+    'aria-valuenow': String(currentValue),
+    'aria-label': ariaLabel || 'Slider'
+  });
+
+  track.appendChild(fill);
+  track.appendChild(thumb);
+
+  const valueLabel = showValue ? span({ class: 'd-slider-value' }, String(currentValue)) : null;
+  const wrap = div({ class: cx('d-slider', cls) }, track);
+  if (valueLabel) wrap.appendChild(valueLabel);
+
+  function clamp(val) {
+    const stepped = Math.round((val - min) / step) * step + min;
+    return Math.max(min, Math.min(max, stepped));
+  }
+
+  function getPercent(val) {
+    return ((val - min) / (max - min)) * 100;
+  }
+
+  function updateUI() {
+    const pct = getPercent(currentValue);
+    fill.style.width = `${pct}%`;
+    thumb.style.left = `${pct}%`;
+    thumb.setAttribute('aria-valuenow', String(currentValue));
+    if (valueLabel) valueLabel.textContent = String(currentValue);
+  }
+
+  function setValue(val) {
+    const clamped = clamp(val);
+    if (clamped === currentValue) return;
+    currentValue = clamped;
+    updateUI();
+    if (oninput) oninput(currentValue);
+  }
+
+  function commitValue() {
+    if (onchange) onchange(currentValue);
+  }
+
+  // Use createDrag from _behaviors.js
+  const trackDrag = createDrag(track, {
+    onStart() {
+      if (typeof disabled === 'function' ? disabled() : disabled) return;
+      wrap.classList.add('d-slider-active');
+    },
+    onMove(x) {
+      if (typeof disabled === 'function' ? disabled() : disabled) return;
+      const rect = track.getBoundingClientRect();
+      const pct = Math.max(0, Math.min(1, (x - rect.left) / rect.width));
+      setValue(min + pct * (max - min));
+    },
+    onEnd() {
+      wrap.classList.remove('d-slider-active');
+      commitValue();
+    }
+  });
+
+  // Click on track to jump
+  track.addEventListener('click', (e) => {
+    if (typeof disabled === 'function' ? disabled() : disabled) return;
+    const rect = track.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    setValue(min + pct * (max - min));
+    commitValue();
+  });
+
+  // Keyboard
+  thumb.addEventListener('keydown', (e) => {
+    if (typeof disabled === 'function' ? disabled() : disabled) return;
+    let newVal = currentValue;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { e.preventDefault(); newVal = currentValue + step; }
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { e.preventDefault(); newVal = currentValue - step; }
+    else if (e.key === 'Home') { e.preventDefault(); newVal = min; }
+    else if (e.key === 'End') { e.preventDefault(); newVal = max; }
+    else return;
+    setValue(newVal);
+    commitValue();
+  });
+
+  updateUI();
+
+  onDestroy(() => {
+    trackDrag.destroy();
+  });
+
+  // Reactive value
+  if (typeof value === 'function') {
+    createEffect(() => { currentValue = value(); updateUI(); });
+  }
+
+  // Reactive disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => { wrap.classList.toggle('d-slider-disabled', disabled()); });
+  } else if (disabled) {
+    wrap.classList.add('d-slider-disabled');
+  }
+
+  return wrap;
+}

package/src/components/sortable-list.js

@@ -0,0 +1,176 @@
+/**
+ * SortableList — Drag-to-reorder list with keyboard support and drop indicators.
+ * Builds on createDrag behavior from _behaviors.js.
+ *
+ * @module decantr/components/sortable-list
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+import { createDrag } from './_behaviors.js';
+import { icon } from './icon.js';
+
+/**
+ * @param {Object} props
+ * @param {Array} props.items - Array of items to render
+ * @param {Function} [props.keyFn] - (item, index) => unique key string
+ * @param {Function} props.renderFn - (item, index, handle) => HTMLElement. `handle` is the drag handle element.
+ * @param {Function} [props.onReorder] - Called with new items array after reorder
+ * @param {'vertical'|'horizontal'} [props.direction='vertical']
+ * @param {boolean} [props.disabled=false]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function SortableList(props = {}) {
+  injectBase();
+
+  const {
+    items: initialItems,
+    keyFn = (_, i) => String(i),
+    renderFn,
+    onReorder,
+    direction = 'vertical',
+    disabled = false,
+    class: cls,
+  } = props;
+
+  let items = [...initialItems];
+  const isVertical = direction === 'vertical';
+
+  const container = h('div', {
+    class: cx('d-sortable', isVertical ? 'd-sortable-v' : 'd-sortable-h', cls),
+    role: 'list',
+    'aria-label': 'Reorderable list',
+  });
+
+  // Live region for screen reader announcements
+  const liveRegion = h('div', { class: 'd-sr-only', 'aria-live': 'assertive', 'aria-atomic': 'true' });
+  container.appendChild(liveRegion);
+
+  function announce(msg) { liveRegion.textContent = msg; }
+
+  // Indicator for drop position
+  const indicator = h('div', { class: 'd-sortable-indicator' });
+
+  let dragIdx = -1;
+  let dropIdx = -1;
+
+  function render() {
+    // Remove all children except live region
+    while (container.children.length > 1) container.removeChild(container.lastChild);
+
+    items.forEach((item, i) => {
+      const handle = h('div', {
+        class: 'd-sortable-handle',
+        'aria-hidden': 'true',
+      }, icon('grip-vertical', { size: '1em' }));
+
+      const row = renderFn(item, i, handle);
+      row.setAttribute('role', 'listitem');
+      row.classList.add('d-sortable-item');
+      row.setAttribute('data-sortable-index', String(i));
+      row.setAttribute('tabindex', i === 0 ? '0' : '-1');
+      row.setAttribute('aria-roledescription', 'sortable item');
+
+      if (!disabled) {
+        // Drag behavior on handle
+        createDrag(handle, {
+          onStart: () => {
+            dragIdx = i;
+            row.classList.add('d-sortable-dragging');
+            container.classList.add('d-sortable-active');
+          },
+          onMove: (x, y) => {
+            // Determine drop index by position
+            const children = getItemElements();
+            let newDropIdx = items.length;
+            for (let j = 0; j < children.length; j++) {
+              const rect = children[j].getBoundingClientRect();
+              const mid = isVertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+              const pos = isVertical ? y : x;
+              if (pos < mid) { newDropIdx = j; break; }
+            }
+            if (newDropIdx !== dropIdx) {
+              dropIdx = newDropIdx;
+              positionIndicator(dropIdx);
+            }
+          },
+          onEnd: () => {
+            row.classList.remove('d-sortable-dragging');
+            container.classList.remove('d-sortable-active');
+            indicator.remove();
+            if (dragIdx >= 0 && dropIdx >= 0 && dragIdx !== dropIdx && dragIdx !== dropIdx - 1) {
+              const moved = items.splice(dragIdx, 1)[0];
+              const insertAt = dropIdx > dragIdx ? dropIdx - 1 : dropIdx;
+              items.splice(insertAt, 0, moved);
+              render();
+              if (onReorder) onReorder([...items]);
+            }
+            dragIdx = -1;
+            dropIdx = -1;
+          }
+        });
+
+        // Keyboard reorder: Alt+Arrow to move
+        row.addEventListener('keydown', (e) => {
+          if (!e.altKey) {
+            // Arrow navigation without Alt
+            if (e.key === (isVertical ? 'ArrowDown' : 'ArrowRight')) {
+              e.preventDefault();
+              focusItem(i + 1);
+            } else if (e.key === (isVertical ? 'ArrowUp' : 'ArrowLeft')) {
+              e.preventDefault();
+              focusItem(i - 1);
+            }
+            return;
+          }
+
+          const moveUp = e.key === (isVertical ? 'ArrowUp' : 'ArrowLeft');
+          const moveDown = e.key === (isVertical ? 'ArrowDown' : 'ArrowRight');
+
+          if (moveUp && i > 0) {
+            e.preventDefault();
+            [items[i], items[i - 1]] = [items[i - 1], items[i]];
+            render();
+            focusItem(i - 1);
+            announce(`Moved to position ${i}`);
+            if (onReorder) onReorder([...items]);
+          } else if (moveDown && i < items.length - 1) {
+            e.preventDefault();
+            [items[i], items[i + 1]] = [items[i + 1], items[i]];
+            render();
+            focusItem(i + 1);
+            announce(`Moved to position ${i + 2}`);
+            if (onReorder) onReorder([...items]);
+          }
+        });
+      }
+
+      container.appendChild(row);
+    });
+  }
+
+  function getItemElements() {
+    return [...container.querySelectorAll('.d-sortable-item')];
+  }
+
+  function focusItem(idx) {
+    const els = getItemElements();
+    if (idx >= 0 && idx < els.length) {
+      els.forEach(el => el.setAttribute('tabindex', '-1'));
+      els[idx].setAttribute('tabindex', '0');
+      els[idx].focus();
+    }
+  }
+
+  function positionIndicator(idx) {
+    const children = getItemElements();
+    indicator.remove();
+    if (idx <= children.length) {
+      const ref = children[idx] || null;
+      container.insertBefore(indicator, ref);
+    }
+  }
+
+  render();
+  return container;
+}

package/src/components/space.js

@@ -0,0 +1,42 @@
+/**
+ * Space — Flex layout utility for consistent spacing between children.
+ * Replaces manual _flex _gap* patterns with a semantic component.
+ *
+ * @module decantr/components/space
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {'horizontal'|'vertical'} [props.direction='horizontal']
+ * @param {'start'|'center'|'end'|'between'|'around'|'evenly'} [props.align]
+ * @param {number|string} [props.gap] - Gap size (number = sp-N token, string = custom CSS)
+ * @param {boolean} [props.wrap=false]
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+export function Space(props = {}, ...children) {
+  injectBase();
+  const { direction = 'horizontal', align, gap, wrap, class: cls, ...rest } = props;
+
+  const className = cx(
+    'd-space',
+    direction === 'vertical' && 'd-space-vertical',
+    wrap && 'd-space-wrap',
+    cls
+  );
+
+  const style = {};
+  if (gap !== undefined) {
+    style.gap = typeof gap === 'number' ? `var(--d-sp-${gap})` : gap;
+  }
+  if (align) {
+    const map = { start: 'flex-start', end: 'flex-end', center: 'center', between: 'space-between', around: 'space-around', evenly: 'space-evenly' };
+    if (direction === 'vertical') style.alignItems = map[align] || align;
+    else style.justifyContent = map[align] || align;
+  }
+
+  return h('div', { class: className, style: Object.keys(style).length ? style : undefined, ...rest }, ...children);
+}

package/src/components/spinner.js

@@ -0,0 +1,112 @@
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { icon } from './icon.js';
+
+const SIZE_CLS = { xs: 'd-spinner-xs', sm: 'd-spinner-sm', lg: 'd-spinner-lg', xl: 'd-spinner-xl' };
+const COLOR_CLS = { primary: 'd-spinner-primary', success: 'd-spinner-success', warning: 'd-spinner-warning', destructive: 'd-spinner-destructive', info: 'd-spinner-info', muted: 'd-spinner-muted' };
+const NS = 'http://www.w3.org/2000/svg';
+
+const { span } = tags;
+
+function createRingSVG() {
+  const svg = document.createElementNS(NS, 'svg');
+  svg.setAttribute('width', '100%');
+  svg.setAttribute('height', '100%');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('fill', 'none');
+
+  const track = document.createElementNS(NS, 'circle');
+  track.setAttribute('cx', '12');
+  track.setAttribute('cy', '12');
+  track.setAttribute('r', '10');
+  track.setAttribute('stroke', 'currentColor');
+  track.setAttribute('stroke-opacity', '0.2');
+  track.setAttribute('stroke-width', '3');
+  svg.appendChild(track);
+
+  const arc = document.createElementNS(NS, 'circle');
+  arc.setAttribute('cx', '12');
+  arc.setAttribute('cy', '12');
+  arc.setAttribute('r', '10');
+  arc.setAttribute('stroke', 'currentColor');
+  arc.setAttribute('stroke-width', '3');
+  arc.setAttribute('stroke-linecap', 'round');
+  arc.setAttribute('stroke-dasharray', '15.7 47.1');
+  arc.setAttribute('class', 'd-spinner-arc');
+  svg.appendChild(arc);
+
+  return svg;
+}
+
+function createDots() {
+  const el = span({ class: 'd-spinner-dots' });
+  for (let i = 0; i < 3; i++) el.appendChild(span());
+  return el;
+}
+
+function createPulse() {
+  const el = span({ class: 'd-spinner-pulse' });
+  el.appendChild(span());
+  return el;
+}
+
+function createBars() {
+  const el = span({ class: 'd-spinner-bars' });
+  for (let i = 0; i < 4; i++) el.appendChild(span());
+  return el;
+}
+
+function createOrbit() {
+  const el = span({ class: 'd-spinner-orbit' });
+  for (let i = 0; i < 2; i++) el.appendChild(span());
+  return el;
+}
+
+/**
+ * Spinner component with multiple animation variants.
+ *
+ * @param {Object} [props]
+ * @param {'ring'|'dots'|'pulse'|'bars'|'orbit'} [props.variant='ring'] - Animation style
+ * @param {string} [props.size] - xs|sm|lg|xl
+ * @param {'primary'|'success'|'warning'|'destructive'|'info'|'muted'} [props.color] - Semantic color
+ * @param {string} [props.icon] - Icon name for hybrid mode (ring spins around static center icon)
+ * @param {string} [props.label] - Accessible label (default: 'Loading')
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Spinner(props = {}) {
+  injectBase();
+
+  const { variant = 'ring', size, color, icon: iconName, label = 'Loading', class: cls, ...rest } = props;
+
+  let inner;
+  if (iconName) {
+    inner = span({ class: cx('d-spinner-hybrid', SIZE_CLS[size]) });
+    inner.appendChild(createRingSVG());
+    const centerIcon = icon(iconName, { size: '45%' });
+    inner.appendChild(centerIcon);
+  } else {
+    switch (variant) {
+      case 'dots': inner = createDots(); break;
+      case 'pulse': inner = createPulse(); break;
+      case 'bars': inner = createBars(); break;
+      case 'orbit': inner = createOrbit(); break;
+      default: inner = createRingSVG(); break;
+    }
+  }
+
+  const srText = span({ class: 'd-sr-only' }, label);
+
+  const wrap = span({
+    class: cx('d-spinner-wrap', SIZE_CLS[size], COLOR_CLS[color], cls),
+    role: 'status',
+    'aria-label': label
+  });
+  for (const [k, v] of Object.entries(rest)) {
+    wrap.setAttribute(k, v);
+  }
+  wrap.appendChild(inner);
+  wrap.appendChild(srText);
+
+  return wrap;
+}

package/src/components/splitter.js

@@ -0,0 +1,147 @@
+/**
+ * Splitter — Resizable panel layout with draggable handles.
+ * Uses createDrag behavior for pointer interaction.
+ *
+ * @module decantr/components/splitter
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+import { createDrag } from './_behaviors.js';
+
+/**
+ * @typedef {Object} SplitterPanel
+ * @property {string} [size] - Initial CSS size (e.g. '50%', '300px')
+ * @property {string} [min] - Min size in px (e.g. '100')
+ * @property {string} [max] - Max size in px (e.g. '500')
+ * @property {Node} content - Panel content
+ */
+
+/**
+ * @param {Object} [props]
+ * @param {'horizontal'|'vertical'} [props.direction='horizontal']
+ * @param {SplitterPanel[]} [props.panels]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Splitter(props = {}) {
+  injectBase();
+  const { direction = 'horizontal', panels = [], class: cls } = props;
+
+  const isVert = direction === 'vertical';
+  const container = h('div', {
+    class: cx('d-splitter', isVert && 'd-splitter-vertical', cls),
+    role: 'group',
+    'aria-label': 'Resizable panels'
+  });
+
+  const panelEls = [];
+  const handleEls = [];
+
+  panels.forEach((panelDef, i) => {
+    const panelEl = h('div', { class: 'd-splitter-panel' });
+
+    // Initial size
+    if (panelDef.size) {
+      if (isVert) panelEl.style.height = panelDef.size;
+      else panelEl.style.width = panelDef.size;
+    } else {
+      panelEl.style.flex = '1';
+    }
+
+    // Set min/max
+    if (panelDef.min) {
+      if (isVert) panelEl.style.minHeight = panelDef.min + 'px';
+      else panelEl.style.minWidth = panelDef.min + 'px';
+    }
+    if (panelDef.max) {
+      if (isVert) panelEl.style.maxHeight = panelDef.max + 'px';
+      else panelEl.style.maxWidth = panelDef.max + 'px';
+    }
+
+    // Content
+    if (panelDef.content) {
+      if (panelDef.content.nodeType) panelEl.appendChild(panelDef.content);
+      else panelEl.textContent = String(panelDef.content);
+    }
+
+    panelEls.push(panelEl);
+    container.appendChild(panelEl);
+
+    // Handle between panels (not after last)
+    if (i < panels.length - 1) {
+      const handleCls = isVert ? 'd-splitter-handle-v' : 'd-splitter-handle-h';
+      const handle = h('div', {
+        class: cx('d-splitter-handle', handleCls),
+        role: 'separator',
+        'aria-orientation': isVert ? 'horizontal' : 'vertical',
+        'aria-valuenow': '50',
+        tabindex: '0',
+        'aria-label': `Resize handle ${i + 1}`
+      }, h('div', { class: 'd-splitter-handle-dot' }));
+
+      handleEls.push(handle);
+      container.appendChild(handle);
+
+      // Drag behavior
+      const leftPanel = panelEls[i];
+      let startSize = 0;
+
+      createDrag(handle, {
+        onStart: () => {
+          startSize = isVert ? leftPanel.offsetHeight : leftPanel.offsetWidth;
+          // Remove flex during drag so px sizing works
+          leftPanel.style.flex = 'none';
+        },
+        onMove: (x, y, dx, dy) => {
+          const delta = isVert ? dy : dx;
+          let newSize = startSize + delta;
+
+          // Respect min/max
+          const minSize = parseInt(panels[i].min) || 0;
+          const maxSize = parseInt(panels[i].max) || Infinity;
+          newSize = Math.max(minSize, Math.min(maxSize, newSize));
+
+          if (isVert) leftPanel.style.height = newSize + 'px';
+          else leftPanel.style.width = newSize + 'px';
+        }
+      });
+
+      // Keyboard: arrow keys to resize
+      handle.addEventListener('keydown', (e) => {
+        const stepPx = e.shiftKey ? 20 : 4;
+        let delta = 0;
+        if (!isVert && e.key === 'ArrowLeft') delta = -stepPx;
+        else if (!isVert && e.key === 'ArrowRight') delta = stepPx;
+        else if (isVert && e.key === 'ArrowUp') delta = -stepPx;
+        else if (isVert && e.key === 'ArrowDown') delta = stepPx;
+        else if (e.key === 'Home') {
+          e.preventDefault();
+          const minSize = parseInt(panels[i].min) || 0;
+          leftPanel.style.flex = 'none';
+          if (isVert) leftPanel.style.height = minSize + 'px';
+          else leftPanel.style.width = minSize + 'px';
+          return;
+        } else if (e.key === 'End') {
+          e.preventDefault();
+          const maxSize = parseInt(panels[i].max) || (isVert ? container.offsetHeight : container.offsetWidth);
+          leftPanel.style.flex = 'none';
+          if (isVert) leftPanel.style.height = maxSize + 'px';
+          else leftPanel.style.width = maxSize + 'px';
+          return;
+        } else return;
+
+        e.preventDefault();
+        leftPanel.style.flex = 'none';
+        const curSize = isVert ? leftPanel.offsetHeight : leftPanel.offsetWidth;
+        let newSize = curSize + delta;
+        const minSize = parseInt(panels[i].min) || 0;
+        const maxSize = parseInt(panels[i].max) || Infinity;
+        newSize = Math.max(minSize, Math.min(maxSize, newSize));
+        if (isVert) leftPanel.style.height = newSize + 'px';
+        else leftPanel.style.width = newSize + 'px';
+      });
+    }
+  });
+
+  return container;
+}