@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/sidebar.js

@@ -0,0 +1,287 @@
+/* @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 initSidebar = (sidebarComponent) => {
+    if (sidebarComponent.dataset.sidebarInitialized && typeof sidebarComponent.toggle === 'function') return;
+
+    // In-flow sidebars (inside a dialog, popover or layout cell) have no open state.
+    if (sidebarComponent.dataset.position === 'static') {
+      sidebarComponent.dataset.sidebarInitialized = 'true';
+      return;
+    }
+
+    const initialOpen = sidebarComponent.dataset.initialOpen !== 'false';
+    const initialMobileOpen = sidebarComponent.dataset.initialMobileOpen === 'true';
+    const breakpoint = parseInt(sidebarComponent.dataset.breakpoint) || 768;
+
+    let open = breakpoint > 0
+      ? (window.innerWidth >= breakpoint ? initialOpen : initialMobileOpen)
+      : initialOpen;
+
+    // Collapsing to an icon rail keeps the sidebar usable on desktop.
+    const isIconRail = () => sidebarComponent.dataset.collapsible === 'icon' && (breakpoint <= 0 || window.innerWidth >= breakpoint);
+
+    const updateState = () => {
+      const rail = isIconRail();
+      // An icon rail stays visible to assistive tech; only a fully hidden sidebar is aria-hidden.
+      sidebarComponent.setAttribute('aria-hidden', String(!open && !rail));
+      sidebarComponent.dataset.state = open ? 'open' : 'collapsed';
+      if (open || rail) {
+        sidebarComponent.removeAttribute('inert');
+      } else {
+        sidebarComponent.setAttribute('inert', '');
+      }
+      if (sidebarComponent.id) {
+        document.querySelectorAll(`[data-sidebar-toggle="${CSS.escape(sidebarComponent.id)}"]`).forEach((btn) => btn.setAttribute('aria-expanded', String(open)));
+      }
+      sidebarComponent.dispatchEvent(new CustomEvent('basecoat:sidebar', { detail: { open } }));
+    };
+
+    const setState = (state) => {
+      open = Boolean(state);
+      updateState();
+    };
+
+    sidebarComponent.open = () => setState(true);
+    sidebarComponent.close = () => setState(false);
+    sidebarComponent.toggle = () => setState(!open);
+
+    const handleClick = (event) => {
+      const target = event.target;
+      const nav = sidebarComponent.querySelector(':scope > nav');
+      const isMobile = window.innerWidth < breakpoint;
+
+      if (isMobile && target.closest('a, button') && !target.closest('[data-keep-mobile-sidebar-open]')) {
+        if (document.activeElement) document.activeElement.blur();
+        sidebarComponent.close();
+        return;
+      }
+
+      // Collapsed icon rail: opening a submenu expands the sidebar first.
+      if (!open && isIconRail() && target.closest('summary')) {
+        event.preventDefault();
+        sidebarComponent.open();
+        target.closest('details').open = true;
+        return;
+      }
+
+      if (target === sidebarComponent || (nav && !nav.contains(target))) {
+        if (document.activeElement) document.activeElement.blur();
+        sidebarComponent.close();
+      }
+    };
+
+    sidebarComponent.addEventListener('click', handleClick);
+
+    sidebarComponent._destroy = () => {
+      sidebarComponent.removeEventListener('click', handleClick);
+      delete sidebarComponent.open;
+      delete sidebarComponent.close;
+      delete sidebarComponent.toggle;
+    };
+
+    updateState();
+    sidebarComponent.dataset.sidebarInitialized = 'true';
+    sidebarComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  // Declarative toggles: <button data-sidebar-toggle="sidebar-id"> (empty value = first sidebar).
+  const sidebarFor = (id) => (id ? document.getElementById(id) : document.querySelector('.sidebar:not([data-position="static"])'));
+  document.addEventListener('click', (event) => {
+    const button = event.target.closest('[data-sidebar-toggle]');
+    if (!button) return;
+    sidebarFor(button.getAttribute('data-sidebar-toggle'))?.toggle?.();
+  });
+  // Ctrl/Cmd+B toggles the first sidebar (opt out with data-shortcut="none").
+  document.addEventListener('keydown', (event) => {
+    if (event.key.toLowerCase() !== 'b' || !(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+    if (event.target.closest('input, textarea, select, [contenteditable]')) return;
+    const sidebar = sidebarFor('');
+    if (!sidebar || sidebar.dataset.shortcut === 'none' || typeof sidebar.toggle !== 'function') return;
+    event.preventDefault();
+    sidebar.toggle();
+  });
+
+  if (window.basecoat) {
+    window.basecoat.register('sidebar', '.sidebar', initSidebar);
+  }
+})();
+
+// Loaded after the DOM is ready: initialize now.
+if (document.readyState !== 'loading') { window.basecoat.initAll(); window.basecoat.start(); }

package/dist/ui/skeleton.css

@@ -0,0 +1,13 @@
+/* @auvyx/ui skeleton | order 30 */
+@layer components {
+  .skeleton {
+      animation: var(--animate-pulse);
+    }
+}
+
+@layer components {
+  .skeleton {
+      border-radius: var(--radius-md);
+      background-color: var(--color-muted);
+    }
+}

