import o from"@toolkit/components/ok-monaco.ok.js";async function t(o,t){if(!t)return;const e=null==o.$attr.text?"":String(o.$attr.text),n=o.$attr.lang||"json";if(t.textContent=e,t.dataset.monacoSource=e,e&&!(e.length>2e5))try{await o.$ok.componentRegistry.activate(o.$ok.componentRegistry.getRegistration("ok-monaco"),o);const e=await o.$ok.shared.monaco.load();t.setAttribute("data-lang","js"===n?"javascript":n);const a=getComputedStyle(o.$el).getPropertyValue("--ok-monaco-theme").trim()||"vs-dark";await e.editor.colorizeElement(t,{theme:a});const c=t.querySelectorAll("br");c[c.length-1]?.remove()}catch{}}export default{tag:"code-panel",dependencies:[o],attr:{lang:{default:"json"},text:{default:""},title:{default:""}},context:()=>({_codeEl:null,_copied:!1,copy(){const o=this._codeEl?.dataset.monacoSource??this._codeEl?.textContent??"";try{navigator.clipboard?.writeText(o)}catch{}this._copied=!0,setTimeout(()=>this._copied=!1,1200)}}),mounted(o){t(o,o.$context._codeEl),o.$watch(()=>[o.$attr.text,o.$attr.lang],()=>t(o,o.$context._codeEl)),o.$listen(o.$el,"transitionstart",e=>{"--ok-monaco-theme"===e.propertyName&&t(o,o.$context._codeEl)})},template:'\n      <div class="ok-code-block">\n        <div class="ok-code-block__header">\n          <span class="lang">{{ $attr.title || $attr.lang }}</span>\n          <span class="copy" @click="copy()">{{ _copied ? \'Copied!\' : \'Copy\' }}</span>\n        </div>\n        <pre><code :ref="_codeEl = $el"></code></pre>\n      </div>\n    ',style:"\n      @property --ok-monaco-theme {\n        syntax: '<custom-ident>';\n        inherits: true;\n        initial-value: vs-dark;\n      }\n      [tag] { display: block; transition: --ok-monaco-theme 1ms allow-discrete; }\n      [tag] .ok-code-block {\n        border-radius: 8px;\n        overflow: hidden;\n        background: var(--okdb-app-bg-deep);\n        border: 1px solid var(--okdb-app-border);\n      }\n      [tag] .ok-code-block__header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background: var(--okdb-app-surface);\n        padding: 5px 10px;\n        font-size: 11px;\n        color: var(--okdb-app-fg-muted);\n        font-family: var(--font-mono, monospace);\n        border-bottom: 1px solid var(--okdb-app-border);\n      }\n      [tag] .ok-code-block .lang { opacity: .85; letter-spacing: .03em; text-transform: uppercase; }\n      [tag] .ok-code-block .copy {\n        cursor: pointer;\n        padding: 2px 6px;\n        border-radius: 4px;\n        transition: .15s;\n        user-select: none;\n      }\n      [tag] .ok-code-block .copy:hover { color: var(--okdb-app-fg); background: var(--okdb-app-surface-2); }\n      [tag] .ok-code-block pre {\n        margin: 0;\n        padding: 8px 10px;\n        max-height: 320px;\n        overflow: auto;\n        font-family: var(--font-mono, monospace);\n        font-size: 11px;\n        white-space: pre;\n        line-height: 1.5;\n      }\n      [tag] .ok-code-block code { white-space: pre; }\n    "};