@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/dropdown-menu.js

@@ -0,0 +1,388 @@
+/* @auvyx/ui v0.1.0 | MIT | based on Basecoat (MIT) */
+// Basecoat core, once per page.
+if (!window.basecoat) (() => {
+  const componentRegistry = {};
+  let observer = null;
+
+  const registerComponent = (name, selectorOrOptions, initFunction) => {
+    const options = typeof selectorOrOptions === 'object'
+      ? selectorOrOptions
+      : { selector: selectorOrOptions, init: initFunction };
+
+    componentRegistry[name] = {
+      selector: options.selector,
+      init: options.init,
+      refresh: options.refresh,
+    };
+  };
+
+  const initComponent = (element, componentName) => {
+    const component = componentRegistry[componentName];
+    if (!component) return;
+
+    try {
+      component.init(element);
+      if (element.hasAttribute(`data-${componentName}-initialized`)) {
+        element.dataset.basecoatComponent = componentName;
+      }
+    } catch (error) {
+      console.error(`Failed to initialize ${componentName}:`, error);
+      if (typeof element._destroy === 'function') {
+        try {
+          element._destroy();
+        } catch (destroyError) {
+          console.error(`Failed to clean up ${componentName} after initialization error:`, destroyError);
+        }
+      }
+      delete element._destroy;
+      element.removeAttribute(`data-${componentName}-initialized`);
+      delete element.dataset.basecoatComponent;
+    }
+  };
+
+  const destroyComponent = (element) => {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) return;
+    const componentName = element.dataset?.basecoatComponent;
+
+    if (typeof element._destroy === 'function') {
+      try {
+        element._destroy();
+      } catch (error) {
+        console.error('Failed to destroy Basecoat component:', error);
+      }
+    }
+
+    delete element._destroy;
+    if (componentName) element.removeAttribute(`data-${componentName}-initialized`);
+    delete element.dataset.basecoatComponent;
+  };
+
+  const destroyRemovedComponents = (node) => {
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+    if (node.isConnected) return;
+
+    if (node.dataset?.basecoatComponent) destroyComponent(node);
+    node.querySelectorAll('[data-basecoat-component]').forEach(destroyComponent);
+  };
+
+  const uniqueElements = (elements) => Array.from(new Set(elements));
+
+  const getComponentElements = (componentName, selector, force = false) => {
+    const elements = Array.from(document.querySelectorAll(selector));
+    if (force) {
+      elements.push(...document.querySelectorAll(`[data-basecoat-component="${componentName}"]`));
+    }
+    return uniqueElements(elements);
+  };
+
+  const initAllComponents = (options = {}) => {
+    const force = options.force === true;
+    Object.entries(componentRegistry).forEach(([name, { selector }]) => {
+      getComponentElements(name, selector, force).forEach((element) => {
+        const wasComponent = element.dataset?.basecoatComponent === name;
+        if (force) destroyComponent(element);
+        if (wasComponent || element.matches(selector)) initComponent(element, name);
+      });
+    });
+  };
+
+  const initNewComponents = (node) => {
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+
+    Object.entries(componentRegistry).forEach(([name, { selector }]) => {
+      if (node.matches(selector)) initComponent(node, name);
+      node.querySelectorAll(selector).forEach(element => initComponent(element, name));
+    });
+  };
+
+  const refreshComponent = (element) => {
+    if (!element) return;
+    if (typeof element.refresh === 'function') {
+      element.refresh();
+      return;
+    }
+
+    const componentName = element.dataset?.basecoatComponent;
+    const component = componentName ? componentRegistry[componentName] : null;
+    if (component?.refresh) {
+      component.refresh(element);
+    }
+  };
+
+  const startObserver = () => {
+    if (observer) return;
+
+    observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach(initNewComponents);
+        mutation.removedNodes.forEach(destroyRemovedComponents);
+      });
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+  };
+
+  const stopObserver = () => {
+    if (!observer) return;
+    observer.disconnect();
+    observer = null;
+  };
+
+  const initRegisteredComponent = (componentName, options = {}) => {
+    const component = componentRegistry[componentName];
+    if (!component) {
+      console.warn(`Component '${componentName}' not found in registry`);
+      return;
+    }
+
+    const force = options.force === true;
+    getComponentElements(componentName, component.selector, force).forEach((element) => {
+      const wasComponent = element.dataset?.basecoatComponent === componentName;
+      if (force) destroyComponent(element);
+      if (wasComponent || element.matches(component.selector)) initComponent(element, componentName);
+    });
+  };
+
+  const initAllRegisteredComponents = (options = {}) => {
+    initAllComponents(options);
+  };
+
+  const setTheme = (mode) => {
+    const dark = mode === 'dark';
+    document.documentElement.classList.toggle('dark', dark);
+    try { localStorage.setItem('themeMode', dark ? 'dark' : 'light'); } catch (_) {}
+    document.dispatchEvent(new CustomEvent('basecoat:themechange', { detail: { mode: dark ? 'dark' : 'light' } }));
+  };
+
+  const getTheme = () => document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+
+  window.basecoat = {
+    register: registerComponent,
+    init: initRegisteredComponent,
+    initAll: initAllRegisteredComponents,
+    refresh: refreshComponent,
+    start: startObserver,
+    stop: stopObserver,
+    theme: {
+      get: getTheme,
+      set: setTheme,
+      toggle: () => setTheme(getTheme() === 'dark' ? 'light' : 'dark'),
+    },
+  };
+
+  document.addEventListener('DOMContentLoaded', () => {
+    initAllComponents();
+    startObserver();
+  });
+})();
+
+(() => {
+  const states = new WeakMap();
+
+  const isDisabled = (item) =>
+    item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true';
+
+  const getElements = (root) => {
+    const trigger = root.querySelector(':scope > button');
+    const popover = root.querySelector(':scope > [data-popover]');
+    const menu = popover ? popover.querySelector('[role="menu"]') : null;
+    return { trigger, popover, menu };
+  };
+
+  const getItems = (menu) => Array.from(menu.querySelectorAll('[role^="menuitem"]')).filter(item => !isDisabled(item));
+
+  const setActiveItem = (state, index) => {
+    if (state.activeIndex > -1 && state.items[state.activeIndex]) {
+      state.items[state.activeIndex].classList.remove('active');
+    }
+    state.activeIndex = index;
+    if (state.activeIndex > -1 && state.items[state.activeIndex]) {
+      const activeItem = state.items[state.activeIndex];
+      activeItem.classList.add('active');
+      if (activeItem.id) state.trigger.setAttribute('aria-activedescendant', activeItem.id);
+    } else {
+      state.trigger.removeAttribute('aria-activedescendant');
+    }
+  };
+
+  const refreshDropdownMenu = (root) => {
+    const state = states.get(root);
+    if (!state) return;
+
+    const elements = getElements(root);
+    if (!elements.trigger || !elements.popover || !elements.menu) {
+      const missing = [];
+      if (!elements.trigger) missing.push('trigger');
+      if (!elements.popover) missing.push('popover');
+      if (!elements.menu) missing.push('menu');
+      console.error(`Dropdown menu refresh failed. Missing element(s): ${missing.join(', ')}`, root);
+      return;
+    }
+
+    Object.assign(state, elements);
+    state.items = getItems(state.menu);
+    if (state.activeIndex > -1 && !state.items[state.activeIndex]) setActiveItem(state, -1);
+  };
+
+  const closePopover = (state, focusOnTrigger = true) => {
+    if (state.trigger.getAttribute('aria-expanded') === 'false') return;
+    state.trigger.setAttribute('aria-expanded', 'false');
+    state.trigger.removeAttribute('aria-activedescendant');
+    state.popover.setAttribute('aria-hidden', 'true');
+    if (focusOnTrigger) state.trigger.focus();
+    setActiveItem(state, -1);
+  };
+
+  const openPopover = (root, state, initialSelection = false) => {
+    document.dispatchEvent(new CustomEvent('basecoat:popover', { detail: { source: root } }));
+    root.refresh();
+    state.trigger.setAttribute('aria-expanded', 'true');
+    state.popover.setAttribute('aria-hidden', 'false');
+
+    if (state.items.length > 0 && initialSelection) {
+      setActiveItem(state, initialSelection === 'last' ? state.items.length - 1 : 0);
+    }
+  };
+
+  const initDropdownMenu = (root) => {
+    if (root.dataset.dropdownMenuInitialized) return;
+
+    const state = { activeIndex: -1, items: [] };
+    states.set(root, state);
+    root.refresh = () => refreshDropdownMenu(root);
+
+    refreshDropdownMenu(root);
+    if (!state.trigger || !state.popover || !state.menu) {
+      states.delete(root);
+      delete root.refresh;
+      return;
+    }
+
+    root.open = (initialSelection = false) => openPopover(root, state, initialSelection);
+    root.close = (focusOnTrigger = true) => closePopover(state, focusOnTrigger);
+    root.toggle = () => state.trigger.getAttribute('aria-expanded') === 'true' ? root.close() : root.open(false);
+
+    const handleTriggerClick = root.toggle;
+
+    const handleKeydown = (event) => {
+      const isExpanded = state.trigger.getAttribute('aria-expanded') === 'true';
+
+      if (event.key === 'Escape') {
+        if (isExpanded) root.close();
+        return;
+      }
+
+      if (!isExpanded) {
+        if (['Enter', ' '].includes(event.key)) {
+          event.preventDefault();
+          root.open(false);
+        } else if (event.key === 'ArrowDown') {
+          event.preventDefault();
+          root.open('first');
+        } else if (event.key === 'ArrowUp') {
+          event.preventDefault();
+          root.open('last');
+        }
+        return;
+      }
+
+      if (state.items.length === 0) return;
+
+      let nextIndex = state.activeIndex;
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        nextIndex = state.activeIndex === -1 ? 0 : Math.min(state.activeIndex + 1, state.items.length - 1);
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        nextIndex = state.activeIndex === -1 ? state.items.length - 1 : Math.max(state.activeIndex - 1, 0);
+      } else if (event.key === 'Home') {
+        event.preventDefault();
+        nextIndex = 0;
+      } else if (event.key === 'End') {
+        event.preventDefault();
+        nextIndex = state.items.length - 1;
+      } else if (['Enter', ' '].includes(event.key)) {
+        event.preventDefault();
+        state.items[state.activeIndex]?.click();
+        root.close();
+        return;
+      } else {
+        return;
+      }
+
+      if (nextIndex !== state.activeIndex) setActiveItem(state, nextIndex);
+    };
+
+    const handleMenuMousemove = (event) => {
+      const menuItem = event.target.closest('[role^="menuitem"]');
+      if (menuItem && !isDisabled(menuItem) && state.items.includes(menuItem)) {
+        const index = state.items.indexOf(menuItem);
+        if (index !== state.activeIndex) setActiveItem(state, index);
+      }
+    };
+
+    const handleMenuMouseleave = () => setActiveItem(state, -1);
+    const handleMenuClick = (event) => {
+      const menuItem = event.target.closest('[role^="menuitem"]');
+      if (!menuItem || isDisabled(menuItem)) return;
+
+      if (menuItem.getAttribute('role') === 'menuitemcheckbox') {
+        menuItem.setAttribute('aria-checked', menuItem.getAttribute('aria-checked') !== 'true');
+      } else if (menuItem.getAttribute('role') === 'menuitemradio') {
+        const group = menuItem.closest('[role="group"], [role="menu"]');
+        group?.querySelectorAll('[role="menuitemradio"]').forEach((item) => {
+          if (!isDisabled(item)) item.setAttribute('aria-checked', item === menuItem ? 'true' : 'false');
+        });
+      }
+
+      root.close();
+    };
+
+    const handleDocumentClick = (event) => {
+      if (!root.contains(event.target)) root.close(false);
+    };
+
+    const handleDocumentPopover = (event) => {
+      if (!root.contains(event.detail.source)) root.close(false);
+    };
+
+    state.trigger.addEventListener('click', handleTriggerClick);
+    root.addEventListener('keydown', handleKeydown);
+    state.menu.addEventListener('mousemove', handleMenuMousemove);
+    state.menu.addEventListener('mouseleave', handleMenuMouseleave);
+    state.menu.addEventListener('click', handleMenuClick);
+    document.addEventListener('click', handleDocumentClick);
+    document.addEventListener('basecoat:popover', handleDocumentPopover);
+
+    root._destroy = () => {
+      state.trigger.removeEventListener('click', handleTriggerClick);
+      root.removeEventListener('keydown', handleKeydown);
+      state.menu.removeEventListener('mousemove', handleMenuMousemove);
+      state.menu.removeEventListener('mouseleave', handleMenuMouseleave);
+      state.menu.removeEventListener('click', handleMenuClick);
+      document.removeEventListener('click', handleDocumentClick);
+      document.removeEventListener('basecoat:popover', handleDocumentPopover);
+      states.delete(root);
+      delete root.refresh;
+      delete root.open;
+      delete root.close;
+      delete root.toggle;
+    };
+
+    state.trigger.setAttribute('aria-expanded', 'false');
+    state.popover.setAttribute('aria-hidden', 'true');
+    root.dataset.dropdownMenuInitialized = 'true';
+    root.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('dropdown-menu', {
+      selector: '.dropdown-menu:not([data-dropdown-menu-initialized]):not(:has(> [data-popover][popover]))',
+      init: initDropdownMenu,
+      refresh: refreshDropdownMenu,
+    });
+  }
+})();
+
+// Loaded after the DOM is ready: initialize now.
+if (document.readyState !== 'loading') { window.basecoat.initAll(); window.basecoat.start(); }

