@auvyx/ui 0.0.0-stage → 0.1.1

package/dist/ui/command.js

@@ -0,0 +1,383 @@
+/* @auvyx/ui v0.1.1 | MIT License | see LICENSE */
+// Shared core, once per page.
+if (!window.auvyx) (() => {
+  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 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.auvyx is the API; window.auvyx is the same object, kept as an alias.
+  window.auvyx = 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' ||
+    item.getAttribute('data-disabled') === 'true';
+
+  const getElements = (container) => ({
+    input: container.querySelector('header input'),
+    menu: container.querySelector('[role="menu"]'),
+  });
+
+  const getItems = (menu) => {
+    const allItems = Array.from(menu.querySelectorAll('[role="menuitem"]'));
+    return {
+      allItems,
+      items: allItems.filter(item => !isDisabled(item)),
+    };
+  };
+
+  const scrollItemIntoMenu = (state, item) => {
+    const itemRect = item.getBoundingClientRect();
+    const menuRect = state.menu.getBoundingClientRect();
+
+    if (itemRect.top < menuRect.top) {
+      state.menu.scrollTop -= menuRect.top - itemRect.top;
+    } else if (itemRect.bottom > menuRect.bottom) {
+      state.menu.scrollTop += itemRect.bottom - menuRect.bottom;
+    }
+  };
+
+  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) {
+      const activeItem = state.items[state.activeIndex];
+      activeItem.classList.add('active');
+      if (activeItem.id) {
+        state.input.setAttribute('aria-activedescendant', activeItem.id);
+      } else {
+        state.input.removeAttribute('aria-activedescendant');
+      }
+    } else {
+      state.input.removeAttribute('aria-activedescendant');
+    }
+  };
+
+  const filterItems = (state) => {
+    if (state.manualFilter) {
+      setActiveItem(state, -1);
+      state.visibleItems = state.items.filter(item => item.getAttribute('aria-hidden') !== 'true');
+      if (state.visibleItems.length > 0) {
+        setActiveItem(state, state.items.indexOf(state.visibleItems[0]));
+      }
+      return;
+    }
+
+    const searchTerm = state.input.value.trim().toLowerCase();
+
+    setActiveItem(state, -1);
+    state.visibleItems = [];
+
+    state.allItems.forEach(item => {
+      if (item.hasAttribute('data-force')) {
+        item.setAttribute('aria-hidden', 'false');
+        if (state.items.includes(item)) state.visibleItems.push(item);
+        return;
+      }
+
+      const itemText = (item.dataset.filter || item.textContent).trim().toLowerCase();
+      const keywordList = (item.dataset.keywords || '')
+        .toLowerCase()
+        .split(/[\s,]+/)
+        .filter(Boolean);
+      const matchesKeyword = keywordList.some(keyword => keyword.includes(searchTerm));
+      const matches = itemText.includes(searchTerm) || matchesKeyword;
+      item.setAttribute('aria-hidden', String(!matches));
+      if (matches && state.items.includes(item)) state.visibleItems.push(item);
+    });
+
+    if (state.visibleItems.length > 0) {
+      setActiveItem(state, state.items.indexOf(state.visibleItems[0]));
+      scrollItemIntoMenu(state, state.visibleItems[0]);
+    }
+  };
+
+  const refreshCommand = (container) => {
+    const state = states.get(container);
+    if (!state) return;
+
+    const elements = getElements(container);
+    if (!elements.input || !elements.menu) {
+      const missing = [];
+      if (!elements.input) missing.push('input');
+      if (!elements.menu) missing.push('menu');
+      console.error(`Command component refresh failed. Missing element(s): ${missing.join(', ')}`, container);
+      return;
+    }
+
+    Object.assign(state, elements, getItems(elements.menu));
+    state.manualFilter = container.dataset.filter === 'manual';
+    filterItems(state);
+  };
+
+  const handleKeyNavigation = (event, state) => {
+    if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End'].includes(event.key)) return;
+
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (state.activeIndex > -1) state.items[state.activeIndex]?.click();
+      return;
+    }
+
+    if (state.visibleItems.length === 0) return;
+
+    event.preventDefault();
+
+    const currentVisibleIndex = state.activeIndex > -1 ? state.visibleItems.indexOf(state.items[state.activeIndex]) : -1;
+    let nextVisibleIndex = currentVisibleIndex;
+
+    if (event.key === 'ArrowDown' && currentVisibleIndex < state.visibleItems.length - 1) nextVisibleIndex = currentVisibleIndex + 1;
+    if (event.key === 'ArrowUp') nextVisibleIndex = currentVisibleIndex > 0 ? currentVisibleIndex - 1 : 0;
+    if (event.key === 'Home') nextVisibleIndex = 0;
+    if (event.key === 'End') nextVisibleIndex = state.visibleItems.length - 1;
+
+    if (nextVisibleIndex !== currentVisibleIndex) {
+      const newActiveItem = state.visibleItems[nextVisibleIndex];
+      setActiveItem(state, state.items.indexOf(newActiveItem));
+      scrollItemIntoMenu(state, newActiveItem);
+    }
+  };
+
+  const initCommand = (container) => {
+    if (container.dataset.commandInitialized) return;
+
+    const state = { activeIndex: -1, allItems: [], items: [], visibleItems: [], manualFilter: false };
+    states.set(container, state);
+
+    container.refresh = () => refreshCommand(container);
+
+    const elements = getElements(container);
+    if (!elements.input || !elements.menu) {
+      const missing = [];
+      if (!elements.input) missing.push('input');
+      if (!elements.menu) missing.push('menu');
+      console.error(`Command component initialization failed. Missing element(s): ${missing.join(', ')}`, container);
+      states.delete(container);
+      delete container.refresh;
+      return;
+    }
+    Object.assign(state, elements);
+
+    const handleInput = () => filterItems(state);
+    const handleInputKeydown = (event) => handleKeyNavigation(event, state);
+    const handleMenuMousemove = (event) => {
+      const menuItem = event.target.closest('[role="menuitem"]');
+      if (menuItem && state.visibleItems.includes(menuItem)) {
+        const index = state.items.indexOf(menuItem);
+        if (index !== state.activeIndex) setActiveItem(state, index);
+      }
+    };
+    const handleMenuClick = (event) => {
+      const clickedItem = event.target.closest('[role="menuitem"]');
+      if (clickedItem && state.visibleItems.includes(clickedItem)) {
+        const dialog = container.closest('dialog.command-dialog');
+        if (dialog && !clickedItem.hasAttribute('data-keep-command-open')) dialog.close();
+      }
+    };
+
+    state.input.addEventListener('input', handleInput);
+    state.input.addEventListener('keydown', handleInputKeydown);
+    state.menu.addEventListener('mousemove', handleMenuMousemove);
+    state.menu.addEventListener('click', handleMenuClick);
+
+    container._destroy = () => {
+      state.input.removeEventListener('input', handleInput);
+      state.input.removeEventListener('keydown', handleInputKeydown);
+      state.menu.removeEventListener('mousemove', handleMenuMousemove);
+      state.menu.removeEventListener('click', handleMenuClick);
+      states.delete(container);
+      delete container.refresh;
+    };
+
+    refreshCommand(container);
+    container.dataset.commandInitialized = 'true';
+    container.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.auvyx) {
+    window.auvyx.register('command', {
+      selector: '.command:not([data-command-initialized])',
+      init: initCommand,
+      refresh: refreshCommand,
+    });
+  }
+})();
+
+// Loaded after the DOM is ready: initialize now.
+if (document.readyState !== 'loading') { window.auvyx.initAll(); window.auvyx.start(); }

