@stacksjs/stx 0.2.94 → 0.2.96

package/dist/chunk-fs0qezn5.js

@@ -1,341 +0,0 @@
-// @bun
-var J=0;function K(){return`suspense-${++J}-${Date.now().toString(36)}`}function N(q,v={},w){let j=/@suspense(?:\s*\(([^)]*)\))?\s*([\s\S]*?)@fallback\s*([\s\S]*?)@endsuspense/gi;return q.replace(j,(z,A,B,D)=>{let E=K(),F=L(A||"");return M(E,B.trim(),D.trim(),F)})}function L(q){let v={},w=/(\w+)\s*:\s*(?:'([^']*)'|"([^"]*)"|(\d+)|(\w+))/g,j;while((j=w.exec(q))!==null){let z=j[1],A=j[2]||j[3],B=j[4];switch(z){case"id":v.id=A;break;case"timeout":v.timeout=B?parseInt(B,10):void 0;break}}return v}function M(q,v,w,j){let z=j.timeout||30000,A=j.id||q;return`
-<div class="stx-suspense" data-suspense-id="${q}" data-custom-id="${A}" data-status="pending">
-  <div class="stx-suspense-fallback" data-suspense-fallback="${q}">
-    ${w}
-  </div>
-  <div class="stx-suspense-content" data-suspense-content="${q}" style="display: none;">
-    ${v}
-  </div>
-</div>
-<script>
-(function() {
-  const suspenseId = '${q}';
-  const customId = '${A}';
-  const timeout = ${z};
-
-  const container = document.querySelector('[data-suspense-id="' + suspenseId + '"]');
-  const fallbackEl = document.querySelector('[data-suspense-fallback="' + suspenseId + '"]');
-  const contentEl = document.querySelector('[data-suspense-content="' + suspenseId + '"]');
-
-  if (!container || !fallbackEl || !contentEl) return;
-
-  // State
-  const pending = new Set();
-  const resolved = new Set();
-  let status = 'pending';
-  let error = null;
-  let timeoutTimer = null;
-
-  // Update UI based on state
-  function updateUI() {
-    container.setAttribute('data-status', status);
-
-    if (status === 'resolved') {
-      fallbackEl.style.display = 'none';
-      contentEl.style.display = '';
-    }
-else if (status === 'rejected') {
-      fallbackEl.style.display = 'none';
-      contentEl.style.display = '';
-      // Show error in content area if needed
-    }
-else {
-      fallbackEl.style.display = '';
-      contentEl.style.display = 'none';
-    }
-  }
-
-  // Check if all children are resolved
-  function checkResolved() {
-    if (pending.size === 0 && resolved.size > 0) {
-      clearTimeout(timeoutTimer);
-      status = 'resolved';
-      updateUI();
-
-      container.dispatchEvent(new CustomEvent('stx:suspense:resolved', {
-        detail: { suspenseId: suspenseId, customId: customId },
-        bubbles: true
-      }));
-    }
-  }
-
-  // Register an async child
-  function register(childId) {
-    if (status === 'resolved') {
-      // Reset if we get a new child after resolution
-      status = 'pending';
-      updateUI();
-    }
-    pending.add(childId);
-
-    // Start timeout on first registration
-    if (pending.size === 1 && !timeoutTimer) {
-      timeoutTimer = setTimeout(function() {
-        if (status === 'pending') {
-          error = new Error('Suspense timeout after ' + timeout + 'ms');
-          status = 'rejected';
-          updateUI();
-
-          container.dispatchEvent(new CustomEvent('stx:suspense:timeout', {
-            detail: { suspenseId: suspenseId, customId: customId, pending: Array.from(pending) },
-            bubbles: true
-          }));
-        }
-      }, timeout);
-    }
-  }
-
-  // Resolve a child
-  function resolve(childId) {
-    pending.delete(childId);
-    resolved.add(childId);
-    checkResolved();
-  }
-
-  // Reject a child
-  function reject(childId, err) {
-    pending.delete(childId);
-    error = err;
-    status = 'rejected';
-    clearTimeout(timeoutTimer);
-    updateUI();
-
-    container.dispatchEvent(new CustomEvent('stx:suspense:error', {
-      detail: { suspenseId: suspenseId, customId: customId, error: err, childId: childId },
-      bubbles: true
-    }));
-  }
-
-  // Reset the boundary
-  function reset() {
-    pending.clear();
-    resolved.clear();
-    status = 'pending';
-    error = null;
-    clearTimeout(timeoutTimer);
-    timeoutTimer = null;
-    updateUI();
-  }
-
-  // Expose API globally for async components to use
-  window.STX = window.STX || {};
-  window.STX.suspense = window.STX.suspense || {
-    boundaries: {},
-    // Find the nearest suspense boundary for a child
-    findBoundary: function(element) {
-      const boundary = element.closest('[data-suspense-id]');
-      if (boundary) {
-        return boundary.getAttribute('data-suspense-id');
-      }
-      return null;
-    },
-    register: function(childId, boundaryId) {
-      if (!boundaryId) {
-        // Find nearest boundary
-        const asyncEl = document.querySelector('[data-async-id="' + childId + '"]');
-        if (asyncEl) {
-          boundaryId = this.findBoundary(asyncEl);
-        }
-      }
-      if (boundaryId && this.boundaries[boundaryId]) {
-        this.boundaries[boundaryId].register(childId);
-      }
-    },
-    resolve: function(childId, boundaryId) {
-      if (!boundaryId) {
-        const asyncEl = document.querySelector('[data-async-id="' + childId + '"]');
-        if (asyncEl) {
-          boundaryId = this.findBoundary(asyncEl);
-        }
-      }
-      if (boundaryId && this.boundaries[boundaryId]) {
-        this.boundaries[boundaryId].resolve(childId);
-      }
-    },
-    reject: function(childId, error, boundaryId) {
-      if (!boundaryId) {
-        const asyncEl = document.querySelector('[data-async-id="' + childId + '"]');
-        if (asyncEl) {
-          boundaryId = this.findBoundary(asyncEl);
-        }
-      }
-      if (boundaryId && this.boundaries[boundaryId]) {
-        this.boundaries[boundaryId].reject(childId, error);
-      }
-    }
-  };
-
-  // Register this boundary
-  window.STX.suspense.boundaries[suspenseId] = {
-    id: suspenseId,
-    customId: customId,
-    getStatus: function() { return status; },
-    getPending: function() { return Array.from(pending); },
-    getResolved: function() { return Array.from(resolved); },
-    getError: function() { return error; },
-    register: register,
-    resolve: resolve,
-    reject: reject,
-    reset: reset
-  };
-
-  // Initial state - if no async children register within a tick, show content
-  setTimeout(function() {
-    if (pending.size === 0 && resolved.size === 0) {
-      status = 'resolved';
-      updateUI();
-    }
-  }, 0);
-})();
-</script>
-`}function Q(q,v,w){return{id:q,fallback:w,content:v}}async function T(q){let v=q.map((j)=>`
-<div id="stx-ssr-suspense-${j.id}" class="stx-ssr-suspense">
-  ${j.fallback}
-</div>
-`).join(`
-`);async function*w(){for(let j of q)try{let z=await j.content;yield`
-<script>
-(function() {
-  const el = document.getElementById('stx-ssr-suspense-${j.id}');
-  if (el) {
-    el.innerHTML = ${JSON.stringify(z)};
-    el.classList.add('stx-ssr-suspense-resolved');
-  }
-})();
-</script>
-`}catch(z){yield`
-<script>
-(function() {
-  const el = document.getElementById('stx-ssr-suspense-${j.id}');
-  if (el) {
-    el.classList.add('stx-ssr-suspense-error');
-    console.error('SSR Suspense error for ${j.id}:', ${JSON.stringify(String(z))});
-  }
-})();
-</script>
-`}}return{initial:v,streaming:w()}}function U(){return`
-/* STX Suspense Styles */
-.stx-suspense {
-  position: relative;
-}
-
-.stx-suspense[data-status="pending"] .stx-suspense-fallback {
-  display: block;
-}
-
-.stx-suspense[data-status="pending"] .stx-suspense-content {
-  display: none;
-}
-
-.stx-suspense[data-status="resolved"] .stx-suspense-fallback {
-  display: none;
-}
-
-.stx-suspense[data-status="resolved"] .stx-suspense-content {
-  display: block;
-}
-
-/* SSR Suspense */
-.stx-ssr-suspense {
-  transition: opacity 0.3s ease;
-}
-
-.stx-ssr-suspense-resolved {
-  animation: stx-suspense-fade-in 0.3s ease;
-}
-
-@keyframes stx-suspense-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-/* Skeleton fallback helper */
-.stx-suspense-skeleton {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200% 100%;
-  animation: stx-suspense-shimmer 1.5s infinite;
-  border-radius: 0.25rem;
-}
-
-@keyframes stx-suspense-shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .stx-suspense-skeleton {
-    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
-    background-size: 200% 100%;
-  }
-}
-`}function W(){return`
-// STX Suspense Runtime
-(function() {
-  if (typeof window === 'undefined') return;
-
-  window.STX = window.STX || {};
-
-  // Suspense boundary management is set up per-boundary in the HTML
-  // This just provides additional utilities
-
-  window.STX.suspense = window.STX.suspense || {
-    boundaries: {},
-    findBoundary: function(element) {
-      const boundary = element.closest('[data-suspense-id]');
-      return boundary ? boundary.getAttribute('data-suspense-id') : null;
-    },
-    register: function(childId, boundaryId) {},
-    resolve: function(childId, boundaryId) {},
-    reject: function(childId, error, boundaryId) {}
-  };
-
-  // Wait for all suspense boundaries to resolve
-  window.STX.suspense.waitForAll = function() {
-    return new Promise(function(resolve, reject) {
-      const boundaries = Object.values(window.STX.suspense.boundaries);
-      if (boundaries.length === 0) {
-        resolve();
-        return;
-      }
-
-      let resolved = 0;
-      let rejected = false;
-
-      boundaries.forEach(function(boundary) {
-        if (boundary.getStatus() === 'resolved') {
-          resolved++;
-          if (resolved === boundaries.length) resolve();
-        }
-else if (boundary.getStatus() === 'rejected') {
-          if (!rejected) {
-            rejected = true;
-            reject(boundary.getError());
-          }
-        }
-else {
-          // Listen for resolution
-          const container = document.querySelector('[data-suspense-id="' + boundary.id + '"]');
-          if (container) {
-            container.addEventListener('stx:suspense:resolved', function() {
-              resolved++;
-              if (resolved === boundaries.length && !rejected) resolve();
-            }, { once: true });
-
-            container.addEventListener('stx:suspense:error', function(e) {
-              if (!rejected) {
-                rejected = true;
-                reject(e.detail.error);
-              }
-            }, { once: true });
-          }
-        }
-      });
-    });
-  };
-
-  console.log('[stx] Suspense runtime initialized');
-})();
-`}
-export{N as Gf,Q as Hf,T as If,U as Jf,W as Kf};

package/dist/chunk-fzm3y0r3.js

@@ -1,267 +0,0 @@
-// @bun
-var A=[{key:"k",modifiers:["meta"],description:"Open search",category:"Navigation",action:"openSearch"},{key:"ArrowUp",description:"Previous story",category:"Navigation",action:"prevStory"},{key:"ArrowDown",description:"Next story",category:"Navigation",action:"nextStory"},{key:"ArrowLeft",description:"Previous variant",category:"Navigation",action:"prevVariant"},{key:"ArrowRight",description:"Next variant",category:"Navigation",action:"nextVariant"},{key:"Enter",description:"Select story",category:"Navigation",action:"selectStory"},{key:"Escape",description:"Close panel/modal",category:"Navigation",action:"closePanel"},{key:"d",description:"Toggle dark mode",category:"View",action:"toggleDarkMode"},{key:"f",description:"Toggle fullscreen",category:"View",action:"toggleFullscreen"},{key:"s",description:"Toggle sidebar",category:"View",action:"toggleSidebar"},{key:"a",description:"Toggle addons panel",category:"View",action:"toggleAddons"},{key:"z",description:"Zoom in",category:"View",action:"zoomIn"},{key:"x",description:"Zoom out",category:"View",action:"zoomOut"},{key:"0",description:"Reset zoom",category:"View",action:"resetZoom"},{key:"r",description:"Reload story",category:"Actions",action:"reloadStory"},{key:"c",description:"Copy story code",category:"Actions",action:"copyCode"},{key:"p",description:"Open props panel",category:"Actions",action:"openProps"},{key:"b",description:"Toggle bookmark",category:"Actions",action:"toggleBookmark"},{key:"t",description:"Run tests",category:"Actions",action:"runTests"},{key:"?",description:"Show shortcuts",category:"Help",action:"showShortcuts"}];function B(w){let q=[];if(w.modifiers)for(let v of w.modifiers)switch(v){case"meta":q.push("\u2318");break;case"ctrl":q.push("Ctrl");break;case"alt":q.push("Alt");break;case"shift":q.push("\u21E7");break}let j=w.key;switch(j){case"ArrowUp":j="\u2191";break;case"ArrowDown":j="\u2193";break;case"ArrowLeft":j="\u2190";break;case"ArrowRight":j="\u2192";break;case"Enter":j="\u21B5";break;case"Escape":j="Esc";break;default:j=j.toUpperCase()}return q.push(j),q.join(" + ")}function C(w=A){let q=new Map;for(let v of w){let x=q.get(v.category)||[];x.push(v),q.set(v.category,x)}return`
-    <div class="shortcuts-modal" id="shortcuts-modal" style="display: none;">
-      <div class="shortcuts-backdrop" onclick="closeShortcutsModal()"></div>
-      <div class="shortcuts-content">
-        <div class="shortcuts-header">
-          <h3>Keyboard Shortcuts</h3>
-          <button class="shortcuts-close" onclick="closeShortcutsModal()">\xD7</button>
-        </div>
-        <div class="shortcuts-body">
-          ${Array.from(q.entries()).map(([v,x])=>`
-    <div class="shortcuts-category">
-      <h4>${v}</h4>
-      <div class="shortcuts-list">
-        ${x.map((z)=>`
-          <div class="shortcut-item">
-            <span class="shortcut-desc">${z.description}</span>
-            <kbd class="shortcut-key">${B(z)}</kbd>
-          </div>
-        `).join("")}
-      </div>
-    </div>
-  `).join("")}
-        </div>
-      </div>
-    </div>
-  `}function D(){return`
-    .shortcuts-modal {
-      position: fixed;
-      inset: 0;
-      z-index: 1000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .shortcuts-backdrop {
-      position: absolute;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.5);
-    }
-    .shortcuts-content {
-      position: relative;
-      background: var(--bg);
-      border-radius: 12px;
-      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-      max-width: 600px;
-      max-height: 80vh;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-    .shortcuts-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 16px 20px;
-      border-bottom: 1px solid var(--border);
-    }
-    .shortcuts-header h3 {
-      margin: 0;
-      font-size: 16px;
-    }
-    .shortcuts-close {
-      background: none;
-      border: none;
-      font-size: 24px;
-      cursor: pointer;
-      color: var(--text-secondary);
-      padding: 0;
-      line-height: 1;
-    }
-    .shortcuts-body {
-      padding: 20px;
-      overflow-y: auto;
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 24px;
-    }
-    .shortcuts-category h4 {
-      margin: 0 0 12px;
-      font-size: 12px;
-      text-transform: uppercase;
-      color: var(--text-secondary);
-      letter-spacing: 0.5px;
-    }
-    .shortcuts-list {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-    .shortcut-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 12px;
-    }
-    .shortcut-desc {
-      font-size: 13px;
-      color: var(--text);
-    }
-    .shortcut-key {
-      font-family: monospace;
-      font-size: 11px;
-      padding: 4px 8px;
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      color: var(--text-secondary);
-      white-space: nowrap;
-    }
-  `}function E(){return`
-<script>
-window.__stxShortcuts = {
-  shortcuts: ${JSON.stringify(A)},
-
-  init() {
-    document.addEventListener('keydown', this.handleKeydown.bind(this));
-  },
-
-  handleKeydown(event) {
-    // Don't handle if typing in input
-    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
-      return;
-    }
-
-    const shortcut = this.findShortcut(event);
-    if (shortcut) {
-      event.preventDefault();
-      this.executeAction(shortcut.action);
-    }
-  },
-
-  findShortcut(event) {
-    return this.shortcuts.find(s => {
-      if (s.key.toLowerCase() !== event.key.toLowerCase()) return false;
-
-      const mods = s.modifiers || [];
-      if (mods.includes('meta') !== event.metaKey) return false;
-      if (mods.includes('ctrl') !== event.ctrlKey) return false;
-      if (mods.includes('alt') !== event.altKey) return false;
-      if (mods.includes('shift') !== event.shiftKey) return false;
-
-      return true;
-    });
-  },
-
-  executeAction(action) {
-    switch (action) {
-      case 'openSearch':
-        document.getElementById('search-input')?.focus();
-        break;
-      case 'prevStory':
-        this.navigateStory(-1);
-        break;
-      case 'nextStory':
-        this.navigateStory(1);
-        break;
-      case 'prevVariant':
-        this.navigateVariant(-1);
-        break;
-      case 'nextVariant':
-        this.navigateVariant(1);
-        break;
-      case 'selectStory':
-        document.querySelector('.story-item.focused')?.click();
-        break;
-      case 'closePanel':
-        this.closeActivePanel();
-        break;
-      case 'toggleDarkMode':
-        document.documentElement.classList.toggle('dark');
-        break;
-      case 'toggleFullscreen':
-        this.toggleFullscreen();
-        break;
-      case 'toggleSidebar':
-        document.querySelector('.sidebar')?.classList.toggle('hidden');
-        break;
-      case 'toggleAddons':
-        document.querySelector('.addons-panel')?.classList.toggle('hidden');
-        break;
-      case 'zoomIn':
-        window.__stxStory?.zoomIn?.();
-        break;
-      case 'zoomOut':
-        window.__stxStory?.zoomOut?.();
-        break;
-      case 'resetZoom':
-        window.__stxStory?.resetZoom?.();
-        break;
-      case 'reloadStory':
-        window.__stxStory?.reloadCurrentStory?.();
-        break;
-      case 'copyCode':
-        window.__stxStory?.copyCode?.();
-        break;
-      case 'openProps':
-        document.querySelector('[data-panel="props"]')?.click();
-        break;
-      case 'toggleBookmark':
-        window.__stxBookmarks?.toggleCurrent?.();
-        break;
-      case 'runTests':
-        window.__stxStory?.runTests?.();
-        break;
-      case 'showShortcuts':
-        this.showModal();
-        break;
-    }
-  },
-
-  navigateStory(direction) {
-    const items = Array.from(document.querySelectorAll('.story-item'));
-    const current = document.querySelector('.story-item.active');
-    const currentIndex = current ? items.indexOf(current) : -1;
-    const nextIndex = Math.max(0, Math.min(items.length - 1, currentIndex + direction));
-    items[nextIndex]?.click();
-  },
-
-  navigateVariant(direction) {
-    const buttons = Array.from(document.querySelectorAll('.variant-btn'));
-    const current = document.querySelector('.variant-btn.active');
-    const currentIndex = current ? buttons.indexOf(current) : -1;
-    const nextIndex = Math.max(0, Math.min(buttons.length - 1, currentIndex + direction));
-    buttons[nextIndex]?.click();
-  },
-
-  closeActivePanel() {
-    const modal = document.querySelector('.shortcuts-modal[style*="flex"]');
-    if (modal) {
-      closeShortcutsModal();
-      return;
-    }
-    // Close other panels
-    document.querySelector('.panel.open')?.classList.remove('open');
-  },
-
-  toggleFullscreen() {
-    if (document.fullscreenElement) {
-      document.exitFullscreen();
-    }
-else {
-      document.documentElement.requestFullscreen();
-    }
-  },
-
-  showModal() {
-    const modal = document.getElementById('shortcuts-modal');
-    if (modal) modal.style.display = 'flex';
-  }
-};
-
-function closeShortcutsModal() {
-  const modal = document.getElementById('shortcuts-modal');
-  if (modal) modal.style.display = 'none';
-}
-
-// Initialize on load
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', () => window.__stxShortcuts.init());
-}
-else {
-  window.__stxShortcuts.init();
-}
-</script>
-`}
-export{A as Ub,B as Vb,C as Wb,D as Xb,E as Yb};