@stacksjs/stx 0.2.94 → 0.2.96

package/dist/composables/use-window.js

@@ -1,2 +1,163 @@
-// @bun
-import"../chunk-3jm3snz8.js";function I(){let D=new Set,B=typeof window<"u",q={width:B?window.innerWidth:0,height:B?window.innerHeight:0};if(B){let j=()=>{q={width:window.innerWidth,height:window.innerHeight};for(let F of D)try{F(q)}catch(G){console.error("[useWindowSize] Subscriber error:",G)}};window.addEventListener("resize",j,{passive:!0})}return{get width(){return q.width},get height(){return q.height},subscribe:(j)=>{return D.add(j),j(q),()=>D.delete(j)}}}function J(){let D=new Set,B=typeof window<"u",q={x:B?window.scrollX:0,y:B?window.scrollY:0};if(B){let j=()=>{q={x:window.scrollX,y:window.scrollY};for(let F of D)try{F(q)}catch(G){console.error("[useScroll] Subscriber error:",G)}};window.addEventListener("scroll",j,{passive:!0})}return{get x(){return q.x},get y(){return q.y},subscribe:(j)=>{return D.add(j),j(q),()=>D.delete(j)},scrollTo:(j,F)=>{if(!B)return;if(typeof j==="number")window.scrollTo(j,F??0);else window.scrollTo(j)},scrollToTop:()=>{if(!B)return;window.scrollTo({top:0,behavior:"smooth"})},scrollToBottom:()=>{if(!B)return;window.scrollTo({top:document.body.scrollHeight,behavior:"smooth"})}}}function K(){let D=new Set,B=typeof document<"u",q=B?document.visibilityState==="visible":!0;if(B)document.addEventListener("visibilitychange",()=>{q=document.visibilityState==="visible";for(let j of D)try{j(q)}catch(F){console.error("[useVisibility] Subscriber error:",F)}});return{get isVisible(){return q},subscribe:(j)=>{return D.add(j),j(q),()=>D.delete(j)}}}function O(D){let B=typeof document<"u";if(D&&B)document.title=D;return{get value(){return B?document.title:""},set value(q){if(B)document.title=q},set:(q)=>{if(B)document.title=q}}}function Q(D){let B=typeof document<"u",q=()=>{if(!B)return null;let j=document.querySelector('link[rel*="icon"]');if(!j)j=document.createElement("link"),j.rel="icon",document.head.appendChild(j);return j};if(D){let j=q();if(j)j.href=D}return{get value(){return q()?.href||""},set value(j){let F=q();if(F)F.href=j},set:(j)=>{let F=q();if(F)F.href=j}}}export{I as useWindowSize,K as useVisibility,O as useTitle,J as useScroll,Q as useFavicon};
+export function useWindowSize() {
+  const subscribers = new Set, isClient = typeof window < "u";
+  let currentSize = {
+    width: isClient ? window.innerWidth : 0,
+    height: isClient ? window.innerHeight : 0
+  };
+  if (isClient) {
+    const handler = () => {
+      currentSize = {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+      for (const callback of subscribers)
+        try {
+          callback(currentSize);
+        } catch (e) {
+          console.error("[useWindowSize] Subscriber error:", e);
+        }
+    };
+    window.addEventListener("resize", handler, { passive: !0 });
+  }
+  return {
+    get width() {
+      return currentSize.width;
+    },
+    get height() {
+      return currentSize.height;
+    },
+    subscribe: (callback) => {
+      subscribers.add(callback);
+      callback(currentSize);
+      return () => subscribers.delete(callback);
+    }
+  };
+}
+export function useScroll() {
+  const subscribers = new Set, isClient = typeof window < "u";
+  let currentPosition = {
+    x: isClient ? window.scrollX : 0,
+    y: isClient ? window.scrollY : 0
+  };
+  if (isClient) {
+    const handler = () => {
+      currentPosition = {
+        x: window.scrollX,
+        y: window.scrollY
+      };
+      for (const callback of subscribers)
+        try {
+          callback(currentPosition);
+        } catch (e) {
+          console.error("[useScroll] Subscriber error:", e);
+        }
+    };
+    window.addEventListener("scroll", handler, { passive: !0 });
+  }
+  return {
+    get x() {
+      return currentPosition.x;
+    },
+    get y() {
+      return currentPosition.y;
+    },
+    subscribe: (callback) => {
+      subscribers.add(callback);
+      callback(currentPosition);
+      return () => subscribers.delete(callback);
+    },
+    scrollTo: (options, y) => {
+      if (!isClient)
+        return;
+      if (typeof options === "number")
+        window.scrollTo(options, y ?? 0);
+      else
+        window.scrollTo(options);
+    },
+    scrollToTop: () => {
+      if (!isClient)
+        return;
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    },
+    scrollToBottom: () => {
+      if (!isClient)
+        return;
+      window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
+    }
+  };
+}
+export function useVisibility() {
+  const subscribers = new Set, isClient = typeof document < "u";
+  let isVisible = isClient ? document.visibilityState === "visible" : !0;
+  if (isClient)
+    document.addEventListener("visibilitychange", () => {
+      isVisible = document.visibilityState === "visible";
+      for (const callback of subscribers)
+        try {
+          callback(isVisible);
+        } catch (e) {
+          console.error("[useVisibility] Subscriber error:", e);
+        }
+    });
+  return {
+    get isVisible() {
+      return isVisible;
+    },
+    subscribe: (callback) => {
+      subscribers.add(callback);
+      callback(isVisible);
+      return () => subscribers.delete(callback);
+    }
+  };
+}
+export function useTitle(initialTitle) {
+  const isClient = typeof document < "u";
+  if (initialTitle && isClient)
+    document.title = initialTitle;
+  return {
+    get value() {
+      return isClient ? document.title : "";
+    },
+    set value(newTitle) {
+      if (isClient)
+        document.title = newTitle;
+    },
+    set: (title) => {
+      if (isClient)
+        document.title = title;
+    }
+  };
+}
+export function useFavicon(href) {
+  const isClient = typeof document < "u", getLinkElement = () => {
+    if (!isClient)
+      return null;
+    let link = document.querySelector('link[rel*="icon"]');
+    if (!link) {
+      link = document.createElement("link");
+      link.rel = "icon";
+      document.head.appendChild(link);
+    }
+    return link;
+  };
+  if (href) {
+    const link = getLinkElement();
+    if (link)
+      link.href = href;
+  }
+  return {
+    get value() {
+      return getLinkElement()?.href || "";
+    },
+    set value(newHref) {
+      const link = getLinkElement();
+      if (link)
+        link.href = newHref;
+    },
+    set: (newHref) => {
+      const link = getLinkElement();
+      if (link)
+        link.href = newHref;
+    }
+  };
+}

package/dist/composables.js

@@ -1,2 +1,552 @@
-// @bun
-import{$z as A,Bz as a,Cz as b,Dz as c,Ez as d,Fz as e,Gz as f,Hz as g,Iz as h,Jz as i,Kz as j,Lz as k,Mz as l,Nz as m,Oz as n,Pz as o,Qz as p,Rz as q,Sz as r,Tz as s,Uz as t,Vz as u,Wz as v,Xz as w,Yz as x,Zz as y,_z as z,aA as B}from"./chunk-8qbax8xn.js";import"./chunk-3jm3snz8.js";export{x as withInjectionScope,l as watch,p as updateComponent,n as setupComponent,b as setCurrentInstance,j as ref,v as pushInjectionScope,t as provide,w as popInjectionScope,i as onUpdated,f as onUpdate,h as onUnmounted,g as onMounted,d as onMount,e as onDestroy,k as namedRef,o as mountComponent,u as inject,c as getCurrentInstance,r as generateLifecycleRuntime,q as destroyComponent,j as createRef,s as createInjectionKey,a as createComponentInstance,m as computed,y as clearInjections,z as ThemeKey,A as RouterKey,B as I18nKey};
+let currentInstance = null;
+const instances = new Map;
+let componentIdCounter = 0;
+function generateId() {
+  return `stx-${++componentIdCounter}-${Date.now().toString(36)}`;
+}
+export function createComponentInstance(element) {
+  const instance = {
+    id: generateId(),
+    element: element || null,
+    mountHooks: [],
+    destroyHooks: [],
+    updateHooks: [],
+    refs: new Map,
+    watchers: [],
+    isMounted: !1
+  };
+  instances.set(instance.id, instance);
+  return instance;
+}
+export function setCurrentInstance(instance) {
+  currentInstance = instance;
+}
+export function getCurrentInstance() {
+  return currentInstance;
+}
+function getOrWarnInstance(hookName) {
+  if (!currentInstance) {
+    console.warn(`[stx] ${hookName} must be called within a component setup.`);
+    return null;
+  }
+  return currentInstance;
+}
+export function onMount(hook) {
+  const instance = getOrWarnInstance("onMount");
+  if (instance)
+    instance.mountHooks.push(hook);
+}
+export function onDestroy(hook) {
+  const instance = getOrWarnInstance("onDestroy");
+  if (instance)
+    instance.destroyHooks.push(hook);
+}
+export function onUpdate(hook) {
+  const instance = getOrWarnInstance("onUpdate");
+  if (instance)
+    instance.updateHooks.push(hook);
+}
+export const onMounted = onMount, onUnmounted = onDestroy, onUpdated = onUpdate;
+export function ref(initialValue = null) {
+  const r = {
+    value: initialValue,
+    get current() {
+      return this.value;
+    }
+  }, instance = getCurrentInstance();
+  if (instance) {
+    const refId = `ref-${instance.refs.size}`;
+    instance.refs.set(refId, r);
+  }
+  return r;
+}
+export function namedRef(name, initialValue = null) {
+  const r = ref(initialValue), instance = getCurrentInstance();
+  if (instance)
+    instance.refs.set(name, r);
+  return r;
+}
+export function watch(source, callback, options = {}) {
+  let oldValue, cleanup, isActive = !0;
+  const run = () => {
+    if (!isActive)
+      return;
+    const newValue = source();
+    if (oldValue !== newValue || options.immediate) {
+      if (cleanup)
+        cleanup();
+      cleanup = callback(newValue, oldValue);
+      oldValue = newValue;
+    }
+  };
+  if (options.immediate)
+    run();
+  else
+    oldValue = source();
+  const intervalId = setInterval(run, 16), stop = () => {
+    isActive = !1;
+    clearInterval(intervalId);
+    if (cleanup)
+      cleanup();
+  }, instance = getCurrentInstance();
+  if (instance) {
+    instance.watchers.push({ stop });
+    instance.destroyHooks.push(stop);
+  }
+  return stop;
+}
+export function computed(getter) {
+  let cachedValue, isDirty = !0;
+  return {
+    get value() {
+      if (isDirty) {
+        cachedValue = getter();
+        isDirty = !1;
+        queueMicrotask(() => {
+          isDirty = !0;
+        });
+      }
+      return cachedValue;
+    }
+  };
+}
+export function setupComponent(element, setup) {
+  const instance = createComponentInstance(element);
+  setCurrentInstance(instance);
+  try {
+    setup();
+  } finally {
+    setCurrentInstance(null);
+  }
+  return instance;
+}
+export function mountComponent(instance) {
+  if (instance.isMounted)
+    return;
+  instance.isMounted = !0;
+  for (const hook of instance.mountHooks)
+    try {
+      const cleanup = hook();
+      if (typeof cleanup === "function")
+        instance.destroyHooks.push(cleanup);
+    } catch (error) {
+      console.error("[stx] Error in onMount hook:", error);
+    }
+}
+export function updateComponent(instance) {
+  if (!instance.isMounted)
+    return;
+  for (const hook of instance.updateHooks)
+    try {
+      const cleanup = hook();
+      if (typeof cleanup === "function")
+        instance.destroyHooks.push(cleanup);
+    } catch (error) {
+      console.error("[stx] Error in onUpdate hook:", error);
+    }
+}
+export function destroyComponent(instance) {
+  if (!instance.isMounted)
+    return;
+  for (const watcher of instance.watchers)
+    watcher.stop();
+  for (const hook of instance.destroyHooks)
+    try {
+      hook();
+    } catch (error) {
+      console.error("[stx] Error in onDestroy hook:", error);
+    }
+  for (const ref of instance.refs.values())
+    ref.value = null;
+  instance.isMounted = !1;
+  instances.delete(instance.id);
+}
+export function generateLifecycleRuntime() {
+  return `
+// STX Lifecycle Runtime
+(function() {
+  if (typeof window === 'undefined') return;
+
+  const instances = new Map();
+  let currentInstance = null;
+  let idCounter = 0;
+
+  function generateId() {
+    return 'stx-' + (++idCounter) + '-' + Date.now().toString(36);
+  }
+
+  function createInstance(element) {
+    const instance = {
+      id: generateId(),
+      element: element,
+      mountHooks: [],
+      destroyHooks: [],
+      updateHooks: [],
+      refs: new Map(),
+      watchers: [],
+      isMounted: false
+    };
+    instances.set(instance.id, instance);
+    return instance;
+  }
+
+  window.STX = window.STX || {};
+
+  // Lifecycle hooks
+  window.STX.onMount = function(hook) {
+    if (currentInstance) currentInstance.mountHooks.push(hook);
+  };
+
+  window.STX.onDestroy = function(hook) {
+    if (currentInstance) currentInstance.destroyHooks.push(hook);
+  };
+
+  window.STX.onUpdate = function(hook) {
+    if (currentInstance) currentInstance.updateHooks.push(hook);
+  };
+
+  // Aliases
+  window.STX.onMounted = window.STX.onMount;
+  window.STX.onUnmounted = window.STX.onDestroy;
+  window.STX.onUpdated = window.STX.onUpdate;
+
+  // Refs
+  window.STX.ref = function(initialValue) {
+    const r = { value: initialValue || null };
+    Object.defineProperty(r, 'current', {
+      get: function() { return this.value; }
+    });
+    if (currentInstance) {
+      currentInstance.refs.set('ref-' + currentInstance.refs.size, r);
+    }
+    return r;
+  };
+
+  // Watch
+  window.STX.watch = function(source, callback, options) {
+    options = options || {};
+    let oldValue;
+    let cleanup;
+    let isActive = true;
+
+    function run() {
+      if (!isActive) return;
+      const newValue = source();
+      if (oldValue !== newValue || options.immediate) {
+        if (cleanup) cleanup();
+        cleanup = callback(newValue, oldValue);
+        oldValue = newValue;
+      }
+    }
+
+    if (options.immediate) {
+      run();
+    }
+else {
+      oldValue = source();
+    }
+
+    const intervalId = setInterval(run, 16);
+
+    function stop() {
+      isActive = false;
+      clearInterval(intervalId);
+      if (cleanup) cleanup();
+    }
+
+    if (currentInstance) {
+      currentInstance.watchers.push({ stop: stop });
+      currentInstance.destroyHooks.push(stop);
+    }
+
+    return stop;
+  };
+
+  // Computed
+  window.STX.computed = function(getter) {
+    let cached;
+    let dirty = true;
+    return {
+      get value() {
+        if (dirty) {
+          cached = getter();
+          dirty = false;
+          queueMicrotask(function() { dirty = true; });
+        }
+        return cached;
+      }
+    };
+  };
+
+  // Component management
+  window.STX.setupComponent = function(element, setup) {
+    const instance = createInstance(element);
+    currentInstance = instance;
+    try {
+      setup();
+    }
+finally {
+      currentInstance = null;
+    }
+    return instance;
+  };
+
+  window.STX.mountComponent = function(instance) {
+    if (instance.isMounted) return;
+    instance.isMounted = true;
+    instance.mountHooks.forEach(function(hook) {
+      try {
+        const cleanup = hook();
+        if (typeof cleanup === 'function') {
+          instance.destroyHooks.push(cleanup);
+        }
+      }
+catch (e) {
+        console.error('[stx] onMount error:', e);
+      }
+    });
+  };
+
+  window.STX.destroyComponent = function(instance) {
+    if (!instance.isMounted) return;
+    instance.watchers.forEach(function(w) { w.stop(); });
+    instance.destroyHooks.forEach(function(hook) {
+      try { hook(); }
+catch (e) { console.error('[stx] onDestroy error:', e); }
+    });
+    instance.refs.forEach(function(ref) { ref.value = null; });
+    instance.isMounted = false;
+    instances.delete(instance.id);
+  };
+
+  // ==========================================================================
+  // Vue-Style Refs System - No document.** required!
+  // ==========================================================================
+
+  // Internal: Query for ref elements without exposing document API
+  function queryRef(name, root) {
+    return (root || document).querySelector('[data-stx-ref="' + name + '"], [data-ref="' + name + '"]');
+  }
+
+  function queryAllRefs(root) {
+    return (root || document).querySelectorAll('[data-stx-ref], [data-ref]');
+  }
+
+  // Auto-bind refs from ref attributes (Vue-style)
+  window.STX.bindRefs = function(root, refs) {
+    if (!root) return;
+    queryAllRefs(root).forEach(function(el) {
+      var refName = el.getAttribute('data-stx-ref') || el.getAttribute('data-ref');
+      if (refs[refName]) {
+        refs[refName].value = el;
+      }
+    });
+  };
+
+  // Vue-style useRefs() - returns object with all refs as direct elements
+  // Usage: const { input, button, container } = STX.useRefs()
+  window.STX.useRefs = function(root) {
+    var refs = {};
+    queryAllRefs(root).forEach(function(el) {
+      var refName = el.getAttribute('data-stx-ref') || el.getAttribute('data-ref');
+      if (refName) {
+        refs[refName] = el;
+      }
+    });
+    return refs;
+  };
+
+  // Get a single ref by name - Vue's useTemplateRef equivalent
+  // Usage: const input = STX.useRef('input')
+  window.STX.useRef = function(name, root) {
+    return queryRef(name, root);
+  };
+
+  // Two-way binding helper for form elements
+  // Usage: STX.model(inputEl, state, 'username')
+  window.STX.model = function(el, state, key) {
+    if (!el || !state) return;
+
+    var isCheckbox = el.type === 'checkbox';
+    var isRadio = el.type === 'radio';
+    var isSelect = el.tagName === 'SELECT';
+
+    // Set initial value
+    if (isCheckbox) {
+      el.checked = !!state[key];
+    }
+else if (isRadio) {
+      el.checked = el.value === state[key];
+    }
+else {
+      el.value = state[key] || '';
+    }
+
+    // Listen for changes
+    var eventType = isCheckbox || isRadio ? 'change' : 'input';
+    el.addEventListener(eventType, function() {
+      if (isCheckbox) {
+        state[key] = el.checked;
+      }
+else if (isRadio) {
+        if (el.checked) state[key] = el.value;
+      }
+else {
+        state[key] = el.value;
+      }
+    });
+
+    // Return cleanup function
+    return function() {
+      el.removeEventListener(eventType, arguments.callee);
+    };
+  };
+
+  // Batch event binding helper - cleaner than manual addEventListener
+  // Usage: STX.on({ click: [btn1, btn2], input: [textField] }, handler)
+  window.STX.on = function(el, event, handler) {
+    if (!el) return function() {};
+    el.addEventListener(event, handler);
+    return function() { el.removeEventListener(event, handler); };
+  };
+
+  // Bind multiple events at once
+  // Usage: STX.events(refs.btn, { click: handleClick, mouseenter: handleHover })
+  window.STX.events = function(el, eventMap) {
+    if (!el) return function() {};
+    var cleanups = [];
+    Object.keys(eventMap).forEach(function(event) {
+      el.addEventListener(event, eventMap[event]);
+      cleanups.push(function() { el.removeEventListener(event, eventMap[event]); });
+    });
+    return function() { cleanups.forEach(function(c) { c(); }); };
+  };
+
+  // ==========================================================================
+  // DOM Helpers - Eliminate document.* usage
+  // ==========================================================================
+
+  // Global keyboard event listener
+  // Usage: STX.onKey('Escape', () => closeModal())
+  window.STX.onKey = function(key, handler, options) {
+    var listener = function(e) {
+      if (e.key === key) {
+        handler(e);
+      }
+    };
+    document.addEventListener('keydown', listener, options);
+    return function() { document.removeEventListener('keydown', listener, options); };
+  };
+
+  // Create element helper
+  // Usage: STX.el('div', { class: 'foo' }, 'text content')
+  window.STX.el = function(tag, attrs, content) {
+    var el = document.createElement(tag);
+    if (attrs) {
+      Object.keys(attrs).forEach(function(key) {
+        if (key === 'class') {
+          el.className = attrs[key];
+        }
+else if (key.startsWith('on')) {
+          el.addEventListener(key.slice(2).toLowerCase(), attrs[key]);
+        }
+else {
+          el.setAttribute(key, attrs[key]);
+        }
+      });
+    }
+    if (content) {
+      if (typeof content === 'string') {
+        el.textContent = content;
+      }
+else if (Array.isArray(content)) {
+        content.forEach(function(child) { el.appendChild(child); });
+      }
+else {
+        el.appendChild(content);
+      }
+    }
+    return el;
+  };
+
+  // Get currently focused element
+  // Usage: const focused = STX.activeElement()
+  window.STX.activeElement = function() {
+    return document.activeElement;
+  };
+
+  // Escape HTML helper
+  // Usage: const safe = STX.escapeHtml(userInput)
+  window.STX.escapeHtml = function(text) {
+    var div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  };
+
+  // MutationObserver for automatic lifecycle management
+  const observer = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      // Handle removed nodes
+      mutation.removedNodes.forEach(function(node) {
+        if (node.nodeType === 1 && node.__stx_instance__) {
+          window.STX.destroyComponent(node.__stx_instance__);
+        }
+      });
+    });
+  });
+
+  // Start observing when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+      observer.observe(document.body, { childList: true, subtree: true });
+    });
+  }
+else {
+    observer.observe(document.body, { childList: true, subtree: true });
+  }
+
+  console.log('[stx] Lifecycle runtime initialized');
+})();
+`;
+}
+const injectionContext = new Map, injectionScopes = [];
+export function createInjectionKey(description) {
+  return Symbol(description);
+}
+export function provide(key, value) {
+  (injectionScopes.length > 0 ? injectionScopes[injectionScopes.length - 1] : injectionContext).set(key, value);
+}
+export function inject(key, defaultValue) {
+  for (let i = injectionScopes.length - 1;i >= 0; i--) {
+    const scope = injectionScopes[i];
+    if (scope.has(key))
+      return scope.get(key);
+  }
+  if (injectionContext.has(key))
+    return injectionContext.get(key);
+  if (arguments.length > 1)
+    return defaultValue;
+  console.warn(`[stx] Injection "${String(key)}" not found.`);
+  return;
+}
+export function pushInjectionScope() {
+  injectionScopes.push(new Map);
+}
+export function popInjectionScope() {
+  injectionScopes.pop();
+}
+export async function withInjectionScope(fn) {
+  pushInjectionScope();
+  try {
+    return await fn();
+  } finally {
+    popInjectionScope();
+  }
+}
+export function clearInjections() {
+  injectionContext.clear();
+  injectionScopes.length = 0;
+}
+export const ThemeKey = createInjectionKey("theme"), RouterKey = createInjectionKey("router"), I18nKey = createInjectionKey("i18n");
+
+export { ref as createRef };