package/dist/ui/context-menu.css

@@ -0,0 +1,17 @@
+/* @auvyx/ui context-menu | order 54 */
+@layer components {
+  .context-menu {
+      display: block;
+      > .dropdown-menu {
+        display: contents;
+      }
+    }
+}
+
+@layer components {
+  .context-menu > .dropdown-menu > [data-popover] {
+      min-width: calc(var(--spacing) * 36);
+      --tw-shadow: var(--shadow-md, 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+}

package/dist/ui/context-menu.js

@@ -0,0 +1,52 @@
+/* @auvyx/ui v0.1.1 | MIT License | see LICENSE */
+(() => {
+  // ../elements/src/context-menu.js
+  var AuvyxContextMenu = class extends HTMLElement {
+    connectedCallback() {
+      if (this._init) return;
+      this._init = true;
+      this.menu = this.querySelector("[data-popover][popover]");
+      if (!this.menu) return;
+      let pressed = false;
+      this.addEventListener("pointerdown", (e) => {
+        if (e.button === 2) pressed = true;
+      });
+      this.addEventListener("contextmenu", (event) => {
+        if (this.menu.contains(event.target)) return;
+        event.preventDefault();
+        const { clientX: x, clientY: y } = event;
+        if (!pressed) return this.openAt(x, y);
+        window.addEventListener("pointerup", () => {
+          pressed = false;
+          setTimeout(() => this.openAt(x, y));
+        }, { once: true, capture: true });
+      });
+      this.addEventListener("keydown", (event) => {
+        if (this.menu.contains(event.target)) return;
+        if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+          event.preventDefault();
+          const r = event.target.getBoundingClientRect();
+          this.openAt(r.left, r.bottom);
+        }
+      });
+    }
+    openAt(x, y) {
+      const menu = this.menu;
+      if (menu.matches(":popover-open")) menu.hidePopover();
+      Object.assign(menu.style, {
+        position: "fixed",
+        inset: "auto",
+        margin: "0",
+        positionArea: "none",
+        positionTryFallbacks: "none",
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      menu.showPopover();
+      const r = menu.getBoundingClientRect();
+      if (r.right > innerWidth - 4) menu.style.left = `${Math.max(4, x - r.width)}px`;
+      if (r.bottom > innerHeight - 4) menu.style.top = `${Math.max(4, y - r.height)}px`;
+    }
+  };
+  if (!customElements.get("auvyx-context-menu")) customElements.define("auvyx-context-menu", AuvyxContextMenu);
+})();

package/dist/ui/copy.js

@@ -0,0 +1,56 @@
+/* @auvyx/ui v0.1.1 | MIT License | see LICENSE */
+// Copy to clipboard (fork addition).
+//
+// Any element with [data-copy] copies text on click:
+//   data-copy=""           → the <pre> of the closest .code-block
+//   data-copy="#selector"  → the textContent of that element
+//   data-copy-text="…"     → this literal text
+// While copied, the button gets [data-copied] for 2s and its aria-label
+// becomes the value of data-copied-label (default "Copied").
+// One delegated listener, so it also works for content added later.
+(() => {
+  if (window.__basecoatCopy) return;
+  window.__basecoatCopy = true;
+
+  const sourceText = (button) => {
+    if (button.hasAttribute('data-copy-text')) return button.getAttribute('data-copy-text');
+    const target = button.getAttribute('data-copy');
+    const el = target ? document.querySelector(target) : button.closest('.code-block')?.querySelector(':scope > pre');
+    return el ? el.textContent : null;
+  };
+
+  const selectFallback = (button) => {
+    const target = button.getAttribute('data-copy');
+    const el = target ? document.querySelector(target) : button.closest('.code-block')?.querySelector(':scope > pre');
+    if (!el) return;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+  };
+
+  document.addEventListener('click', async (event) => {
+    const button = event.target.closest('[data-copy], [data-copy-text]');
+    if (!button || button.disabled) return;
+    const text = sourceText(button);
+    if (text == null) return;
+
+    try {
+      await navigator.clipboard.writeText(text.replace(/\n$/, ''));
+    } catch {
+      selectFallback(button);
+      return;
+    }
+
+    const label = button.getAttribute('aria-label');
+    if (!button.hasAttribute('data-copied')) button.dataset.copyLabel = label ?? '';
+    button.setAttribute('data-copied', '');
+    button.setAttribute('aria-label', button.getAttribute('data-copied-label') || 'Copied');
+    clearTimeout(button._copyTimer);
+    button._copyTimer = setTimeout(() => {
+      button.removeAttribute('data-copied');
+      if (button.dataset.copyLabel) button.setAttribute('aria-label', button.dataset.copyLabel);
+    }, 2000);
+  });
+})();

package/dist/ui/data-table.css

@@ -0,0 +1,114 @@
+/* @auvyx/ui data-table | order 56 */
+@layer components {
+  .data-table {
+      display: flex;
+      width: 100%;
+      min-width: 0;
+      flex-direction: column;
+      > header, > footer {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+      > header > input {
+        width: auto;
+        min-width: 0;
+        flex: 1 1 12rem;
+      }
+      > div:has(> table) {
+        position: relative;
+        width: 100%;
+        overflow-x: auto;
+      }
+      th[aria-sort] > button {
+        display: inline-flex;
+        align-items: center;
+        white-space: nowrap;
+        --tw-outline-style: none;
+        outline-style: none;
+        &::after {
+          margin-inline-start: var(--spacing);
+          display: inline-block;
+          width: calc(var(--spacing) * 3.5);
+          height: calc(var(--spacing) * 3.5);
+          flex-shrink: 0;
+          opacity: 50%;
+          --tw-content: '';
+          content: var(--tw-content);
+          mask: var(--data-table-sort-icon) center / contain no-repeat;
+          background-color: currentColor;
+        }
+      }
+      th[aria-sort='ascending'] > button::after, th[aria-sort='descending'] > button::after {
+        opacity: 100%;
+      }
+      th[aria-sort='descending'] > button::after {
+        rotate: 180deg;
+      }
+      [data-page-status], [data-selected-count] {
+        --tw-numeric-spacing: tabular-nums;
+        font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+      }
+      [data-selected-count] {
+        flex: 1;
+      }
+    }
+}
+
+@layer components {
+  .data-table {
+      gap: calc(var(--spacing) * 4);
+    }
+  .data-table > header {
+      gap: calc(var(--spacing) * 2);
+    }
+  .data-table > header > input[type='search'] {
+      max-width: var(--container-sm);
+    }
+  .data-table > div:has(> table) {
+      border-radius: var(--auvyx-r-field);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  .data-table th[aria-sort] > button {
+      margin-inline-start: calc(var(--spacing) * -2);
+      height: calc(var(--spacing) * 8);
+      border-radius: var(--auvyx-r-control);
+      padding-inline: calc(var(--spacing) * 2);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-foreground);
+        }
+      }
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-ring);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        }
+      }
+    }
+  .data-table {
+      --data-table-sort-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>');
+    }
+  .data-table th:is([aria-sort='ascending'], [aria-sort='descending']) {
+      --data-table-sort-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>');
+    }
+  .data-table tbody tr[aria-selected='true'] {
+      background-color: var(--color-muted);
+    }
+  .data-table > footer {
+      gap: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-muted-foreground);
+    }
+}