// @bun
var{defineProperty:B,getOwnPropertyNames:F,getOwnPropertyDescriptor:G}=Object,M=Object.prototype.hasOwnProperty;function z(q){return this[q]}var i=(q)=>{var w=(j??=new WeakMap).get(q),K;if(w)return w;if(w=B({},"__esModule",{value:!0}),q&&typeof q==="object"||typeof q==="function"){for(var Q of F(q))if(!M.call(w,Q))B(w,Q,{get:z.bind(q,Q),enumerable:!(K=G(q,Q))||K.enumerable})}return j.set(q,w),w},j;var O=(q)=>q;function L(q,w){this[q]=O.bind(null,w)}var c=(q,w)=>{for(var K in w)B(q,K,{get:w[K],enumerable:!0,configurable:!0,set:L.bind(w,K)})};var r=(q,w)=>()=>(q&&(w=q(q=0)),w);var l=import.meta.require;function I(q){if(!q)return[];if(Array.isArray(q))return q;return Object.entries(q).map(([w,K])=>({value:w,label:K}))}function D(q,w,K){let{type:Q,title:U}=q;switch(Q){case"text":return A(U||"",w,K);case"number":return P(U||"",w,K,q);case"boolean":return x(U||"",w,K);case"select":return N(U||"",w,K,q);case"radio":return T(U||"",w,K,q);case"color":return V(U||"",w,K);case"textarea":return b(U||"",w,K);case"slider":return S(U||"",w,K,q);case"json":return k(U||"",w,K);case"date":return d(U||"",w,K);case"buttongroup":return H(U||"",w,K,q);default:return A(U||"",w,K)}}function A(q,w,K){return`
    <div class="stx-control stx-control-text">
      <label class="stx-control-label">${Y(q)}</label>
      <input
        type="text"
        class="stx-control-input"
        value="${Y(String(w||""))}"
        onchange="${K}"
      />
    </div>
  `}function P(q,w,K,Q){let U=Q.min!==void 0?`min="${Q.min}"`:"",X=Q.max!==void 0?`max="${Q.max}"`:"",W=Q.step!==void 0?`step="${Q.step}"`:"";return`
    <div class="stx-control stx-control-number">
      <label class="stx-control-label">${Y(q)}</label>
      <input
        type="number"
        class="stx-control-input"
        value="${w??0}"
        ${U} ${X} ${W}
        onchange="${K}"
      />
    </div>
  `}function x(q,w,K){return`
    <div class="stx-control stx-control-checkbox">
      <label class="stx-control-label">
        <input
          type="checkbox"
          class="stx-control-checkbox-input"
          ${w?"checked":""}
          onchange="${K}"
        />
        <span>${Y(q)}</span>
      </label>
    </div>
  `}function N(q,w,K,Q){let X=I(Q.options).map((W)=>{let Z=typeof W==="object"?W.value:W,_=typeof W==="object"?W.label:W,$=Z===w?"selected":"";return`<option value="${Y(String(Z))}" ${$}>${Y(String(_))}</option>`}).join("");return`
    <div class="stx-control stx-control-select">
      <label class="stx-control-label">${Y(q)}</label>
      <select class="stx-control-input" onchange="${K}">
        ${X}
      </select>
    </div>
  `}function T(q,w,K,Q){let U=I(Q.options),X=`radio-${q.toLowerCase().replace(/\s+/g,"-")}`,W=U.map((Z)=>{let _=typeof Z==="object"?Z.value:Z,$=typeof Z==="object"?Z.label:Z,E=_===w?"checked":"";return`
        <label class="stx-control-radio-option">
          <input
            type="radio"
            name="${X}"
            value="${Y(String(_))}"
            ${E}
            onchange="${K}"
          />
          <span>${Y(String($))}</span>
        </label>
      `}).join("");return`
    <div class="stx-control stx-control-radio">
      <label class="stx-control-label">${Y(q)}</label>
      <div class="stx-control-radio-group">
        ${W}
      </div>
    </div>
  `}function V(q,w,K){return`
    <div class="stx-control stx-control-color">
      <label class="stx-control-label">${Y(q)}</label>
      <div class="stx-control-color-wrapper">
        <input
          type="color"
          class="stx-control-color-input"
          value="${Y(w||"#000000")}"
          onchange="${K}"
        />
        <input
          type="text"
          class="stx-control-input stx-control-color-text"
          value="${Y(w||"#000000")}"
          onchange="${K}"
        />
      </div>
    </div>
  `}function b(q,w,K){return`
    <div class="stx-control stx-control-textarea">
      <label class="stx-control-label">${Y(q)}</label>
      <textarea
        class="stx-control-textarea-input"
        onchange="${K}"
      >${Y(String(w||""))}</textarea>
    </div>
  `}function S(q,w,K,Q){let U=Q.min??0,X=Q.max??100,W=Q.step??1;return`
    <div class="stx-control stx-control-slider">
      <label class="stx-control-label">${Y(q)}</label>
      <div class="stx-control-slider-wrapper">
        <input
          type="range"
          class="stx-control-slider-input"
          value="${w??U}"
          min="${U}"
          max="${X}"
          step="${W}"
          onchange="${K}"
          oninput="this.nextElementSibling.textContent = this.value"
        />
        <span class="stx-control-slider-value">${w??U}</span>
      </div>
    </div>
  `}function k(q,w,K){let Q=typeof w==="string"?w:JSON.stringify(w,null,2);return`
    <div class="stx-control stx-control-json">
      <label class="stx-control-label">${Y(q)}</label>
      <textarea
        class="stx-control-json-input"
        onchange="${K}"
      >${Y(Q)}</textarea>
    </div>
  `}function d(q,w,K){return`
    <div class="stx-control stx-control-date">
      <label class="stx-control-label">${Y(q)}</label>
      <input
        type="date"
        class="stx-control-input"
        value="${Y(w||"")}"
        onchange="${K}"
      />
    </div>
  `}function p(){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 H(q,w,K,Q){let X=I(Q.options).map((W)=>{let Z=typeof W==="object"?W.value:W,_=typeof W==="object"?W.label:W;return`
        <button
          type="button"
          class="stx-control-btn-group-btn ${Z===w?"active":""}"
          data-value="${Y(String(Z))}"
          onclick="${K}"
        >${Y(String(_))}</button>
      `}).join("");return`
    <div class="stx-control stx-control-btn-group">
      <label class="stx-control-label">${Y(q)}</label>
      <div class="stx-control-btn-group-wrapper">
        ${X}
      </div>
    </div>
  `}function Y(q){return q.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function y(q){let w=v(q.name),K=f(q);return{id:w,title:q.name,variants:K,layout:{type:"single"}}}function f(q){let w=[],K={};for(let Q of q.props)if(Q.default!==void 0)K[Q.name]=Q.default;w.push({id:"default",title:"Default",state:K});for(let Q of q.props)if(Q.type==="boolean"&&Q.default===!1){let U={...K,[Q.name]:!0};w.push({id:`with-${Q.name}`,title:`With ${J(Q.name)}`,state:U})}for(let Q of q.props)if(Q.options&&Q.options.length>0){for(let U of Q.options)if(U!==Q.default){let X={...K,[Q.name]:U};w.push({id:`${Q.name}-${String(U).toLowerCase()}`,title:`${J(Q.name)}: ${U}`,state:X})}}return w}function R(q){let K={type:h(q)};if(q.options&&q.options.length>0)K.options=q.options.map((Q)=>typeof Q==="string"?{value:Q,label:Q}:Q);return K.title=J(q.name),K}function h(q){let w=q.type.toLowerCase();if(q.options&&q.options.length>0)return q.options.length<=4?"radio":"select";if(w==="boolean"||w==="bool")return"boolean";if(w==="number"||w==="int"||w==="float")return"number";if(w==="string"||w==="text"){if(q.name.toLowerCase().includes("color"))return"color";if(q.name.toLowerCase().includes("description")||q.name.toLowerCase().includes("content")||q.name.toLowerCase().includes("text"))return"textarea";return"text"}if(w==="array"||w==="object"||w.startsWith("{")||w.startsWith("["))return"json";if(w==="date")return"date";return"text"}function C(q){return q.map(R)}function t(q,w){let K=Object.entries(w).map(([Q,U])=>{if(typeof U==="string")return`${Q}="${U}"`;if(typeof U==="boolean")return U?Q:"";return`:${Q}="${JSON.stringify(U)}"`}).filter(Boolean).join(" ");return`<${q} ${K} />`}function J(q){return q.replace(/([A-Z])/g," $1").replace(/^./,(w)=>w.toUpperCase()).trim()}function v(q){return q.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"")}function o(q){let w=y(q),K=C(q.props),Q=q.props.map((X)=>{let W=X.default!==void 0?JSON.stringify(X.default):g(X.type);return`    ${X.name}: ${W}`}).join(`,
`),U=K.map((X,W)=>{let Z=q.props[W];return`      <${u(X.type)} v-model="state.${Z.name}" title="${X.title}" />`}).join(`
`);return`<!-- Auto-generated story for ${q.name} -->
<script>
import ${q.name} from './${q.name}.stx'

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

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

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

${w.variants.slice(1).map((X)=>`  <Variant title="${X.title}">
    <${q.name} ${m(X.state||{})} />
  </Variant>`).join(`

`)}
</Story>
`}function g(q){let w=q.toLowerCase();if(w==="boolean")return"false";if(w==="number")return"0";if(w==="array")return"[]";if(w==="object")return"{}";return"''"}function u(q){return{text:"StxText",number:"StxNumber",boolean:"StxCheckbox",select:"StxSelect",radio:"StxRadio",color:"StxColorSelect",json:"StxJson",date:"StxText",textarea:"StxTextarea",slider:"StxSlider",buttongroup:"StxButtonGroup"}[q]||"StxText"}function m(q){return Object.entries(q).map(([w,K])=>{if(typeof K==="string")return`${w}="${K}"`;if(typeof K==="boolean")return K?w:`:${w}="false"`;return`:${w}="${JSON.stringify(K)}"`}).join(" ")}function Kq(q){let w={};if(q)for(let K of q.props)w[K.name]=K.default;return{collapsed:!1,values:w,filter:""}}function Qq(q,w){if(!q)return`
      <div class="stx-controls-panel">
        <div class="stx-controls-empty">
          Select a story to edit props
        </div>
      </div>
    `;let Q=(w.filter?q.props.filter((U)=>U.name.toLowerCase().includes(w.filter.toLowerCase())):q.props).map((U)=>{let X=R(U),W=w.values[U.name],Z=`window.__stxStory.setProp('${U.name}', this.value)`;return D(X,W,Z)}).join("");return`
    <div class="stx-controls-panel ${w.collapsed?"collapsed":""}">
      <div class="stx-controls-header" onclick="window.__stxStory.toggleControlsPanel()">
        <span class="stx-controls-title">Controls</span>
        <span class="stx-controls-toggle">${w.collapsed?"\u25C0":"\u25B6"}</span>
      </div>
      <div class="stx-controls-body">
        <div class="stx-controls-search">
          <input
            type="text"
            placeholder="Filter props..."
            value="${s(w.filter)}"
            oninput="window.__stxStory.filterProps(this.value)"
          />
        </div>
        <div class="stx-controls-list">
          ${Q}
        </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 Uq(){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 Wq(){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 s(q){return q.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}export{Wq as getControlsPanelStyles,Qq as generateControlsPanel,Uq as generateAutoPropsDisabled,Kq as createControlsPanelState};
