@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/chunk-acn1b56m.js

@@ -0,0 +1,1280 @@
+// @bun
+import{a as x,b as u,c as b,d as Az,e as G,f as d,h as y,i as I,j as Uz,k as v}from"./chunk-0y46fbkx.js";import{l as h,m as f,n as g}from"./chunk-q9n5swx7.js";import{to as V}from"./chunk-y11cxbxd.js";import"./chunk-92mj1t26.js";import"./chunk-8mjdpr94.js";import"./chunk-pkaabd8h.js";import"./chunk-xpp135ad.js";import"./chunk-wrzwgkbx.js";import"./chunk-5kk8gsj2.js";import"./chunk-38ejahd9.js";import"./chunk-ypmqf7tm.js";import"./chunk-de7fye10.js";import"./chunk-v5e1gxwm.js";import"./chunk-b6ej2fdf.js";import"./chunk-x650vjcp.js";import{gv as F}from"./chunk-qc1f74ek.js";import l from"fs";import R from"path";function m(z,J){let Z=[R.join(z.root,"stx.config.ts"),R.join(z.root,"stx.config.js"),R.join(z.root,"stx.config.mjs")],K=J.debounceMs??300,$=null,X=[];for(let B of Z)try{if(!l.existsSync(B))continue;let Y=l.watch(B,(W)=>{if(W==="change"){if($)clearTimeout($);$=setTimeout(async()=>{d("Config file changed, restarting...");try{await J.onChange()}catch(j){G(`Failed to restart: ${j}`)}},K)}});X.push(Y)}catch{}return{stop(){if($)clearTimeout($);for(let B of X)B.close()}}}import E from"fs";import i from"path";var Gz=".stx/story/analytics.json",Nz=1,c=1e4;class M{storage;storagePath;currentSession=null;dirty=!1;viewStartTimes=new Map;constructor(z){this.storagePath=i.join(z,Gz),this.storage=this.loadStorage(),this.startSession()}loadStorage(){try{let z=E.readFileSync(this.storagePath,"utf-8");return JSON.parse(z)}catch{return{version:Nz,events:[],sessions:[]}}}async save(){if(!this.dirty)return;let z=i.dirname(this.storagePath);if(await E.promises.mkdir(z,{recursive:!0}),this.storage.events.length>c)this.storage.events=this.storage.events.slice(-c);await E.promises.writeFile(this.storagePath,JSON.stringify(this.storage,null,2)),this.dirty=!1}startSession(){this.endSession(),this.currentSession={id:Hz(),startTime:Date.now(),componentViews:[]},this.storage.sessions.push(this.currentSession),this.dirty=!0}endSession(){if(this.currentSession)this.currentSession.endTime=Date.now(),this.currentSession=null}track(z){this.storage.events.push({...z,timestamp:Date.now()}),this.dirty=!0}trackView(z,J){if(this.endViewTiming(z),this.viewStartTimes.set(z,Date.now()),this.track({type:"view",componentId:z,variantId:J}),this.currentSession&&!this.currentSession.componentViews.includes(z))this.currentSession.componentViews.push(z)}endViewTiming(z){let J=this.viewStartTimes.get(z);if(J){let Z=Date.now()-J;this.track({type:"view",componentId:z,metadata:{duration:Z,endView:!0}}),this.viewStartTimes.delete(z)}}trackPropChange(z,J,Z){this.track({type:"prop_change",componentId:z,propName:J,metadata:{value:Z}})}trackVariantSwitch(z,J){this.track({type:"variant_switch",componentId:z,variantId:J})}trackSearch(z,J){this.track({type:"search",query:z,metadata:{resultCount:J}})}getComponentAnalytics(z,J){let Z=this.storage.events.filter((Q)=>Q.componentId===z),K=Z.filter((Q)=>Q.type==="view"&&!Q.metadata?.endView),$=Z.filter((Q)=>Q.type==="prop_change"),X=Z.filter((Q)=>Q.type==="variant_switch"),B={};for(let Q of $)if(Q.propName)B[Q.propName]=(B[Q.propName]||0)+1;let Y={};for(let Q of X)if(Q.variantId)Y[Q.variantId]=(Y[Q.variantId]||0)+1;let W=new Set(this.storage.sessions.filter((Q)=>Q.componentViews.includes(z)).map((Q)=>Q.id)),j=Z.filter((Q)=>Q.metadata?.duration).map((Q)=>Q.metadata.duration),U=j.length>0?j.reduce((Q,D)=>Q+D,0)/j.length:0,_=Object.entries(B).sort((Q,D)=>D[1]-Q[1]).slice(0,5).map(([Q])=>Q);return{componentId:z,componentName:J,viewCount:K.length,uniqueViews:W.size,lastViewed:K[K.length-1]?.timestamp,propChanges:B,topChangedProps:_,variantViews:Y,avgTimeSpent:U}}getMostViewedComponents(z=10){let J=new Map;for(let Z of this.storage.events)if(Z.type==="view"&&Z.componentId&&!Z.metadata?.endView)J.set(Z.componentId,(J.get(Z.componentId)||0)+1);return Array.from(J.entries()).map(([Z,K])=>({componentId:Z,viewCount:K})).sort((Z,K)=>K.viewCount-Z.viewCount).slice(0,z)}getMostChangedProps(z=10){let J=new Map;for(let Z of this.storage.events)if(Z.type==="prop_change"&&Z.propName)J.set(Z.propName,(J.get(Z.propName)||0)+1);return Array.from(J.entries()).map(([Z,K])=>({propName:Z,changeCount:K})).sort((Z,K)=>K.changeCount-Z.changeCount).slice(0,z)}getSearchAnalytics(){let z=this.storage.events.filter(($)=>$.type==="search"),J=new Map,Z=0;for(let $ of z){if($.query)J.set($.query,(J.get($.query)||0)+1);if($.metadata?.resultCount!==void 0)Z+=$.metadata.resultCount}let K=Array.from(J.entries()).map(([$,X])=>({query:$,count:X})).sort(($,X)=>X.count-$.count).slice(0,10);return{totalSearches:z.length,topQueries:K,avgResultCount:z.length>0?Z/z.length:0}}clear(){this.storage.events=[],this.storage.sessions=[],this.dirty=!0,this.startSession()}exportAnalytics(){return JSON.stringify({exportedAt:Date.now(),...this.storage},null,2)}}function Hz(){return`session-${Date.now()}-${Math.random().toString(36).slice(2,8)}`}import P from"fs";import p from"path";var Fz=".stx/story/bookmarks.json",Vz=1;class T{storage;storagePath;dirty=!1;constructor(z){this.storagePath=p.join(z,Fz),this.storage=this.loadStorage()}loadStorage(){try{let z=P.readFileSync(this.storagePath,"utf-8");return JSON.parse(z)}catch{return{version:Vz,bookmarks:[]}}}async save(){if(!this.dirty)return;let z=p.dirname(this.storagePath);await P.promises.mkdir(z,{recursive:!0}),await P.promises.writeFile(this.storagePath,JSON.stringify(this.storage,null,2)),this.dirty=!1}addBookmark(z,J,Z,K={}){let $={id:Rz(),name:K.name||`${z}/${J}`,storyId:z,variantId:J,props:Z,created:Date.now(),notes:K.notes,color:K.color};return this.storage.bookmarks.push($),this.dirty=!0,$}getAllBookmarks(){return[...this.storage.bookmarks]}getBookmarksForStory(z){return this.storage.bookmarks.filter((J)=>J.storyId===z)}getBookmark(z){return this.storage.bookmarks.find((J)=>J.id===z)}isBookmarked(z,J){return this.storage.bookmarks.some((Z)=>Z.storyId===z&&Z.variantId===J)}updateBookmark(z,J){let Z=this.getBookmark(z);if(!Z)return;return Object.assign(Z,J),this.dirty=!0,Z}deleteBookmark(z){let J=this.storage.bookmarks.findIndex((Z)=>Z.id===z);if(J===-1)return!1;return this.storage.bookmarks.splice(J,1),this.dirty=!0,!0}toggleBookmark(z,J,Z){let K=this.storage.bookmarks.find((X)=>X.storyId===z&&X.variantId===J);if(K)return this.deleteBookmark(K.id),{added:!1};return{added:!0,bookmark:this.addBookmark(z,J,Z)}}exportBookmarks(){return JSON.stringify(this.storage,null,2)}importBookmarks(z,J=!0){let Z=JSON.parse(z),K=0;for(let $ of Z.bookmarks){if(J){let X=this.storage.bookmarks.find((B)=>B.id===$.id);if(X)Object.assign(X,$);else this.storage.bookmarks.push($)}else this.storage.bookmarks.push($);K++}if(K>0)this.dirty=!0;return K}}function Rz(){return`bm-${Date.now()}-${Math.random().toString(36).slice(2,8)}`}var N=new Set;function s(){return{open(z){N.add(z),z.send(JSON.stringify({type:"connected",timestamp:Date.now()}))},close(z){N.delete(z)},message(z,J){}}}function q(z){let J=JSON.stringify({...z,timestamp:z.timestamp||Date.now()});for(let Z of N)try{Z.send(J)}catch{N.delete(Z)}}function n(z,J){q({type:"story-update",data:{storyId:z,...J}})}function a(z,J){q({type:"story-add",data:{storyId:z,...J}})}function o(z){q({type:"story-remove",data:{storyId:z}})}function r(z){return`
+<script>
+(function() {
+  const ws = new WebSocket('${z}');
+
+  ws.onopen = function() {
+    console.log('[STX Story] HMR connected');
+  };
+
+  ws.onmessage = function(event) {
+    const message = JSON.parse(event.data);
+
+    switch (message.type) {
+      case 'connected':
+        console.log('[STX Story] Connected to HMR server');
+        break;
+
+      case 'story-update':
+        console.log('[STX Story] Story updated:', message.data.storyId);
+        // Reload the current story if it matches
+        if (window.__stxStory && window.__stxStory.currentStoryId === message.data.storyId) {
+          window.__stxStory.reloadCurrentStory();
+        }
+        break;
+
+      case 'story-add':
+        console.log('[STX Story] Story added:', message.data.storyId);
+        window.__stxStory && window.__stxStory.refreshStoryList();
+        break;
+
+      case 'story-remove':
+        console.log('[STX Story] Story removed:', message.data.storyId);
+        window.__stxStory && window.__stxStory.refreshStoryList();
+        break;
+
+      case 'config-change':
+        console.log('[STX Story] Config changed, reloading...');
+        location.reload();
+        break;
+
+      case 'full-reload':
+        console.log('[STX Story] Full reload requested');
+        location.reload();
+        break;
+
+      case 'error':
+        console.error('[STX Story] Error:', message.data.error);
+        break;
+    }
+  };
+
+  ws.onclose = function() {
+    console.log('[STX Story] HMR disconnected, attempting reconnect...');
+    setTimeout(function() {
+      location.reload();
+    }, 1000);
+  };
+
+  ws.onerror = function(error) {
+    console.error('[STX Story] WebSocket error:', error);
+  };
+})();
+</script>
+`}function e(){return`
+<script>
+(function() {
+  // Hot swap state
+  window.__stxHotSwap = {
+    storyId: null,
+    variantId: null,
+    props: {},
+    iframe: null,
+
+    // Initialize hot swap
+    init: function(iframeSelector) {
+      this.iframe = document.querySelector(iframeSelector);
+      if (!this.iframe) {
+        console.warn('[STX Story] Hot swap iframe not found');
+        return;
+      }
+
+      // Listen for variant changes
+      window.addEventListener('stx:variant-change', this.handleVariantChange.bind(this));
+      window.addEventListener('stx:props-change', this.handlePropsChange.bind(this));
+
+      console.log('[STX Story] Hot swap initialized');
+    },
+
+    // Handle variant change
+    handleVariantChange: function(event) {
+      const { storyId, variantId } = event.detail;
+
+      if (this.storyId === storyId && this.variantId === variantId) {
+        return; // No change
+      }
+
+      this.storyId = storyId;
+      this.variantId = variantId;
+
+      this.swapContent();
+    },
+
+    // Handle props change
+    handlePropsChange: function(event) {
+      const { props } = event.detail;
+      this.props = { ...this.props, ...props };
+      this.updateProps();
+    },
+
+    // Swap iframe content without reload
+    swapContent: async function() {
+      if (!this.iframe || !this.storyId || !this.variantId) return;
+
+      // Save scroll position
+      const scrollTop = this.iframe.contentWindow?.scrollY || 0;
+      const scrollLeft = this.iframe.contentWindow?.scrollX || 0;
+
+      // Fetch new content
+      try {
+        const response = await fetch('/api/render/' + this.storyId + '/' + this.variantId);
+        const data = await response.json();
+
+        if (data.html) {
+          // Fade out
+          this.iframe.style.opacity = '0.5';
+          this.iframe.style.transition = 'opacity 150ms ease';
+
+          // Update content
+          const doc = this.iframe.contentDocument;
+          if (doc) {
+            // Find body or create one
+            let body = doc.body;
+            if (!body) {
+              doc.write('<html><head></head><body></body></html>');
+              body = doc.body;
+            }
+
+            // Update body content
+            body.innerHTML = data.html;
+
+            // Update styles if provided
+            if (data.css) {
+              let styleEl = doc.getElementById('stx-component-styles');
+              if (!styleEl) {
+                styleEl = doc.createElement('style');
+                styleEl.id = 'stx-component-styles';
+                doc.head.appendChild(styleEl);
+              }
+              styleEl.textContent = data.css;
+            }
+
+            // Restore scroll position
+            this.iframe.contentWindow?.scrollTo(scrollLeft, scrollTop);
+          }
+
+          // Fade in
+          setTimeout(() => {
+            this.iframe.style.opacity = '1';
+          }, 50);
+
+          // Dispatch event
+          window.dispatchEvent(new CustomEvent('stx:swap-complete', {
+            detail: { storyId: this.storyId, variantId: this.variantId }
+          }));
+        }
+      }
+catch (error) {
+        console.error('[STX Story] Hot swap failed:', error);
+        // Fallback to full reload
+        this.iframe.src = '/preview/' + this.storyId + '/' + this.variantId;
+      }
+    },
+
+    // Update props in iframe without content swap
+    updateProps: function() {
+      if (!this.iframe) return;
+
+      const win = this.iframe.contentWindow;
+      if (win && win.__stxProps) {
+        Object.assign(win.__stxProps, this.props);
+
+        // Trigger re-render if component supports it
+        if (win.__stxRerender) {
+          win.__stxRerender(this.props);
+        }
+
+        window.dispatchEvent(new CustomEvent('stx:props-updated', {
+          detail: { props: this.props }
+        }));
+      }
+    },
+
+    // Select a variant
+    selectVariant: function(storyId, variantId) {
+      window.dispatchEvent(new CustomEvent('stx:variant-change', {
+        detail: { storyId, variantId }
+      }));
+    },
+
+    // Update a prop
+    updateProp: function(name, value) {
+      window.dispatchEvent(new CustomEvent('stx:props-change', {
+        detail: { props: { [name]: value } }
+      }));
+    },
+
+    // Reset props to defaults
+    resetProps: function() {
+      this.props = {};
+      this.swapContent();
+    }
+  };
+
+  // Auto-initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+      window.__stxHotSwap.init('#preview-iframe');
+    });
+  }
+else {
+    window.__stxHotSwap.init('#preview-iframe');
+  }
+})();
+</script>
+`}var t=[{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 Ez(z){let J=[];if(z.modifiers)for(let K of z.modifiers)switch(K){case"meta":J.push("\u2318");break;case"ctrl":J.push("Ctrl");break;case"alt":J.push("Alt");break;case"shift":J.push("\u21E7");break}let Z=z.key;switch(Z){case"ArrowUp":Z="\u2191";break;case"ArrowDown":Z="\u2193";break;case"ArrowLeft":Z="\u2190";break;case"ArrowRight":Z="\u2192";break;case"Enter":Z="\u21B5";break;case"Escape":Z="Esc";break;default:Z=Z.toUpperCase()}return J.push(Z),J.join(" + ")}function zz(z=t){let J=new Map;for(let K of z){let $=J.get(K.category)||[];$.push(K),J.set(K.category,$)}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(J.entries()).map(([K,$])=>`
+    <div class="shortcuts-category">
+      <h4>${K}</h4>
+      <div class="shortcuts-list">
+        ${$.map((X)=>`
+          <div class="shortcut-item">
+            <span class="shortcut-desc">${X.description}</span>
+            <kbd class="shortcut-key">${Ez(X)}</kbd>
+          </div>
+        `).join("")}
+      </div>
+    </div>
+  `).join("")}
+        </div>
+      </div>
+    </div>
+  `}function Jz(){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 Zz(){return`
+<script>
+window.__stxShortcuts = {
+  shortcuts: ${JSON.stringify(t)},
+
+  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>
+`}class $z{metrics=new Map;maxHistorySize=100;enabled=!0;setEnabled(z){this.enabled=z}recordRender(z,J,Z,K){if(!this.enabled)return;let $=this.metrics.get(z);if(!$)$={componentId:z,componentName:J,renderCount:0,totalRenderTime:0,avgRenderTime:0,minRenderTime:1/0,maxRenderTime:0,lastRenderTime:0,history:[]},this.metrics.set(z,$);$.renderCount++,$.totalRenderTime+=Z,$.avgRenderTime=$.totalRenderTime/$.renderCount,$.minRenderTime=Math.min($.minRenderTime,Z),$.maxRenderTime=Math.max($.maxRenderTime,Z),$.lastRenderTime=Z;let X=this.getMemoryUsage();if(X!==void 0)$.memoryUsage=X;if($.history.push({timestamp:Date.now(),duration:Z,props:K,memory:X}),$.history.length>this.maxHistorySize)$.history=$.history.slice(-this.maxHistorySize)}getMetrics(z){return this.metrics.get(z)}getAllMetrics(){return Array.from(this.metrics.values())}getSlowestComponents(z=10){return this.getAllMetrics().sort((J,Z)=>Z.avgRenderTime-J.avgRenderTime).slice(0,z)}getMostRenderedComponents(z=10){return this.getAllMetrics().sort((J,Z)=>Z.renderCount-J.renderCount).slice(0,z)}clear(){this.metrics.clear()}clearComponent(z){this.metrics.delete(z)}getMemoryUsage(){if(typeof performance<"u"&&"memory"in performance)return performance.memory?.usedJSHeapSize;return}exportMetrics(){return JSON.stringify({timestamp:Date.now(),metrics:this.getAllMetrics()},null,2)}createTimer(z,J){return new Yz(this,z,J)}}class Yz{profiler;componentId;componentName;startTime;props;constructor(z,J,Z){this.profiler=z;this.componentId=J;this.componentName=Z;this.startTime=performance.now()}setProps(z){return this.props=z,this}end(){let z=performance.now()-this.startTime;return this.profiler.recordRender(this.componentId,this.componentName,z,this.props),z}}var tz=new $z;function Kz(){return`
+<script>
+window.__stxPerformance = {
+  metrics: new Map(),
+
+  recordRender(componentId, componentName, duration, props) {
+    let m = this.metrics.get(componentId);
+    if (!m) {
+      m = {
+        componentId,
+        componentName,
+        renderCount: 0,
+        totalRenderTime: 0,
+        avgRenderTime: 0,
+        minRenderTime: Infinity,
+        maxRenderTime: 0,
+        lastRenderTime: 0,
+        history: []
+      };
+      this.metrics.set(componentId, m);
+    }
+
+    m.renderCount++;
+    m.totalRenderTime += duration;
+    m.avgRenderTime = m.totalRenderTime / m.renderCount;
+    m.minRenderTime = Math.min(m.minRenderTime, duration);
+    m.maxRenderTime = Math.max(m.maxRenderTime, duration);
+    m.lastRenderTime = duration;
+
+    m.history.push({ timestamp: Date.now(), duration, props });
+    if (m.history.length > 100) m.history.shift();
+
+    this.updatePanel();
+  },
+
+  getMetrics() {
+    return Array.from(this.metrics.values());
+  },
+
+  clear() {
+    this.metrics.clear();
+    this.updatePanel();
+  },
+
+  updatePanel() {
+    const panel = document.getElementById('performance-panel');
+    if (panel) {
+      // Update panel content
+      window.dispatchEvent(new CustomEvent('stx:performance-update', {
+        detail: { metrics: this.getMetrics() }
+      }));
+    }
+  },
+
+  // Timer helper
+  startTimer(componentId, componentName) {
+    const start = performance.now();
+    return {
+      end: (props) => {
+        const duration = performance.now() - start;
+        this.recordRender(componentId, componentName, duration, props);
+        return duration;
+      }
+    };
+  }
+};
+
+window.clearPerformanceMetrics = () => window.__stxPerformance.clear();
+</script>
+`}import w from"fs";import Xz from"path";var Mz=".stx/story/presets.json",C=1,Pz=10;class k{storage;storagePath;dirty=!1;constructor(z){this.storagePath=Xz.join(z,Mz),this.storage=this.loadStorage()}loadStorage(){try{let z=w.readFileSync(this.storagePath,"utf-8"),J=JSON.parse(z);if(J.version!==C)return this.migrateStorage(J);return J}catch{return{version:C,presets:[],recentIds:[]}}}migrateStorage(z){return{version:C,presets:z.presets||[],recentIds:z.recentIds||[]}}async save(){if(!this.dirty)return;let z=Xz.dirname(this.storagePath);await w.promises.mkdir(z,{recursive:!0}),await w.promises.writeFile(this.storagePath,JSON.stringify(this.storage,null,2)),this.dirty=!1}createPreset(z,J,Z={}){let K={id:Tz(),name:z,description:Z.description,props:J,componentId:Z.componentId,created:Date.now(),usageCount:0,tags:Z.tags};return this.storage.presets.push(K),this.dirty=!0,K}getPreset(z){return this.storage.presets.find((J)=>J.id===z)}getAllPresets(){return[...this.storage.presets]}getPresetsForComponent(z){return this.storage.presets.filter((J)=>!J.componentId||J.componentId===z)}getRecentPresets(){return this.storage.recentIds.map((z)=>this.getPreset(z)).filter((z)=>z!==void 0)}usePreset(z){let J=this.getPreset(z);if(!J)return;return J.lastUsed=Date.now(),J.usageCount++,this.storage.recentIds=[z,...this.storage.recentIds.filter((Z)=>Z!==z)].slice(0,Pz),this.dirty=!0,J}updatePreset(z,J){let Z=this.getPreset(z);if(!Z)return;return Object.assign(Z,J),this.dirty=!0,Z}deletePreset(z){let J=this.storage.presets.findIndex((Z)=>Z.id===z);if(J===-1)return!1;return this.storage.presets.splice(J,1),this.storage.recentIds=this.storage.recentIds.filter((Z)=>Z!==z),this.dirty=!0,!0}searchPresets(z){let J=z.toLowerCase();return this.storage.presets.filter((Z)=>{if(Z.name.toLowerCase().includes(J))return!0;if(Z.description?.toLowerCase().includes(J))return!0;if(Z.tags?.some((K)=>K.toLowerCase().includes(J)))return!0;return!1})}getMostUsedPresets(z=5){return[...this.storage.presets].sort((J,Z)=>Z.usageCount-J.usageCount).slice(0,z)}exportPresets(z){let J=z?this.storage.presets.filter((Z)=>z.includes(Z.id)):this.storage.presets;return JSON.stringify({presets:J},null,2)}importPresets(z,J=!1){let Z=JSON.parse(z),K=0;for(let $ of Z.presets){let X=this.storage.presets.find((B)=>B.id===$.id);if(X&&!J)continue;if(X)Object.assign(X,$);else this.storage.presets.push($);K++}if(K>0)this.dirty=!0;return K}}function Tz(){return`preset-${Date.now()}-${Math.random().toString(36).slice(2,8)}`}import S from"fs";var Qz=new Map;async function H(z,J,Z={}){let K=performance.now(),$=[];try{let X=await S.promises.stat(J),B=Qz.get(J),Y;if(B&&B.mtime===X.mtimeMs)Y=B.content;else Y=await S.promises.readFile(J,"utf-8"),Qz.set(J,{content:Y,mtime:X.mtimeMs,analyzed:null});let{processDirectives:W}=await import("./chunk-r7r66978.js"),j={},U=A(Y);if(U)try{await V(U,j,J)}catch(O){$.push(`Warning: Could not extract script variables: ${O instanceof Error?O.message:String(O)}`)}if(Z.props)Object.assign(j,Z.props);let Q=await W(Y,j,J,{},new Set),D=Wz(Y),L=A(Y);return Q=jz(Q),Q=Dz(Q,j),{html:Q,css:D,js:L,errors:$,duration:performance.now()-K}}catch(X){return $.push(X instanceof Error?X.message:String(X)),{html:`<div class="stx-render-error">${Lz($[0])}</div>`,css:"",js:"",errors:$,duration:performance.now()-K}}}async function qz(z){try{let J=await S.promises.readFile(z,"utf-8"),Z=A(J);if(!Z)return null;let K={};if(await V(Z,K,z),Array.isArray(K.variants))return K.variants;return null}catch{return null}}async function Bz(z,J,Z,K){let $=J.story?.variants;if(!$){let Y=await qz(J.path);if(Y)$=Y}if(!$&&Z==="default")return H(z,J.path,{props:K||{}});if(!$)return H(z,J.path,{props:K||{}});let X=$.find((Y)=>Y.id===Z);if(!X&&Z==="default")return H(z,J.path,{props:K||{}});if(!X)return{html:'<div class="stx-render-error">Variant not found</div>',css:"",js:"",errors:[`Variant '${Z}' not found`],duration:0};let B={...X.state,...K};if(X.source)return wz(z,X.source,B);return H(z,J.path,{props:B})}async function wz(z,J,Z={}){let K=performance.now(),$=[];try{let{processDirectives:X}=await import("./chunk-r7r66978.js"),B={...Z},Y=A(J);if(Y)try{await V(Y,B,"inline-template.stx")}catch{}let j=await X(J,B,"inline-template.stx",{},new Set);return j=jz(j),j=Dz(j,B),{html:j,css:Wz(J),js:A(J),errors:$,duration:performance.now()-K}}catch(X){return $.push(X instanceof Error?X.message:String(X)),{html:`<div class="stx-render-error">${Lz($[0])}</div>`,css:"",js:"",errors:$,duration:performance.now()-K}}}function Wz(z){let J=[],Z=/<style\b[^>]*>([\s\S]*?)<\/style>/gi,K=Z.exec(z);while(K!==null)J.push(K[1].trim()),K=Z.exec(z);return J.join(`
+`)}function jz(z){return z.replace(/<!--[\s\S]*?-->/g,"").replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi,"").replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi,"").replace(/^\s*\n/gm,"").trim()}function A(z){let J=[],Z=/<script\b[^>]*>([\s\S]*?)<\/script>/gi,K=Z.exec(z);while(K!==null)J.push(K[1].trim()),K=Z.exec(z);return J.join(`
+`)}function Dz(z,J){let Z=`<script>window.__stxProps = ${JSON.stringify(J)};</script>`;return z+Z}function Lz(z){return z.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}async function Oz(z,J){let Z=await I(z);f(z,Z);let K=v(z.config,Z);g(z,K),console.log(`  Found ${Z.length} story files`);let $=typeof J.host==="string"?J.host:J.host===!0?"0.0.0.0":"localhost",X=new k(z.root),B=new T(z.root),Y=new M(z.root),W=s(),j=Bun.serve({port:J.port,hostname:$,fetch:async(Q,D)=>{let O=new URL(Q.url).pathname;if(O==="/__hmr"){if(D.upgrade(Q,{data:{isHmr:!0}}))return;return new Response("WebSocket upgrade failed",{status:400})}if(O.startsWith("/api/"))return Cz(z,O,Q,{presetsManager:X,bookmarksManager:B,analyticsTracker:Y});return kz(z,O,J.port)},websocket:{open(Q){W.open(Q)},close(Q){W.close(Q)},message(Q,D){W.message(Q,D)}}}),U=`http://${$}:${J.port}`,_=Uz(z,async(Q,D)=>{console.log(`  [${Q}] ${D.relativePath}`);let L=await I(z);f(z,L);let O=v(z.config,L);if(g(z,O),Q==="add")a(D.id,{fileName:D.fileName});else if(Q==="unlink")o(D.id);else n(D.id,{fileName:D.fileName})});if(J.open){let Q=U;try{let{exec:D}=await import("child_process"),L=process.platform;D(`${L==="darwin"?"open":L==="win32"?"start":"xdg-open"} ${Q}`)}catch{}}return{server:j,url:U,close:async()=>{_(),j.stop()}}}async function Cz(z,J,Z,K){let{presetsManager:$,bookmarksManager:X,analyticsTracker:B}=K;if(J==="/api/stories")return Response.json({files:z.storyFiles.map((Y)=>({id:Y.id,fileName:Y.fileName,relativePath:Y.relativePath,treePath:Y.treePath})),tree:z.tree});if(J.startsWith("/api/story/")){let Y=J.slice(11),W=z.storyFiles.find((j)=>j.id===Y);if(!W)return new Response("Story not found",{status:404});try{let j=await Bun.file(W.path).text();return Response.json({id:W.id,fileName:W.fileName,relativePath:W.relativePath,content:j})}catch{return new Response("Error reading story",{status:500})}}if(J==="/api/config")return Response.json({theme:z.config.theme,responsivePresets:z.config.responsivePresets,backgroundPresets:z.config.backgroundPresets});if(J.startsWith("/api/render/")){let Y=new URL(Z.url),W=J.slice(12).split("/"),j=W[0],U=W[1]||"default",_,Q=Y.searchParams.get("props");if(Q)try{_=JSON.parse(Q)}catch{}let D=z.storyFiles.find((L)=>L.id===j);if(!D)return new Response("Story not found",{status:404});try{let L=await Bz(z,D,U,_);return Response.json({html:L.html,css:L.css,js:L.js,errors:L.errors,duration:L.duration})}catch(L){return Response.json({html:"",css:"",js:"",errors:[L instanceof Error?L.message:String(L)],duration:0},{status:500})}}if(J==="/api/presets"&&Z.method==="GET")return Response.json({presets:$.getAllPresets()});if(J==="/api/presets"&&Z.method==="POST")try{let Y=await Z.json(),W=$.createPreset(Y.name,Y.props,{componentId:Y.componentId,description:Y.description});return await $.save(),Response.json(W)}catch(Y){return Response.json({error:String(Y)},{status:400})}if(J.startsWith("/api/presets/")&&!J.includes("/use")&&Z.method==="GET"){let Y=J.slice(13),W=$.getPreset(Y);if(!W)return new Response("Preset not found",{status:404});return Response.json(W)}if(J.endsWith("/use")&&Z.method==="POST"){let Y=J.slice(13,-4),W=$.usePreset(Y);if(!W)return new Response("Preset not found",{status:404});return await $.save(),Response.json(W)}if(J.startsWith("/api/presets/")&&Z.method==="DELETE"){let Y=J.slice(13);if(!$.deletePreset(Y))return new Response("Preset not found",{status:404});return await $.save(),Response.json({success:!0})}if(J==="/api/bookmarks"&&Z.method==="GET")return Response.json({bookmarks:X.getAllBookmarks()});if(J==="/api/bookmarks"&&Z.method==="POST")try{let Y=await Z.json(),W=X.addBookmark(Y.storyId,Y.variantId,Y.props,{name:Y.name,notes:Y.notes,color:Y.color});return await X.save(),Response.json(W)}catch(Y){return Response.json({error:String(Y)},{status:400})}if(J==="/api/bookmarks/toggle"&&Z.method==="POST")try{let Y=await Z.json(),W=X.toggleBookmark(Y.storyId,Y.variantId,Y.props);return await X.save(),Response.json(W)}catch(Y){return Response.json({error:String(Y)},{status:400})}if(J.startsWith("/api/bookmarks/")&&J!=="/api/bookmarks/toggle"&&Z.method==="GET"){let Y=J.slice(15),W=X.getBookmark(Y);if(!W)return new Response("Bookmark not found",{status:404});return Response.json(W)}if(J.startsWith("/api/bookmarks/")&&Z.method==="DELETE"){let Y=J.slice(15);if(!X.deleteBookmark(Y))return new Response("Bookmark not found",{status:404});return await X.save(),Response.json({success:!0})}if(J==="/api/analytics/track"&&Z.method==="POST")try{let Y=await Z.json();if(Y.type==="view"&&Y.componentId)B.trackView(Y.componentId,Y.variantId);else if(Y.type==="prop_change"&&Y.componentId&&Y.propName)B.trackPropChange(Y.componentId,Y.propName,null);else if(Y.type==="variant_switch"&&Y.componentId&&Y.variantId)B.trackVariantSwitch(Y.componentId,Y.variantId);else if(Y.type==="search"&&Y.query)B.trackSearch(Y.query,0);return await B.save(),Response.json({success:!0})}catch(Y){return Response.json({error:String(Y)},{status:400})}if(J==="/api/analytics/summary"&&Z.method==="GET")return Response.json({mostViewed:B.getMostViewedComponents(10),mostChangedProps:B.getMostChangedProps(10),searchAnalytics:B.getSearchAnalytics()});if(J.startsWith("/api/analytics/component/")&&Z.method==="GET"){let Y=J.slice(25),W=z.storyFiles.find((U)=>U.id===Y),j=B.getComponentAnalytics(Y,W?.fileName||Y);return Response.json(j)}return new Response("Not found",{status:404})}function kz(z,J,Z){let K=Sz(z,Z);return new Response(K,{headers:{"Content-Type":"text/html; charset=utf-8"}})}function Sz(z,J){let{theme:Z}=z.config,K=Z.title||"STX Story",$=`ws://localhost:${J}/__hmr`,X=r($);return`<!DOCTYPE html>
+<html lang="en" class="${Z.darkClass||"dark"}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${K}</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --bg: #ffffff;
+      --bg-secondary: #f8f9fa;
+      --bg-tertiary: #e9ecef;
+      --text: #212529;
+      --text-secondary: #6c757d;
+      --border: #dee2e6;
+      --primary: #3b82f6;
+      --primary-hover: #2563eb;
+      --success: #10b981;
+      --warning: #f59e0b;
+      --danger: #ef4444;
+    }
+    .dark {
+      --bg: #0d1117;
+      --bg-secondary: #161b22;
+      --bg-tertiary: #21262d;
+      --text: #f0f6fc;
+      --text-secondary: #8b949e;
+      --border: #30363d;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      display: flex;
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    /* Sidebar */
+    .sidebar {
+      width: 260px;
+      min-width: 260px;
+      background: var(--bg-secondary);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .sidebar-header {
+      padding: 16px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .sidebar-header h1 {
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .sidebar-search {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--border);
+    }
+    .sidebar-search input {
+      width: 100%;
+      padding: 8px 12px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 13px;
+    }
+    .sidebar-search input:focus {
+      outline: none;
+      border-color: var(--primary);
+    }
+    .story-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px;
+      list-style: none;
+    }
+    .story-item {
+      padding: 8px 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      margin-bottom: 2px;
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .story-item:hover { background: var(--bg-tertiary); }
+    .story-item.active {
+      background: var(--primary);
+      color: white;
+    }
+    .story-icon { font-size: 14px; }
+
+    /* Main content */
+    .main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    /* Toolbar */
+    .toolbar {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      background: var(--bg-secondary);
+    }
+    .toolbar-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .toolbar-divider {
+      width: 1px;
+      height: 24px;
+      background: var(--border);
+    }
+    .toolbar select, .toolbar button {
+      padding: 6px 12px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 12px;
+      cursor: pointer;
+    }
+    .toolbar select:hover, .toolbar button:hover {
+      background: var(--bg-tertiary);
+    }
+    .toolbar-spacer { flex: 1; }
+
+    /* Variant tabs */
+    .variant-tabs {
+      display: flex;
+      gap: 4px;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--border);
+      background: var(--bg);
+      overflow-x: auto;
+    }
+    .variant-tab {
+      padding: 6px 14px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      background: var(--bg-secondary);
+      color: var(--text);
+      font-size: 12px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: all 0.15s;
+    }
+    .variant-tab:hover { background: var(--bg-tertiary); }
+    .variant-tab.active {
+      background: var(--primary);
+      border-color: var(--primary);
+      color: white;
+    }
+
+    /* Content area */
+    .content-wrapper {
+      flex: 1;
+      display: flex;
+      overflow: hidden;
+    }
+
+    /* Canvas */
+    .canvas-container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      background: var(--bg-tertiary);
+    }
+    .canvas {
+      flex: 1;
+      padding: 24px;
+      overflow: auto;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+    }
+    .canvas-frame {
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      overflow: hidden;
+      width: 100%;
+      max-width: 100%;
+    }
+    .canvas-frame iframe {
+      width: 100%;
+      height: 400px;
+      border: none;
+      display: block;
+    }
+
+    /* Controls Panel */
+    .controls-panel {
+      width: 300px;
+      min-width: 300px;
+      background: var(--bg-secondary);
+      border-left: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .controls-header {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--border);
+      font-weight: 600;
+      font-size: 13px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .controls-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+    }
+    .control-group {
+      margin-bottom: 16px;
+    }
+    .control-label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      margin-bottom: 6px;
+      color: var(--text-secondary);
+    }
+    .control-input {
+      width: 100%;
+      padding: 8px 12px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 13px;
+    }
+    .control-input:focus {
+      outline: none;
+      border-color: var(--primary);
+    }
+    .control-checkbox {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .control-checkbox input {
+      width: 16px;
+      height: 16px;
+    }
+    .controls-actions {
+      padding: 12px 16px;
+      border-top: 1px solid var(--border);
+      display: flex;
+      gap: 8px;
+    }
+    .controls-actions button {
+      flex: 1;
+      padding: 8px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 12px;
+      cursor: pointer;
+    }
+    .controls-actions button:hover {
+      background: var(--bg-tertiary);
+    }
+
+    /* States */
+    .empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: var(--text-secondary);
+      font-size: 14px;
+      gap: 8px;
+    }
+    .loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: var(--text-secondary);
+    }
+    .loading::after {
+      content: '';
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--border);
+      border-top-color: var(--primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-left: 8px;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .render-error {
+      padding: 16px;
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      border-radius: 8px;
+      color: #dc2626;
+    }
+    .dark .render-error {
+      background: #450a0a;
+      border-color: #7f1d1d;
+      color: #fca5a5;
+    }
+    .render-error pre {
+      margin-top: 8px;
+      white-space: pre-wrap;
+      font-size: 12px;
+      font-family: monospace;
+    }
+  </style>
+</head>
+<body>
+  <aside class="sidebar">
+    <div class="sidebar-header">
+      <span style="font-size: 20px;">\uD83D\uDCD6</span>
+      <h1>${K}</h1>
+    </div>
+    <div class="sidebar-search">
+      <input type="text" placeholder="Search components..." id="search-input" oninput="filterStories(this.value)">
+    </div>
+    <ul class="story-list" id="story-list">
+      <li class="empty-state">Loading stories...</li>
+    </ul>
+  </aside>
+
+  <main class="main">
+    <div class="toolbar">
+      <div class="toolbar-group">
+        <button onclick="toggleTheme()" title="Toggle theme">\uD83C\uDF13</button>
+        <button onclick="reloadStory()" title="Reload">\u21BB</button>
+      </div>
+      <div class="toolbar-divider"></div>
+      <div class="toolbar-group">
+        <select id="viewport" onchange="changeViewport(this.value)">
+          <option value="">Responsive</option>
+          ${z.config.responsivePresets.map((B)=>`<option value="${B.width}">${B.label}</option>`).join("")}
+        </select>
+        <select id="background" onchange="changeBackground(this.value)">
+          ${z.config.backgroundPresets.map((B)=>`<option value="${B.color}">${B.label}</option>`).join("")}
+        </select>
+      </div>
+      <div class="toolbar-spacer"></div>
+      <div class="toolbar-group">
+        <button onclick="toggleControls()" id="controls-toggle">Controls \u25B6</button>
+      </div>
+    </div>
+
+    <div class="variant-tabs" id="variant-tabs" style="display: none;">
+      <!-- Variant tabs will be populated here -->
+    </div>
+
+    <div class="content-wrapper">
+      <div class="canvas-container">
+        <div class="canvas" id="canvas">
+          <div class="empty-state">
+            <span style="font-size: 32px;">\uD83C\uDFA8</span>
+            <span>Select a component from the sidebar</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="controls-panel" id="controls-panel" style="display: none;">
+        <div class="controls-header">
+          <span>Controls</span>
+          <button onclick="resetProps()" style="font-size: 11px; padding: 4px 8px;">Reset</button>
+        </div>
+        <div class="controls-body" id="controls-body">
+          <div class="empty-state">Select a story to edit props</div>
+        </div>
+        <div class="controls-actions">
+          <button onclick="copyProps()">Copy JSON</button>
+          <button onclick="applyProps()">Apply</button>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <script>
+    let currentStory = null;
+    let currentVariant = 'default';
+    let currentStoryData = null;
+    let currentProps = {};
+    let allStories = [];
+
+    // Load stories
+    fetch('/api/stories')
+      .then(r => r.json())
+      .then(data => {
+        allStories = data.files;
+        renderStoryList(allStories);
+      });
+
+    function renderStoryList(stories) {
+      const list = document.getElementById('story-list');
+      if (stories.length === 0) {
+        list.innerHTML = '<li class="empty-state">No stories found</li>';
+        return;
+      }
+      list.innerHTML = stories.map(f =>
+        '<li class="story-item" data-id="' + f.id + '" onclick="selectStory(\\'' + f.id + '\\', this)">' +
+        '<span class="story-icon">\uD83D\uDCE6</span>' + f.fileName + '</li>'
+      ).join('');
+    }
+
+    function filterStories(query) {
+      const filtered = allStories.filter(f =>
+        f.fileName.toLowerCase().includes(query.toLowerCase())
+      );
+      renderStoryList(filtered);
+    }
+
+    function selectStory(id, element) {
+      currentStory = id;
+      currentVariant = 'default';
+
+      document.querySelectorAll('.story-item').forEach(el => el.classList.remove('active'));
+      if (element) element.classList.add('active');
+
+      // Fetch story details with variants
+      fetch('/api/story/' + id)
+        .then(r => r.json())
+        .then(data => {
+          currentStoryData = data;
+          currentProps = {};
+
+          // Parse variants from content
+          const variants = parseVariants(data.content);
+          renderVariantTabs(variants);
+
+          // Parse props from content
+          const props = parseProps(data.content);
+          renderControls(props);
+
+          // Render the default variant
+          renderVariant('default');
+        })
+        .catch(err => {
+          showError('Failed to load story: ' + err.message);
+        });
+    }
+
+    function parseVariants(content) {
+      const match = content.match(/const\\s+variants\\s*=\\s*\\[([\\s\\S]*?)\\]/);
+      if (!match) return [{ id: 'default', title: 'Default' }];
+
+      try {
+        const variantsStr = '[' + match[1] + ']';
+        const cleaned = variantsStr
+          .replace(/'/g, '"')
+          .replace(/(\\w+):/g, '"$1":')
+          .replace(/,\\s*}/g, '}')
+          .replace(/,\\s*]/g, ']');
+        return JSON.parse(cleaned);
+      }
+catch {
+        return [{ id: 'default', title: 'Default' }];
+      }
+    }
+
+    function parseProps(content) {
+      const props = [];
+      const scriptMatch = content.match(/<script>([\\s\\S]*?)<\\/script>/);
+      if (!scriptMatch) return props;
+
+      const script = scriptMatch[1];
+      const propMatches = script.matchAll(/const\\s+(\\w+)\\s*=\\s*([^\\n]+)/g);
+
+      for (const m of propMatches) {
+        const name = m[1];
+        const valueStr = m[2].trim();
+
+        // Skip variants and title
+        if (name === 'variants' || name === 'title') continue;
+
+        let type = 'text';
+        let value = valueStr;
+
+        if (valueStr === 'true' || valueStr === 'false') {
+          type = 'boolean';
+          value = valueStr === 'true';
+        }
+else if (valueStr.match(/^\\d+$/)) {
+          type = 'number';
+          value = parseInt(valueStr);
+        }
+else if (valueStr.startsWith("'") || valueStr.startsWith('"')) {
+          value = valueStr.slice(1, -1);
+        }
+
+        props.push({ name, type, value, default: value });
+        currentProps[name] = value;
+      }
+
+      return props;
+    }
+
+    function renderVariantTabs(variants) {
+      const container = document.getElementById('variant-tabs');
+      if (variants.length <= 1) {
+        container.style.display = 'none';
+        return;
+      }
+
+      container.style.display = 'flex';
+      container.innerHTML = variants.map(v =>
+        '<button class="variant-tab' + (v.id === currentVariant ? ' active' : '') +
+        '" onclick="selectVariant(\\'' + v.id + '\\')">' + v.title + '</button>'
+      ).join('');
+    }
+
+    function renderControls(props) {
+      const body = document.getElementById('controls-body');
+      if (props.length === 0) {
+        body.innerHTML = '<div class="empty-state">No props available</div>';
+        return;
+      }
+
+      body.innerHTML = props.map(p => {
+        if (p.type === 'boolean') {
+          return '<div class="control-group">' +
+            '<label class="control-checkbox">' +
+            '<input type="checkbox" ' + (currentProps[p.name] ? 'checked' : '') +
+            ' onchange="updateProp(\\'' + p.name + '\\', this.checked)">' +
+            '<span>' + p.name + '</span>' +
+            '</label></div>';
+        }
+        return '<div class="control-group">' +
+          '<label class="control-label">' + p.name + '</label>' +
+          '<input type="' + (p.type === 'number' ? 'number' : 'text') + '" ' +
+          'class="control-input" value="' + escapeHtml(String(currentProps[p.name] || '')) + '" ' +
+          'onchange="updateProp(\\'' + p.name + '\\', this.value)">' +
+          '</div>';
+      }).join('');
+    }
+
+    function selectVariant(variantId) {
+      currentVariant = variantId;
+
+      document.querySelectorAll('.variant-tab').forEach(el => el.classList.remove('active'));
+      event.target.classList.add('active');
+
+      // Get variant state and apply to props
+      const variants = parseVariants(currentStoryData.content);
+      const variant = variants.find(v => v.id === variantId);
+      if (variant && variant.state) {
+        Object.assign(currentProps, variant.state);
+        renderControls(parseProps(currentStoryData.content));
+      }
+
+      renderVariant(variantId);
+    }
+
+    function renderVariant(variantId) {
+      const canvas = document.getElementById('canvas');
+      canvas.innerHTML = '<div class="loading">Rendering</div>';
+
+      // Build URL with props
+      const propsParam = Object.keys(currentProps).length > 0
+        ? '?props=' + encodeURIComponent(JSON.stringify(currentProps))
+        : '';
+
+      fetch('/api/render/' + currentStory + '/' + variantId + propsParam)
+        .then(r => r.json())
+        .then(data => {
+          if (data.errors && data.errors.length > 0 && !data.html) {
+            canvas.innerHTML = '<div class="render-error"><strong>Render Error:</strong><pre>' +
+              escapeHtml(data.errors.join('\\n')) + '</pre></div>';
+            return;
+          }
+
+          canvas.innerHTML = '<div class="canvas-frame"><iframe id="preview-iframe"></iframe></div>';
+          const iframe = document.getElementById('preview-iframe');
+          const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+
+          iframeDoc.open();
+          iframeDoc.write('<!DOCTYPE html>' +
+            '<html>' +
+            '<head>' +
+            '<meta charset="UTF-8">' +
+            '<meta name="viewport" content="width=device-width, initial-scale=1.0">' +
+            '<style>' +
+            '* { box-sizing: border-box; }' +
+            'body { margin: 0; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; }' +
+            (data.css || '') +
+            '</style>' +
+            '</head>' +
+            '<body>' +
+            (data.html || '') +
+            '</body>' +
+            '</html>');
+          iframeDoc.close();
+
+          // Auto-resize iframe
+          setTimeout(() => {
+            const height = iframeDoc.body.scrollHeight + 40;
+            iframe.style.height = Math.max(200, height) + 'px';
+          }, 100);
+        })
+        .catch(err => {
+          canvas.innerHTML = '<div class="render-error"><strong>Error:</strong> ' + escapeHtml(err.message) + '</div>';
+        });
+    }
+
+    function updateProp(name, value) {
+      currentProps[name] = value;
+    }
+
+    function applyProps() {
+      if (currentStory) {
+        renderVariant(currentVariant);
+      }
+    }
+
+    function resetProps() {
+      if (currentStoryData) {
+        currentProps = {};
+        const props = parseProps(currentStoryData.content);
+        props.forEach(p => { currentProps[p.name] = p.default; });
+        renderControls(props);
+        renderVariant(currentVariant);
+      }
+    }
+
+    function copyProps() {
+      navigator.clipboard.writeText(JSON.stringify(currentProps, null, 2))
+        .then(() => alert('Props copied to clipboard!'));
+    }
+
+    function reloadStory() {
+      if (currentStory) {
+        renderVariant(currentVariant);
+      }
+    }
+
+    function showError(message) {
+      document.getElementById('canvas').innerHTML =
+        '<div class="render-error">' + escapeHtml(message) + '</div>';
+    }
+
+    function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    function toggleTheme() {
+      document.documentElement.classList.toggle('dark');
+    }
+
+    function toggleControls() {
+      const panel = document.getElementById('controls-panel');
+      const btn = document.getElementById('controls-toggle');
+      if (panel.style.display === 'none') {
+        panel.style.display = 'flex';
+        btn.textContent = 'Controls \u25C0';
+      }
+else {
+        panel.style.display = 'none';
+        btn.textContent = 'Controls \u25B6';
+      }
+    }
+
+    function changeViewport(width) {
+      const frame = document.querySelector('.canvas-frame');
+      if (frame) {
+        frame.style.maxWidth = width ? width + 'px' : '';
+      }
+    }
+
+    function changeBackground(color) {
+      const canvas = document.getElementById('canvas');
+      canvas.style.background = color || '';
+    }
+
+    // STX Story global object for HMR
+    window.__stxStory = {
+      currentStoryId: null,
+      reloadCurrentStory: function() {
+        if (currentStory) renderVariant(currentVariant);
+      },
+      refreshStoryList: function() {
+        fetch('/api/stories')
+          .then(r => r.json())
+          .then(data => {
+            allStories = data.files;
+            renderStoryList(allStories);
+          });
+      }
+    };
+  </script>
+  ${X}
+  ${e()}
+  ${Zz()}
+  ${Kz()}
+  <style>${Jz()}</style>
+  ${zz()}
+</body>
+</html>`}import fz from"fs";import gz from"path";var Iz=new Map,vz=[],xz=[],uz=new Map;async function _z(z){let J=z.config.setupFile;if(!J)return;let Z=gz.resolve(z.root,J);try{await fz.promises.access(Z)}catch{return}let K={storyContext:z,registerComponent:($,X)=>{Iz.set($,X)},addCSS:($)=>{vz.push($)},addScript:($)=>{xz.push($)},setState:($,X)=>{uz.set($,X)}};try{let $=await import(Z);if(typeof $.default==="function")await $.default(K);else if(typeof $.setupStory==="function")await $.setupStory(K)}catch($){console.warn(`Warning: Failed to load setup file: ${$}`)}}async function bz(z={}){x();let J=await h({mode:"dev"});if(!J.config.enabled){G("Story feature is disabled in config.");return}await _z(J);let Z=z.port??J.config.port,K,$=async()=>{K=await Oz(J,{port:Z,open:z.open,host:z.host}),b(J.storyFiles.length),u(K.url),y()};await $();let X=m(J,{onChange:async()=>{await K.close();let Y=await h({mode:"dev"});Object.assign(J,Y),await $()}}),B=async()=>{console.log(`
+`),X.stop(),await K.close(),process.exit(0)};if(process.on("SIGINT",B),process.on("SIGTERM",B),process.stdin.isTTY)process.stdin.setRawMode(!0),process.stdin.resume(),process.stdin.on("data",async(Y)=>{switch(Y.toString()){case"h":y();break;case"o":try{let{exec:j}=await import("child_process"),U=process.platform==="darwin"?"open":process.platform==="win32"?"start":"xdg-open";j(`${U} ${K.url}`)}catch{Az("Failed to open browser")}break;case"r":await K.close(),await $();break;case"c":console.clear(),x(),b(J.storyFiles.length),u(K.url);break;case"q":case"\x03":await B();break}});await new Promise(()=>{})}var qJ=bz;export{bz as devCommand,qJ as dev};