package/dist/ui/slider.css

@@ -0,0 +1,184 @@
+/* @auvyx/ui slider | order 26 */
+@layer components {
+  .field > input[type='range'], .input[type='range'] {
+      display: flex;
+      appearance: none;
+      align-items: center;
+      padding: 0;
+      --tw-outline-style: none;
+      outline-style: none;
+      &:disabled {
+        pointer-events: none;
+      }
+      &:disabled {
+        opacity: 50%;
+      }
+      --slider-value: 20%;
+      &::-webkit-slider-thumb {
+        display: block;
+        flex-shrink: 0;
+        appearance: none;
+      }
+      &::-webkit-slider-runnable-track {
+        width: 100%;
+        appearance: none;
+        background: linear-gradient(to right, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
+      }
+      &:dir(rtl)::-webkit-slider-runnable-track {
+        background: linear-gradient(to left, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
+      }
+      &::-moz-range-thumb {
+        display: block;
+        flex-shrink: 0;
+        appearance: none;
+      }
+      &::-moz-range-track {
+        width: 100%;
+        appearance: none;
+        background: linear-gradient(to right, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
+      }
+      &:dir(rtl)::-moz-range-track {
+        background: linear-gradient(to left, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
+      }
+      &::-ms-thumb {
+        display: block;
+        flex-shrink: 0;
+        appearance: none;
+      }
+      &::-ms-track {
+        width: 100%;
+        appearance: none;
+      }
+      &::-ms-fill-lower {
+        background-color: var(--color-primary);
+      }
+      &::-ms-fill-upper {
+        background-color: var(--color-muted);
+      }
+    }
+}
+
+@layer components {
+  .field > input[type='range'], .input[type='range'] {
+      height: calc(var(--spacing) * 5);
+      --slider-track-height: 0.375rem;
+      --slider-thumb-size: 1rem;
+    }
+  :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-runnable-track {
+      height: calc(var(--spacing) * 1.5);
+      border-radius: calc(infinity * 1px);
+      background-color: var(--color-muted);
+    }
+  :is(.field > input[type='range'], .input[type='range'])::-moz-range-track {
+      height: calc(var(--spacing) * 1.5);
+      border-radius: calc(infinity * 1px);
+      background-color: var(--color-muted);
+    }
+  :is(.field > input[type='range'], .input[type='range'])::-ms-track {
+      height: calc(var(--spacing) * 1.5);
+      border-radius: calc(infinity * 1px);
+      background-color: var(--color-muted);
+    }
+  :is(.field > input[type='range'], .input[type='range'])::-ms-fill-lower, :is(.field > input[type='range'], .input[type='range'])::-ms-fill-upper {
+      border-radius: inherit;
+    }
+  :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
+      margin-top: calc(calc((var(--slider-thumb-size) - var(--slider-track-height)) / 2) * -1);
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      border-radius: calc(infinity * 1px);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-primary);
+      background-color: var(--color-white);
+      --tw-shadow: var(--shadow-sm, 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
+      --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);
+      }
+      transition-property: color,box-shadow;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      border-radius: calc(infinity * 1px);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-primary);
+      background-color: var(--color-white);
+      --tw-shadow: var(--shadow-sm, 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
+      --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);
+      }
+      transition-property: color,box-shadow;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      border-radius: calc(infinity * 1px);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-primary);
+      background-color: var(--color-white);
+      --tw-shadow: var(--shadow-sm, 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
+      --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);
+      }
+      transition-property: color,box-shadow;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  @media (hover: hover) {
+      :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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);
+      }
+      :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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);
+      }
+      :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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);
+      }
+    }
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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);
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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);
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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);
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+}

package/dist/ui/slider.js

@@ -0,0 +1,206 @@
+/* @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();
+  });
+})();
+
+(() => {
+  function updateRange(element) {
+    const min = parseFloat(element.min || '0');
+    const max = parseFloat(element.max || '100');
+    const value = parseFloat(element.value || '0');
+    const percent = max === min ? 0 : ((value - min) / (max - min)) * 100;
+    element.style.setProperty('--slider-value', `${percent}%`);
+  }
+
+  function initRange(element) {
+    if (element.dataset.rangeInitialized) return;
+
+    updateRange(element);
+    const handleInput = () => updateRange(element);
+    element.addEventListener('input', handleInput);
+    element._destroy = () => {
+      element.removeEventListener('input', handleInput);
+    };
+    element.dataset.rangeInitialized = 'true';
+  }
+
+  if (window.basecoat) {
+    window.basecoat.register('range', 'input[type="range"]:not([data-range-initialized])', initRange);
+  }
+})();
+
+// Loaded after the DOM is ready: initialize now.
+if (document.readyState !== 'loading') { window.basecoat.initAll(); window.basecoat.start(); }