// @bun
var{defineProperty:N,getOwnPropertyNames:Y,getOwnPropertyDescriptor:_}=Object,$=Object.prototype.hasOwnProperty;function b(j){return this[j]}var M=(j)=>{var q=(Q??=new WeakMap).get(j),B;if(q)return q;if(q=N({},"__esModule",{value:!0}),j&&typeof j==="object"||typeof j==="function"){for(var A of Y(j))if(!$.call(q,A))N(q,A,{get:b.bind(j,A),enumerable:!(B=_(j,A))||B.enumerable})}return Q.set(j,q),q},Q;var k=(j)=>j;function E(j,q){this[j]=k.bind(null,q)}var O=(j,q)=>{for(var B in q)N(j,B,{get:q[B],enumerable:!0,configurable:!0,set:E.bind(q,B)})};var T=(j,q)=>()=>(j&&(q=j(j=0)),q);var W=import.meta.require;function R(){return{viewportWidth:null,viewportHeight:null,zoom:1,background:"#ffffff",showGrid:!1,showRuler:!1,showOutline:!1,props:{}}}function U(j,q,B,A){let D=j.story?.variants.find((X)=>X.id===q);if(!D)return"";let{theme:F}=A.config,J=F.darkClass||"dark",K={...D.state,...B.props};return`
<!DOCTYPE html>
<html lang="en">
<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: 16px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: ${B.background};
    }
    ${B.showGrid?G():""}
    ${B.showOutline?L():""}
  </style>
</head>
<body class="${F.defaultColorScheme==="dark"?J:""}">
  <div id="preview-root">
    ${D.source||"<!-- No source -->"}
  </div>
  <script>
    // Props available to the component
    window.__stxProps = ${JSON.stringify(K)};

    // Notify parent of render complete
    window.parent.postMessage({ type: 'preview-ready' }, '*');
  </script>
</body>
</html>
`}function G(){return`
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
      background-size: 8px 8px;
      z-index: 9999;
    }
  `}function L(){return`
    * {
      outline: 1px solid rgba(59, 130, 246, 0.3) !important;
    }
  `}function C(j,q){return`
    <select class="stx-viewport-select" onchange="window.__stxStory.setViewport(this.value)">
      <option value="">Responsive</option>
      ${j.map((A)=>`<option value="${A.width}" ${A.width===q?"selected":""}>${A.label}</option>`).join("")}
    </select>
  `}function H(j){return`
    <div class="stx-zoom-controls">
      <button onclick="window.__stxStory.zoomOut()" title="Zoom out">\u2212</button>
      <select onchange="window.__stxStory.setZoom(this.value)">
        ${[0.5,0.75,1,1.25,1.5,2].map((A)=>`<option value="${A}" ${A===j?"selected":""}>${Math.round(A*100)}%</option>`).join("")}
      </select>
      <button onclick="window.__stxStory.zoomIn()" title="Zoom in">+</button>
    </div>
  `}function g(j,q){return`
    <div class="stx-background-selector">
      ${j.map((A)=>`
      <button
        class="stx-bg-btn ${A.color===q?"active":""}"
        style="background: ${A.color}"
        onclick="window.__stxStory.setBackground('${A.color}')"
        title="${A.label}"
      ></button>
    `).join("")}
    </div>
  `}function w(j){return`
    <div class="stx-overlay-buttons">
      <button
        class="${j.showGrid?"active":""}"
        onclick="window.__stxStory.toggleGrid()"
        title="Toggle grid"
      >\u229E</button>
      <button
        class="${j.showRuler?"active":""}"
        onclick="window.__stxStory.toggleRuler()"
        title="Toggle ruler"
      >\uD83D\uDCCF</button>
      <button
        class="${j.showOutline?"active":""}"
        onclick="window.__stxStory.toggleOutline()"
        title="Toggle outline"
      >\u25A2</button>
    </div>
  `}function P(j,q,B,A){let D=R(),F=R(),J=U(j,q,D,A),K=U(j,B,F,A);return`
    <div class="stx-comparison-view">
      <div class="stx-comparison-pane">
        <div class="stx-comparison-label">Variant A</div>
        <iframe srcdoc="${V(J)}"></iframe>
      </div>
      <div class="stx-comparison-divider"></div>
      <div class="stx-comparison-pane">
        <div class="stx-comparison-label">Variant B</div>
        <iframe srcdoc="${V(K)}"></iframe>
      </div>
    </div>
  `}function S(){return`
    .stx-preview-container {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .stx-preview-iframe {
      border: 1px solid var(--border);
      border-radius: 4px;
      background: white;
      transition: width 0.2s, height 0.2s, transform 0.2s;
    }
    .stx-viewport-select,
    .stx-zoom-controls select {
      padding: 4px 8px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg);
      color: var(--text);
      font-size: 12px;
    }
    .stx-zoom-controls {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .stx-zoom-controls button {
      width: 24px;
      height: 24px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg);
      color: var(--text);
      cursor: pointer;
    }
    .stx-zoom-controls button:hover {
      background: var(--bg-secondary);
    }
    .stx-background-selector {
      display: flex;
      gap: 4px;
    }
    .stx-bg-btn {
      width: 24px;
      height: 24px;
      border: 2px solid var(--border);
      border-radius: 4px;
      cursor: pointer;
    }
    .stx-bg-btn.active {
      border-color: var(--primary);
    }
    .stx-overlay-buttons {
      display: flex;
      gap: 4px;
    }
    .stx-overlay-buttons button {
      width: 28px;
      height: 28px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg);
      cursor: pointer;
    }
    .stx-overlay-buttons button.active {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
    }
    .stx-comparison-view {
      display: flex;
      width: 100%;
      height: 100%;
    }
    .stx-comparison-pane {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .stx-comparison-label {
      padding: 8px;
      text-align: center;
      font-size: 12px;
      font-weight: 500;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border);
    }
    .stx-comparison-pane iframe {
      flex: 1;
      border: none;
    }
    .stx-comparison-divider {
      width: 4px;
      background: var(--border);
      cursor: col-resize;
    }
  `}function V(j){return j.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}export{S as getPreviewStyles,H as generateZoomControls,C as generateViewportSelector,U as generatePreviewIframe,w as generateOverlayButtons,P as generateComparisonView,g as generateBackgroundSelector,R as createPreviewState};