package/dist/ui/empty.css

@@ -0,0 +1,111 @@
+/* @auvyx/ui empty | order 15 */
+@layer components {
+  .empty {
+      display: flex;
+      width: 100%;
+      min-width: 0;
+      flex: 1;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      text-wrap: balance;
+    }
+  .empty > header {
+      display: flex;
+      max-width: var(--container-sm);
+      flex-direction: column;
+      align-items: center;
+    }
+  .empty figure {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      & svg {
+        pointer-events: none;
+      }
+      & svg {
+        flex-shrink: 0;
+      }
+    }
+  .empty figure:has(img) {
+      overflow: hidden;
+      & img {
+        width: 100%;
+        height: 100%;
+      }
+      & img {
+        object-fit: cover;
+      }
+    }
+  .empty > :is(section, footer) {
+      display: flex;
+      width: 100%;
+      max-width: var(--container-sm);
+      min-width: 0;
+      flex-direction: column;
+      align-items: center;
+      text-wrap: balance;
+    }
+  .empty > header > p {
+      &>a {
+        text-decoration-line: underline;
+      }
+      &>a {
+        text-underline-offset: 4px;
+      }
+      &>a:hover {
+        color: var(--color-primary);
+      }
+    }
+}
+
+@layer components {
+  .empty {
+      gap: calc(var(--spacing) * 4);
+      border-radius: var(--radius-lg);
+      --tw-border-style: dashed;
+      border-style: dashed;
+      padding: calc(var(--spacing) * 12);
+    }
+  .empty > header {
+      gap: calc(var(--spacing) * 2);
+    }
+  .empty figure {
+      margin-bottom: calc(var(--spacing) * 2);
+    }
+  .empty figure:has(> svg:only-child) {
+      display: flex;
+      width: calc(var(--spacing) * 10);
+      height: calc(var(--spacing) * 10);
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-lg);
+      background-color: var(--color-muted);
+      color: var(--color-foreground);
+      & svg:not([class*='size-']) {
+        width: calc(var(--spacing) * 6);
+        height: calc(var(--spacing) * 6);
+      }
+    }
+  .empty :is(h2, h3, h4) {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      --tw-tracking: var(--tracking-tight);
+      letter-spacing: var(--tracking-tight);
+    }
+  .empty > header > p {
+      font-size: var(--text-sm);
+      line-height: var(--leading-relaxed);
+      color: var(--color-muted-foreground);
+    }
+  .empty > :is(section, footer) {
+      gap: calc(var(--spacing) * 4);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+}