// @bun
var{defineProperty:R,getOwnPropertyNames:M,getOwnPropertyDescriptor:N}=Object,x=Object.prototype.hasOwnProperty;function z(U){return this[U]}var t=(U)=>{var X=(W??=new WeakMap).get(U),q;if(X)return X;if(X=R({},"__esModule",{value:!0}),U&&typeof U==="object"||typeof U==="function"){for(var K of M(U))if(!x.call(X,K))R(X,K,{get:z.bind(U,K),enumerable:!(q=N(U,K))||q.enumerable})}return W.set(U,X),X},W;var V=(U)=>U;function P(U,X){this[U]=V.bind(null,X)}var e=(U,X)=>{for(var q in X)R(U,q,{get:X[q],enumerable:!0,configurable:!0,set:P.bind(X,q)})};var UU=(U,X)=>()=>(U&&(X=U(U=0)),X);var XU=import.meta.require;function j(U){if(!U)return[];if(Array.isArray(U))return U;return Object.entries(U).map(([X,q])=>({value:X,label:q}))}function w(U,X,q){let{type:K,title:Q}=U;switch(K){case"text":return Z(Q||"",X,q);case"number":return T(Q||"",X,q,U);case"boolean":return b(Q||"",X,q);case"select":return S(Q||"",X,q,U);case"radio":return I(Q||"",X,q,U);case"color":return k(Q||"",X,q);case"textarea":return H(Q||"",X,q);case"slider":return f(Q||"",X,q,U);case"json":return y(Q||"",X,q);case"date":return d(Q||"",X,q);case"buttongroup":return C(Q||"",X,q,U);default:return Z(Q||"",X,q)}}function Z(U,X,q){return`
    <div class="stx-control stx-control-text">
      <label class="stx-control-label">${$(U)}</label>
      <input
        type="text"
        class="stx-control-input"
        value="${$(String(X||""))}"
        onchange="${q}"
      />
    </div>
  `}function T(U,X,q,K){let Q=K.min!==void 0?`min="${K.min}"`:"",Y=K.max!==void 0?`max="${K.max}"`:"",_=K.step!==void 0?`step="${K.step}"`:"";return`
    <div class="stx-control stx-control-number">
      <label class="stx-control-label">${$(U)}</label>
      <input
        type="number"
        class="stx-control-input"
        value="${X??0}"
        ${Q} ${Y} ${_}
        onchange="${q}"
      />
    </div>
  `}function b(U,X,q){return`
    <div class="stx-control stx-control-checkbox">
      <label class="stx-control-label">
        <input
          type="checkbox"
          class="stx-control-checkbox-input"
          ${X?"checked":""}
          onchange="${q}"
        />
        <span>${$(U)}</span>
      </label>
    </div>
  `}function S(U,X,q,K){let Y=j(K.options).map((_)=>{let A=typeof _==="object"?_.value:_,B=typeof _==="object"?_.label:_,J=A===X?"selected":"";return`<option value="${$(String(A))}" ${J}>${$(String(B))}</option>`}).join("");return`
    <div class="stx-control stx-control-select">
      <label class="stx-control-label">${$(U)}</label>
      <select class="stx-control-input" onchange="${q}">
        ${Y}
      </select>
    </div>
  `}function I(U,X,q,K){let Q=j(K.options),Y=`radio-${U.toLowerCase().replace(/\s+/g,"-")}`,_=Q.map((A)=>{let B=typeof A==="object"?A.value:A,J=typeof A==="object"?A.label:A,L=B===X?"checked":"";return`
        <label class="stx-control-radio-option">
          <input
            type="radio"
            name="${Y}"
            value="${$(String(B))}"
            ${L}
            onchange="${q}"
          />
          <span>${$(String(J))}</span>
        </label>
      `}).join("");return`
    <div class="stx-control stx-control-radio">
      <label class="stx-control-label">${$(U)}</label>
      <div class="stx-control-radio-group">
        ${_}
      </div>
    </div>
  `}function k(U,X,q){return`
    <div class="stx-control stx-control-color">
      <label class="stx-control-label">${$(U)}</label>
      <div class="stx-control-color-wrapper">
        <input
          type="color"
          class="stx-control-color-input"
          value="${$(X||"#000000")}"
          onchange="${q}"
        />
        <input
          type="text"
          class="stx-control-input stx-control-color-text"
          value="${$(X||"#000000")}"
          onchange="${q}"
        />
      </div>
    </div>
  `}function H(U,X,q){return`
    <div class="stx-control stx-control-textarea">
      <label class="stx-control-label">${$(U)}</label>
      <textarea
        class="stx-control-textarea-input"
        onchange="${q}"
      >${$(String(X||""))}</textarea>
    </div>
  `}function f(U,X,q,K){let Q=K.min??0,Y=K.max??100,_=K.step??1;return`
    <div class="stx-control stx-control-slider">
      <label class="stx-control-label">${$(U)}</label>
      <div class="stx-control-slider-wrapper">
        <input
          type="range"
          class="stx-control-slider-input"
          value="${X??Q}"
          min="${Q}"
          max="${Y}"
          step="${_}"
          onchange="${q}"
          oninput="this.nextElementSibling.textContent = this.value"
        />
        <span class="stx-control-slider-value">${X??Q}</span>
      </div>
    </div>
  `}function y(U,X,q){let K=typeof X==="string"?X:JSON.stringify(X,null,2);return`
    <div class="stx-control stx-control-json">
      <label class="stx-control-label">${$(U)}</label>
      <textarea
        class="stx-control-json-input"
        onchange="${q}"
      >${$(K)}</textarea>
    </div>
  `}function d(U,X,q){return`
    <div class="stx-control stx-control-date">
      <label class="stx-control-label">${$(U)}</label>
      <input
        type="date"
        class="stx-control-input"
        value="${$(X||"")}"
        onchange="${q}"
      />
    </div>
  `}function KU(){return`
    .stx-control {
      margin-bottom: 12px;
    }
    .stx-control-label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary, #666);
      margin-bottom: 4px;
    }
    .stx-control-input {
      width: 100%;
      padding: 6px 8px;
      border: 1px solid var(--border, #ddd);
      border-radius: 4px;
      font-size: 13px;
      background: var(--bg, #fff);
      color: var(--text, #333);
    }
    .stx-control-input:focus {
      outline: none;
      border-color: var(--primary, #3b82f6);
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }
    .stx-control-checkbox {
      display: flex;
      align-items: center;
    }
    .stx-control-checkbox label {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }
    .stx-control-checkbox-input {
      width: 16px;
      height: 16px;
    }
    .stx-control-radio-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .stx-control-radio-option {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      font-size: 13px;
    }
    .stx-control-color-wrapper {
      display: flex;
      gap: 8px;
    }
    .stx-control-color-input {
      width: 40px;
      height: 32px;
      padding: 2px;
      border: 1px solid var(--border, #ddd);
      border-radius: 4px;
      cursor: pointer;
    }
    .stx-control-color-text {
      flex: 1;
    }
    .stx-control-textarea-input,
    .stx-control-json-input {
      width: 100%;
      min-height: 80px;
      padding: 8px;
      border: 1px solid var(--border, #ddd);
      border-radius: 4px;
      font-size: 13px;
      font-family: inherit;
      resize: vertical;
      background: var(--bg, #fff);
      color: var(--text, #333);
    }
    .stx-control-json-input {
      font-family: monospace;
      font-size: 12px;
    }
    .stx-control-slider-wrapper {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .stx-control-slider-input {
      flex: 1;
    }
    .stx-control-slider-value {
      min-width: 40px;
      text-align: right;
      font-size: 13px;
      color: var(--text-secondary, #666);
    }
  `}function C(U,X,q,K){let Y=j(K.options).map((_)=>{let A=typeof _==="object"?_.value:_,B=typeof _==="object"?_.label:_;return`
        <button
          type="button"
          class="stx-control-btn-group-btn ${A===X?"active":""}"
          data-value="${$(String(A))}"
          onclick="${q}"
        >${$(String(B))}</button>
      `}).join("");return`
    <div class="stx-control stx-control-btn-group">
      <label class="stx-control-label">${$(U)}</label>
      <div class="stx-control-btn-group-wrapper">
        ${Y}
      </div>
    </div>
  `}function $(U){return U.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function h(U){let X=g(U.name),q=m(U);return{id:X,title:U.name,variants:q,layout:{type:"single"}}}function m(U){let X=[],q={};for(let K of U.props)if(K.default!==void 0)q[K.name]=K.default;X.push({id:"default",title:"Default",state:q});for(let K of U.props)if(K.type==="boolean"&&K.default===!1){let Q={...q,[K.name]:!0};X.push({id:`with-${K.name}`,title:`With ${D(K.name)}`,state:Q})}for(let K of U.props)if(K.options&&K.options.length>0){for(let Q of K.options)if(Q!==K.default){let Y={...q,[K.name]:Q};X.push({id:`${K.name}-${String(Q).toLowerCase()}`,title:`${D(K.name)}: ${Q}`,state:Y})}}return X}function F(U){let q={type:u(U)};if(U.options&&U.options.length>0)q.options=U.options.map((K)=>typeof K==="string"?{value:K,label:K}:K);return q.title=D(U.name),q}function u(U){let X=U.type.toLowerCase();if(U.options&&U.options.length>0)return U.options.length<=4?"radio":"select";if(X==="boolean"||X==="bool")return"boolean";if(X==="number"||X==="int"||X==="float")return"number";if(X==="string"||X==="text"){if(U.name.toLowerCase().includes("color"))return"color";if(U.name.toLowerCase().includes("description")||U.name.toLowerCase().includes("content")||U.name.toLowerCase().includes("text"))return"textarea";return"text"}if(X==="array"||X==="object"||X.startsWith("{")||X.startsWith("["))return"json";if(X==="date")return"date";return"text"}function v(U){return U.map(F)}function YU(U,X){let q=Object.entries(X).map(([K,Q])=>{if(typeof Q==="string")return`${K}="${Q}"`;if(typeof Q==="boolean")return Q?K:"";return`:${K}="${JSON.stringify(Q)}"`}).filter(Boolean).join(" ");return`<${U} ${q} />`}function D(U){return U.replace(/([A-Z])/g," $1").replace(/^./,(X)=>X.toUpperCase()).trim()}function g(U){return U.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"")}function _U(U){let X=h(U),q=v(U.props),K=U.props.map((Y)=>{let _=Y.default!==void 0?JSON.stringify(Y.default):c(Y.type);return`    ${Y.name}: ${_}`}).join(`,
`),Q=q.map((Y,_)=>{let A=U.props[_];return`      <${i(Y.type)} v-model="state.${A.name}" title="${Y.title}" />`}).join(`
`);return`<!-- Auto-generated story for ${U.name} -->
<script>
import ${U.name} from './${U.name}.stx'

function initState() {
  return {
${K}
  }
}
</script>

<Story title="${U.name}">
  <Variant title="Playground" :init-state="initState">
    <template #default="{ state }">
      <${U.name} v-bind="state" />
    </template>

    <template #controls="{ state }">
${Q}
    </template>
  </Variant>

${X.variants.slice(1).map((Y)=>`  <Variant title="${Y.title}">
    <${U.name} ${s(Y.state||{})} />
  </Variant>`).join(`

`)}
</Story>
`}function c(U){let X=U.toLowerCase();if(X==="boolean")return"false";if(X==="number")return"0";if(X==="array")return"[]";if(X==="object")return"{}";return"''"}function i(U){return{text:"StxText",number:"StxNumber",boolean:"StxCheckbox",select:"StxSelect",radio:"StxRadio",color:"StxColorSelect",json:"StxJson",date:"StxText",textarea:"StxTextarea",slider:"StxSlider",buttongroup:"StxButtonGroup"}[U]||"StxText"}function s(U){return Object.entries(U).map(([X,q])=>{if(typeof q==="string")return`${X}="${q}"`;if(typeof q==="boolean")return q?X:`:${X}="false"`;return`:${X}="${JSON.stringify(q)}"`}).join(" ")}import r from"fs";function BU(U,X,q="source"){return`
    <div class="stx-code-panel">
      <div class="stx-code-tabs">
        <button class="${q==="source"?"active":""}" onclick="window.__stxStory.setCodeTab('source')">Source</button>
        <button class="${q==="story"?"active":""}" onclick="window.__stxStory.setCodeTab('story')">Story</button>
        <button class="${q==="compiled"?"active":""}" onclick="window.__stxStory.setCodeTab('compiled')">Compiled</button>
        <button class="${q==="props"?"active":""}" onclick="window.__stxStory.setCodeTab('props')">Props</button>
      </div>
      <div class="stx-code-toolbar">
        <button onclick="window.__stxStory.copyCode()" title="Copy code">\uD83D\uDCCB Copy</button>
        <button onclick="window.__stxStory.openInVSCode()" title="Open in VS Code">\uD83D\uDCDD VS Code</button>
      </div>
      <div class="stx-code-content" id="code-content">
        <!-- Content loaded dynamically -->
      </div>
    </div>
  `}async function JU(U){try{return await r.promises.readFile(U,"utf-8")}catch{return"// Unable to read source file"}}function RU(U,X){let q=Object.entries(X).map(([K,Q])=>{if(typeof Q==="string")return`${K}="${Q}"`;if(typeof Q==="boolean")return Q?K:`:${K}="false"`;if(typeof Q==="number")return`:${K}="${Q}"`;return`:${K}="${JSON.stringify(Q).replace(/"/g,"'")}"`}).join(`
  `);return`<${U}
  ${q}
/>`}function jU(U){return JSON.stringify(U,null,2)}function DU(U,X){let q=p(U);if(X==="html"||X==="stx")q=q.replace(/(&lt;\/?)([\w-]+)/g,'$1<span class="hl-tag">$2</span>').replace(/([\w-]+)(=)/g,'<span class="hl-attr">$1</span>$2').replace(/(&quot;[^&]*&quot;)/g,'<span class="hl-string">$1</span>').replace(/(&lt;!--[\s\S]*?--&gt;)/g,'<span class="hl-comment">$1</span>').replace(/(@\w+)/g,'<span class="hl-directive">$1</span>').replace(/(\{\{[^}]*\}\})/g,'<span class="hl-interpolation">$1</span>');else if(X==="json")q=q.replace(/(&quot;\w+&quot;)(:)/g,'<span class="hl-key">$1</span>$2').replace(/(: )(&quot;[^&]*&quot;)/g,'$1<span class="hl-string">$2</span>').replace(/(: )(\d+)/g,'$1<span class="hl-number">$2</span>').replace(/(true|false|null)/g,'<span class="hl-boolean">$1</span>');else if(X==="typescript"||X==="javascript")q=q.replace(/\b(const|let|var|function|return|if|else|for|while|class|interface|type|export|import|from|async|await)\b/g,'<span class="hl-keyword">$1</span>').replace(/(&apos;[^&]*&apos;|&quot;[^&]*&quot;|`[^`]*`)/g,'<span class="hl-string">$1</span>').replace(/\b(\d+)\b/g,'<span class="hl-number">$1</span>').replace(/(\/\/.*$)/gm,'<span class="hl-comment">$1</span>').replace(/(\/\*[\s\S]*?\*\/)/g,'<span class="hl-comment">$1</span>');return`<pre class="hl-code"><code>${q}</code></pre>`}function l(){return`
    .hl-code {
      margin: 0;
      padding: 16px;
      overflow: auto;
      font-family: 'SF Mono', Monaco, Consolas, monospace;
      font-size: 13px;
      line-height: 1.5;
      background: var(--bg-secondary);
      border-radius: 4px;
    }
    .hl-code code {
      font-family: inherit;
    }
    .hl-tag { color: #22863a; }
    .hl-attr { color: #6f42c1; }
    .hl-string { color: #032f62; }
    .hl-comment { color: #6a737d; font-style: italic; }
    .hl-directive { color: #d73a49; font-weight: 500; }
    .hl-interpolation { color: #e36209; }
    .hl-key { color: #005cc5; }
    .hl-number { color: #005cc5; }
    .hl-boolean { color: #d73a49; }
    .hl-keyword { color: #d73a49; }

    .dark .hl-tag { color: #85e89d; }
    .dark .hl-attr { color: #b392f0; }
    .dark .hl-string { color: #9ecbff; }
    .dark .hl-comment { color: #6a737d; }
    .dark .hl-directive { color: #f97583; }
    .dark .hl-interpolation { color: #ffab70; }
    .dark .hl-key { color: #79b8ff; }
    .dark .hl-number { color: #79b8ff; }
    .dark .hl-boolean { color: #f97583; }
    .dark .hl-keyword { color: #f97583; }
  `}function FU(){return`
    .stx-code-panel {
      display: flex;
      flex-direction: column;
      height: 100%;
      border-left: 1px solid var(--border);
    }
    .stx-code-tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      background: var(--bg-secondary);
    }
    .stx-code-tabs button {
      padding: 8px 16px;
      border: none;
      background: none;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 12px;
      border-bottom: 2px solid transparent;
    }
    .stx-code-tabs button:hover {
      color: var(--text);
    }
    .stx-code-tabs button.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }
    .stx-code-toolbar {
      display: flex;
      gap: 8px;
      padding: 8px;
      border-bottom: 1px solid var(--border);
    }
    .stx-code-toolbar button {
      padding: 4px 8px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg);
      color: var(--text);
      font-size: 12px;
      cursor: pointer;
    }
    .stx-code-toolbar button:hover {
      background: var(--bg-secondary);
    }
    .stx-code-content {
      flex: 1;
      overflow: auto;
      padding: 0;
    }
    ${l()}
  `}function WU(){return`
    window.__stxStory.copyCode = function() {
      const codeEl = document.querySelector('.hl-code code');
      if (codeEl) {
        navigator.clipboard.writeText(codeEl.textContent || '');
        // Show toast
        const toast = document.createElement('div');
        toast.className = 'stx-toast';
        toast.textContent = 'Copied to clipboard!';
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 2000);
      }
    };
  `}function ZU(U){return`
    window.__stxStory.openInVSCode = function() {
      // Use VS Code URL scheme
      window.open('vscode://file/${U}', '_blank');
    };
  `}function p(U){return U.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;")}function OU(U){let X={};if(U)for(let q of U.props)X[q.name]=q.default;return{collapsed:!1,values:X,filter:""}}function LU(U,X){if(!U)return`
      <div class="stx-controls-panel">
        <div class="stx-controls-empty">
          Select a story to edit props
        </div>
      </div>
    `;let K=(X.filter?U.props.filter((Q)=>Q.name.toLowerCase().includes(X.filter.toLowerCase())):U.props).map((Q)=>{let Y=F(Q),_=X.values[Q.name],A=`window.__stxStory.setProp('${Q.name}', this.value)`;return w(Y,_,A)}).join("");return`
    <div class="stx-controls-panel ${X.collapsed?"collapsed":""}">
      <div class="stx-controls-header" onclick="window.__stxStory.toggleControlsPanel()">
        <span class="stx-controls-title">Controls</span>
        <span class="stx-controls-toggle">${X.collapsed?"\u25C0":"\u25B6"}</span>
      </div>
      <div class="stx-controls-body">
        <div class="stx-controls-search">
          <input
            type="text"
            placeholder="Filter props..."
            value="${n(X.filter)}"
            oninput="window.__stxStory.filterProps(this.value)"
          />
        </div>
        <div class="stx-controls-list">
          ${K}
        </div>
        <div class="stx-controls-actions">
          <button onclick="window.__stxStory.resetProps()">Reset</button>
          <button onclick="window.__stxStory.copyProps()">Copy JSON</button>
        </div>
      </div>
    </div>
  `}function MU(){return`
    <div class="stx-controls-panel">
      <div class="stx-controls-header">
        <span class="stx-controls-title">Controls</span>
      </div>
      <div class="stx-controls-body">
        <div class="stx-controls-disabled">
          Auto props are disabled for this story.
          <br><br>
          Use <code>&lt;template #controls&gt;</code> to define custom controls.
        </div>
      </div>
    </div>
  `}function NU(){return`
    .stx-controls-panel {
      width: 280px;
      border-left: 1px solid var(--border);
      background: var(--bg);
      display: flex;
      flex-direction: column;
      transition: width 0.2s;
    }
    .stx-controls-panel.collapsed {
      width: 40px;
    }
    .stx-controls-panel.collapsed .stx-controls-body {
      display: none;
    }
    .stx-controls-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      user-select: none;
    }
    .stx-controls-header:hover {
      background: var(--bg-secondary);
    }
    .stx-controls-title {
      font-weight: 600;
      font-size: 13px;
    }
    .stx-controls-toggle {
      font-size: 10px;
      color: var(--text-secondary);
    }
    .stx-controls-body {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
    }
    .stx-controls-search {
      margin-bottom: 12px;
    }
    .stx-controls-search input {
      width: 100%;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg);
      color: var(--text);
      font-size: 13px;
    }
    .stx-controls-search input:focus {
      outline: none;
      border-color: var(--primary);
    }
    .stx-controls-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .stx-controls-actions {
      display: flex;
      gap: 8px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .stx-controls-actions button {
      flex: 1;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg);
      color: var(--text);
      font-size: 12px;
      cursor: pointer;
    }
    .stx-controls-actions button:hover {
      background: var(--bg-secondary);
    }
    .stx-controls-empty,
    .stx-controls-disabled {
      padding: 24px;
      text-align: center;
      color: var(--text-secondary);
      font-size: 13px;
    }
    .stx-controls-disabled code {
      background: var(--bg-secondary);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
    }
  `}function n(U){return U.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function zU(){return{selectedStoryId:null,selectedVariantId:null,recentStories:[],maxRecent:10,searchQuery:"",focusedIndex:-1}}function VU(U){if(!U||U==="#")return{storyId:null,variantId:null};let q=(U.startsWith("#")?U.slice(1):U).split("/").filter(Boolean);return{storyId:q[0]||null,variantId:q[1]||null}}function PU(U,X){if(!U)return"";if(!X)return`#/${U}`;return`#/${U}/${X}`}function TU(U,X){let q=U.recentStories.indexOf(X);if(q!==-1)U.recentStories.splice(q,1);if(U.recentStories.unshift(X),U.recentStories.length>U.maxRecent)U.recentStories.pop()}function bU(){return`
    (function() {
      const state = {
        focusedIndex: -1,
        items: [],
      };

      function updateItems() {
        state.items = Array.from(document.querySelectorAll('.stx-tree-item, .stx-search-result'));
      }

      function focusItem(index) {
        // Remove previous focus
        state.items.forEach(item => item.classList.remove('focused'));

        // Clamp index
        if (index < 0) index = state.items.length - 1;
        if (index >= state.items.length) index = 0;

        state.focusedIndex = index;

        // Add focus
        if (state.items[index]) {
          state.items[index].classList.add('focused');
          state.items[index].scrollIntoView({ block: 'nearest' });
        }
      }

      function selectFocused() {
        if (state.items[state.focusedIndex]) {
          state.items[state.focusedIndex].click();
        }
      }

      document.addEventListener('keydown', function(e) {
        // Ignore if typing in input
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
          if (e.key === 'Escape') {
            e.target.blur();
          }
          return;
        }

        updateItems();

        switch (e.key) {
          case 'ArrowUp':
            e.preventDefault();
            focusItem(state.focusedIndex - 1);
            break;

          case 'ArrowDown':
            e.preventDefault();
            focusItem(state.focusedIndex + 1);
            break;

          case 'Enter':
            e.preventDefault();
            selectFocused();
            break;

          case '/':
          case 'k':
            if (e.metaKey || e.ctrlKey || e.key === '/') {
              e.preventDefault();
              const searchInput = document.querySelector('.stx-search-input');
              if (searchInput) searchInput.focus();
            }
            break;

          case 'Escape':
            state.focusedIndex = -1;
            state.items.forEach(item => item.classList.remove('focused'));
            break;
        }
      });

      // Hash change handling
      window.addEventListener('hashchange', function() {
        const hash = window.location.hash;
        if (window.__stxStory && window.__stxStory.navigateToHash) {
          window.__stxStory.navigateToHash(hash);
        }
      });

      // Initialize from hash
      if (window.location.hash) {
        setTimeout(function() {
          if (window.__stxStory && window.__stxStory.navigateToHash) {
            window.__stxStory.navigateToHash(window.location.hash);
          }
        }, 100);
      }
    })();
  `}function SU(){return`
    .stx-tree-item.focused,
    .stx-search-result.focused {
      outline: 2px solid var(--primary);
      outline-offset: -2px;
    }

    .stx-recent-list {
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      margin-bottom: 8px;
    }

    .stx-recent-title {
      font-size: 11px;
      text-transform: uppercase;
      color: var(--text-secondary);
      padding: 4px 12px;
      font-weight: 500;
    }

    .stx-recent-item {
      padding: 6px 12px;
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .stx-recent-item:hover {
      background: var(--bg-secondary);
    }

    .stx-recent-item .stx-recent-icon {
      color: var(--text-secondary);
    }
  `}function IU(U,X){if(U.length===0)return"";return`
    <div class="stx-recent-list">
      <div class="stx-recent-title">Recent</div>
      ${U.filter((K)=>X.has(K)).map((K)=>`
      <div class="stx-recent-item" onclick="window.__stxStory.selectStory('${K}')">
        <span class="stx-recent-icon">\uD83D\uDD50</span>
        <span>${X.get(K)}</span>
      </div>
    `).join("")}
    </div>
  `}function kU(U){try{localStorage.setItem("stx-story-nav",JSON.stringify({selectedStoryId:U.selectedStoryId,selectedVariantId:U.selectedVariantId,recentStories:U.recentStories}))}catch{}}function HU(){try{let U=localStorage.getItem("stx-story-nav");if(U)return JSON.parse(U)}catch{}return{}}function fU(){return`
    (function() {
      // Load saved state
      try {
        const saved = localStorage.getItem('stx-story-nav');
        if (saved) {
          const state = JSON.parse(saved);
          window.__stxStoryState = state;

          // Restore selection
          if (state.selectedStoryId && window.__stxStory) {
            window.__stxStory.selectStory(state.selectedStoryId, state.selectedVariantId);
          }
        }
      }
catch (e) {}

      // Save state on changes
      window.__stxStory = window.__stxStory || {};
      const originalSelectStory = window.__stxStory.selectStory;

      window.__stxStory.selectStory = function(storyId, variantId) {
        if (originalSelectStory) {
          originalSelectStory(storyId, variantId);
        }

        try {
          const state = window.__stxStoryState || {};
          state.selectedStoryId = storyId;
          state.selectedVariantId = variantId;

          // Add to recent
          state.recentStories = state.recentStories || [];
          const idx = state.recentStories.indexOf(storyId);
          if (idx !== -1) state.recentStories.splice(idx, 1);
          state.recentStories.unshift(storyId);
          if (state.recentStories.length > 10) state.recentStories.pop();

          localStorage.setItem('stx-story-nav', JSON.stringify(state));
          window.__stxStoryState = state;
        }
catch (e) {}
      };
    })();
  `}function E(){return{viewportWidth:null,viewportHeight:null,zoom:1,background:"#ffffff",showGrid:!1,showRuler:!1,showOutline:!1,props:{}}}function G(U,X,q,K){let Q=U.story?.variants.find((B)=>B.id===X);if(!Q)return"";let{theme:Y}=K.config,_=Y.darkClass||"dark",A={...Q.state,...q.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: ${q.background};
    }
    ${q.showGrid?a():""}
    ${q.showOutline?o():""}
  </style>
</head>
<body class="${Y.defaultColorScheme==="dark"?_:""}">
  <div id="preview-root">
    ${Q.source||"<!-- No source -->"}
  </div>
  <script>
    // Props available to the component
    window.__stxProps = ${JSON.stringify(A)};

    // Notify parent of render complete
    window.parent.postMessage({ type: 'preview-ready' }, '*');
  </script>
</body>
</html>
`}function a(){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 o(){return`
    * {
      outline: 1px solid rgba(59, 130, 246, 0.3) !important;
    }
  `}function dU(U,X){return`
    <select class="stx-viewport-select" onchange="window.__stxStory.setViewport(this.value)">
      <option value="">Responsive</option>
      ${U.map((K)=>`<option value="${K.width}" ${K.width===X?"selected":""}>${K.label}</option>`).join("")}
    </select>
  `}function CU(U){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((K)=>`<option value="${K}" ${K===U?"selected":""}>${Math.round(K*100)}%</option>`).join("")}
      </select>
      <button onclick="window.__stxStory.zoomIn()" title="Zoom in">+</button>
    </div>
  `}function hU(U,X){return`
    <div class="stx-background-selector">
      ${U.map((K)=>`
      <button
        class="stx-bg-btn ${K.color===X?"active":""}"
        style="background: ${K.color}"
        onclick="window.__stxStory.setBackground('${K.color}')"
        title="${K.label}"
      ></button>
    `).join("")}
    </div>
  `}function mU(U){return`
    <div class="stx-overlay-buttons">
      <button
        class="${U.showGrid?"active":""}"
        onclick="window.__stxStory.toggleGrid()"
        title="Toggle grid"
      >\u229E</button>
      <button
        class="${U.showRuler?"active":""}"
        onclick="window.__stxStory.toggleRuler()"
        title="Toggle ruler"
      >\uD83D\uDCCF</button>
      <button
        class="${U.showOutline?"active":""}"
        onclick="window.__stxStory.toggleOutline()"
        title="Toggle outline"
      >\u25A2</button>
    </div>
  `}function uU(U,X,q,K){let Q=E(),Y=E(),_=G(U,X,Q,K),A=G(U,q,Y,K);return`
    <div class="stx-comparison-view">
      <div class="stx-comparison-pane">
        <div class="stx-comparison-label">Variant A</div>
        <iframe srcdoc="${O(_)}"></iframe>
      </div>
      <div class="stx-comparison-divider"></div>
      <div class="stx-comparison-pane">
        <div class="stx-comparison-label">Variant B</div>
        <iframe srcdoc="${O(A)}"></iframe>
      </div>
    </div>
  `}function vU(){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 O(U){return U.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}export{kU as saveNavigationState,VU as parseHash,HU as loadNavigationState,DU as highlightCode,RU as getStoryCode,fU as getStatePersistenceScript,jU as getPropsJson,vU as getPreviewStyles,ZU as getOpenInVSCodeScript,SU as getNavigationStyles,bU as getKeyboardNavigationScript,l as getHighlightStyles,WU as getCopyCodeScript,NU as getControlsPanelStyles,JU as getComponentSource,FU as getCodePanelStyles,CU as generateZoomControls,dU as generateViewportSelector,IU as generateRecentList,G as generatePreviewIframe,mU as generateOverlayButtons,PU as generateHash,LU as generateControlsPanel,uU as generateComparisonView,BU as generateCodePanel,hU as generateBackgroundSelector,MU as generateAutoPropsDisabled,E as createPreviewState,zU as createNavigationState,OU as createControlsPanelState,TU as addToRecent};
