@stacksjs/stx 0.2.94 → 0.2.96

package/dist/chunk-7rvh2wwv.js

@@ -1,721 +0,0 @@
-// @bun
-import{Wb as T,Xb as S,Yb as u}from"./chunk-fzm3y0r3.js";import{cc as M}from"./chunk-jjamhxpm.js";import{dc as g}from"./chunk-h5wa62ek.js";import{ic as k}from"./chunk-52agge4n.js";import{oc as P,qc as U,rc as F,sc as w,xc as H}from"./chunk-s6ja2bdg.js";import{yc as v}from"./chunk-55yp0q8t.js";import{fd as L,hd as C}from"./chunk-bpgg59wa.js";import{jd as A}from"./chunk-y0qg6rrv.js";import{Fd as R}from"./chunk-hxx3za24.js";import{Ud as I}from"./chunk-pg1fvqb9.js";import{ge as W,he as _}from"./chunk-0qnz93q2.js";import{rB as f}from"./chunk-3jm3snz8.js";async function a(E,z){let J=await L(E);W(E,J);let $=A(E.config,J);_(E,$),console.log(`  Found ${J.length} story files`);let X=typeof z.host==="string"?z.host:z.host===!0?"0.0.0.0":"localhost",Y=new g(E.root),O=new I(E.root),j=new R(E.root),D=P(),Z=Bun.serve({port:z.port,hostname:X,fetch:async(K,Q)=>{let B=new URL(K.url).pathname;if(B==="/__hmr"){if(Q.upgrade(K,{data:{isHmr:!0}}))return;return new Response("WebSocket upgrade failed",{status:400})}if(B.startsWith("/api/"))return q(E,B,K,{presetsManager:Y,bookmarksManager:O,analyticsTracker:j});return b(E,B,z.port)},websocket:{open(K){D.open(K)},close(K){D.close(K)},message(K,Q){D.message(K,Q)}}}),G=`http://${X}:${z.port}`,V=C(E,async(K,Q)=>{console.log(`  [${K}] ${Q.relativePath}`);let N=await L(E);W(E,N);let B=A(E.config,N);if(_(E,B),K==="add")F(Q.id,{fileName:Q.fileName});else if(K==="unlink")w(Q.id);else U(Q.id,{fileName:Q.fileName})});if(z.open){let K=G;try{let{exec:Q}=await import("child_process"),N=process.platform;Q(`${N==="darwin"?"open":N==="win32"?"start":"xdg-open"} ${K}`)}catch{}}return{server:Z,url:G,close:async()=>{V(),Z.stop()}}}async function q(E,z,J,$){let{presetsManager:X,bookmarksManager:Y,analyticsTracker:O}=$;if(z==="/api/stories")return Response.json({files:E.storyFiles.map((j)=>({id:j.id,fileName:j.fileName,relativePath:j.relativePath,treePath:j.treePath})),tree:E.tree});if(z.startsWith("/api/story/")){let j=z.slice(11),D=E.storyFiles.find((Z)=>Z.id===j);if(!D)return new Response("Story not found",{status:404});try{let Z=await Bun.file(D.path).text();return Response.json({id:D.id,fileName:D.fileName,relativePath:D.relativePath,content:Z})}catch{return new Response("Error reading story",{status:500})}}if(z==="/api/config")return Response.json({theme:E.config.theme,responsivePresets:E.config.responsivePresets,backgroundPresets:E.config.backgroundPresets});if(z.startsWith("/api/render/")){let j=new URL(J.url),D=z.slice(12).split("/"),Z=D[0],G=D[1]||"default",V,K=j.searchParams.get("props");if(K)try{V=JSON.parse(K)}catch{}let Q=E.storyFiles.find((N)=>N.id===Z);if(!Q)return new Response("Story not found",{status:404});try{let N=await k(E,Q,G,V);return Response.json({html:N.html,css:N.css,js:N.js,errors:N.errors,duration:N.duration})}catch(N){return Response.json({html:"",css:"",js:"",errors:[N instanceof Error?N.message:String(N)],duration:0},{status:500})}}if(z==="/api/presets"&&J.method==="GET")return Response.json({presets:X.getAllPresets()});if(z==="/api/presets"&&J.method==="POST")try{let j=await J.json(),D=X.createPreset(j.name,j.props,{componentId:j.componentId,description:j.description});return await X.save(),Response.json(D)}catch(j){return Response.json({error:String(j)},{status:400})}if(z.startsWith("/api/presets/")&&!z.includes("/use")&&J.method==="GET"){let j=z.slice(13),D=X.getPreset(j);if(!D)return new Response("Preset not found",{status:404});return Response.json(D)}if(z.endsWith("/use")&&J.method==="POST"){let j=z.slice(13,-4),D=X.usePreset(j);if(!D)return new Response("Preset not found",{status:404});return await X.save(),Response.json(D)}if(z.startsWith("/api/presets/")&&J.method==="DELETE"){let j=z.slice(13);if(!X.deletePreset(j))return new Response("Preset not found",{status:404});return await X.save(),Response.json({success:!0})}if(z==="/api/bookmarks"&&J.method==="GET")return Response.json({bookmarks:Y.getAllBookmarks()});if(z==="/api/bookmarks"&&J.method==="POST")try{let j=await J.json(),D=Y.addBookmark(j.storyId,j.variantId,j.props,{name:j.name,notes:j.notes,color:j.color});return await Y.save(),Response.json(D)}catch(j){return Response.json({error:String(j)},{status:400})}if(z==="/api/bookmarks/toggle"&&J.method==="POST")try{let j=await J.json(),D=Y.toggleBookmark(j.storyId,j.variantId,j.props);return await Y.save(),Response.json(D)}catch(j){return Response.json({error:String(j)},{status:400})}if(z.startsWith("/api/bookmarks/")&&z!=="/api/bookmarks/toggle"&&J.method==="GET"){let j=z.slice(15),D=Y.getBookmark(j);if(!D)return new Response("Bookmark not found",{status:404});return Response.json(D)}if(z.startsWith("/api/bookmarks/")&&J.method==="DELETE"){let j=z.slice(15);if(!Y.deleteBookmark(j))return new Response("Bookmark not found",{status:404});return await Y.save(),Response.json({success:!0})}if(z==="/api/analytics/track"&&J.method==="POST")try{let j=await J.json();if(j.type==="view"&&j.componentId)O.trackView(j.componentId,j.variantId);else if(j.type==="prop_change"&&j.componentId&&j.propName)O.trackPropChange(j.componentId,j.propName,null);else if(j.type==="variant_switch"&&j.componentId&&j.variantId)O.trackVariantSwitch(j.componentId,j.variantId);else if(j.type==="search"&&j.query)O.trackSearch(j.query,0);return await O.save(),Response.json({success:!0})}catch(j){return Response.json({error:String(j)},{status:400})}if(z==="/api/analytics/summary"&&J.method==="GET")return Response.json({mostViewed:O.getMostViewedComponents(10),mostChangedProps:O.getMostChangedProps(10),searchAnalytics:O.getSearchAnalytics()});if(z.startsWith("/api/analytics/component/")&&J.method==="GET"){let j=z.slice(25),D=E.storyFiles.find((G)=>G.id===j),Z=O.getComponentAnalytics(j,D?.fileName||j);return Response.json(Z)}return new Response("Not found",{status:404})}function b(E,z,J){let $=x(E,J);return new Response($,{headers:{"Content-Type":"text/html; charset=utf-8"}})}function x(E,z){let{theme:J}=E.config,$=J.title||"STX Story",X=`ws://localhost:${z}/__hmr`,Y=H(X);return`<!DOCTYPE html>
-<html lang="en" class="${J.darkClass||"dark"}">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${$}</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>${$}</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>
-          ${E.config.responsivePresets.map((O)=>`<option value="${O.width}">${O.label}</option>`).join("")}
-        </select>
-        <select id="background" onchange="changeBackground(this.value)">
-          ${E.config.backgroundPresets.map((O)=>`<option value="${O.color}">${O.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>
-  ${Y}
-  ${v()}
-  ${u()}
-  ${M()}
-  <style>${S()}</style>
-  ${T()}
-</body>
-</html>`}
-export{a as Lb};