npm - atomicuilibrary - Versions diffs - 0.0.1 → 0.1.0 - Mend

atomicuilibrary 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (395) hide show

package/dist/components/ui-code-editor.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as o,transformTag as r}from"@stencil/core/internal/client";import{s as a,d as s}from"./icon.js";import{d as n,a as l}from"./badge.js";import{d as c}from"./input.js";import{d}from"./tooltip.js";const p=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=i(this,"valueChange",7),this.runCode=i(this,"runCode",7)}value="";language="javascript";theme="vs-dark";readonly=!1;lineNumbers=!0;toolbar=!1;toolbarLabelDisplay="hover";toolbarGroups=["all"];tabs=[];valueChange;runCode;highlightedCode="";lineCount=1;statusStats={line:1,col:1,selected:0};showSearch=!1;searchQuery="";showPalette=!1;paletteQuery="";showHelp=!1;activeTabIndex=0;unfoldedLines=new Set;foldedLines=new Set;lintErrors=[];activeToolbarTab="home";fontSize=14;showLineNumbers=!0;showMinimap=!0;showSidebar=!0;showBottomPanel=!0;activeSidebarTab="files";activeBottomTab="terminal";activeFileIndex=0;files=[{name:"index.js",language:"javascript",content:"// Welcome to the IDE\n// Start coding here..."},{name:"styles.css",language:"css",content:"/* Add your styles here /\nbody {\n margin: 0;\n}"},{name:"index.html",language:"html",content:"<!DOCTYPE html>\n<html>\n<body>\n <h1>Hello</h1>\n</body>\n</html>"}];terminalLogs=[{type:"info",text:"IDE Terminal initialized.",time:(new Date).toLocaleTimeString()}];suggestions=[];suggestionIndex=0;showSuggestions=!1;suggestionPos={top:0,left:0};textarea;pre;lineNumbersRef;minimapRef;minimapViewport;searchInput;paletteInput;charWidth=8.4;lineHeight=21;keywords={javascript:["function","return","const","let","var","import","export","class","if","else","for","while","switch","case","break","continue","true","false","null","undefined","console","log","document","window","async","await","try","catch","throw","new","this","super","typeof","instanceof","void","delete","in","of"],python:["def","class","return","if","elif","else","for","while","try","except","finally","import","from","as","pass","break","continue","True","False","None","print","with","yield","lambda","global","nonlocal","raise","assert"],html:["div","span","h1","h2","h3","p","a","button","input","form","img","ul","li","script","style","head","body","html","meta","link","title","header","footer","nav","main","section","article","aside"],css:["color","background","border","margin","padding","width","height","display","flex","grid","font-size","position","top","left","right","bottom","opacity","z-index","transform","transition","animation","justify-content","align-items"],java:["public","private","protected","class","interface","extends","implements","void","int","double","String","boolean","if","else","for","while","return","new","this","super","try","catch","finally","throw","throws","package","import","static","final"],csharp:["public","private","protected","class","interface","void","int","string","bool","if","else","for","while","return","new","this","var","namespace","using","static","readonly","async","await"]};commands=[{id:"theme-toggle",label:"Toggle Theme (Dark/Light)",action:()=>this.toggleTheme()},{id:"minimap-toggle",label:"Toggle Minimap",action:()=>this.showMinimap=!this.showMinimap},{id:"line-nums-toggle",label:"Toggle Line Numbers",action:()=>this.showLineNumbers=!this.showLineNumbers},{id:"format",label:"Format Document (Simple Indent)",action:()=>this.simpleFormat()},{id:"clear",label:"Clear Code",action:()=>{this.value="",this.valueChange.emit("")}},{id:"copy",label:"Copy to Clipboard",action:()=>this.handleCopy()},{id:"fold-all",label:"Fold All",action:()=>this.foldAll()},{id:"unfold-all",label:"Unfold All",action:()=>this.unfoldAll()},{id:"undo",label:"Undo",action:()=>document.execCommand("undo")},{id:"redo",label:"Redo",action:()=>document.execCommand("redo")}];componentWillLoad(){this.highlightCode(),this.updateLineCount(),this.runLinting()}componentDidLoad(){this.measureChar(),this.tabs.length>0&&this.handleTabClick(0)}measureChar(){if(!this.pre)return;const t=document.createElement("span");t.textContent="M",t.style.visibility="hidden",this.pre.appendChild(t);const e=t.getBoundingClientRect();this.charWidth=e.width,this.lineHeight=e.height,this.pre.removeChild(t)}valueChanged(){this.highlightCode(),this.updateLineCount(),this.runLinting()}languageChanged(){this.highlightCode(),this.runLinting()}tabsChanged(){this.tabs.length>0&&this.activeTabIndex>=this.tabs.length&&this.handleTabClick(0)}searchQueryChanged(){this.highlightCode()}executeCode(){if("javascript"===this.language\|\|"json"===this.language)try{const t=[],e={log:(...e)=>t.push({type:"info",text:e.map((t=>"object"==typeof t?JSON.stringify(t):t+"")).join(" ")}),error:(...e)=>t.push({type:"error",text:e.join(" ")}),warn:(...e)=>t.push({type:"warn",text:e.join(" ")})};return Function("console",this.value)(e),t.length>0?t:[{type:"info",text:"(Success: No output)"}]}catch(t){return[{type:"error",text:"Runtime Error: "+t.message}]}return[{type:"info",text:`Simulation for ${this.language} complete. (Code execution restricted to JS)`}]}handleInput=t=>{this.value=t.target.value,this.valueChange.emit(this.value),this.checkSuggestions()};checkSuggestions(){if(!this.textarea)return;const{selectionStart:t,value:e}=this.textarea;let i=t-1;for(;i>=0&&/[\w]/.test(e[i]);)i--;const o=e.substring(i+1,t);if(o.length<1)return void(this.showSuggestions=!1);const r=(this.keywords[this.language]\|\|[]).filter((t=>t.toLowerCase().startsWith(o.toLowerCase())&&t!==o));if(r.length>0){this.suggestions=r,this.suggestionIndex=0,this.showSuggestions=!0;const i=e.substring(0,t).split("\n");this.suggestionPos={top:i.lengththis.lineHeight-this.textarea.scrollTop+5,left:i[i.length-1].lengththis.charWidth-this.textarea.scrollLeft+10}}else this.showSuggestions=!1}acceptSuggestion(t){if(!this.textarea)return;const{selectionStart:e,value:i}=this.textarea;let o=e-1;for(;o>=0&&/[\w]/.test(i[o]);)o--;o++;const r=i.substring(0,o)+t+i.substring(e);this.value=r,this.valueChange.emit(r),this.showSuggestions=!1,requestAnimationFrame((()=>{this.textarea.selectionStart=this.textarea.selectionEnd=o+t.length,this.highlightCode(),this.textarea.focus()}))}handleScroll=()=>{if(this.textarea&&this.pre){const{scrollTop:t,scrollLeft:e}=this.textarea;if(this.pre.scrollTop=t,this.pre.scrollLeft=e,this.minimapRef&&(this.minimapRef.scrollTop=t/(this.textarea.scrollHeight-this.textarea.clientHeight)(this.minimapRef.scrollHeight-this.minimapRef.clientHeight),this.minimapViewport)){const e=this.textarea.clientHeight/this.textarea.scrollHeight;this.minimapViewport.style.top=t/this.textarea.scrollHeight100+"%",this.minimapViewport.style.height=100e+"%"}}this.lineNumbersRef&&this.textarea&&(this.lineNumbersRef.scrollTop=this.textarea.scrollTop)};handleKeydown=t=>{const e=t.ctrlKey\|\|t.metaKey;if(e&&t.shiftKey&&("p"===t.key\|\|"P"===t.key))return t.preventDefault(),void this.togglePalette();if(e&&"f"===t.key)return t.preventDefault(),void this.toggleSearch();if(this.showSuggestions){if("ArrowDown"===t.key)return t.preventDefault(),void(this.suggestionIndex=(this.suggestionIndex+1)%this.suggestions.length);if("ArrowUp"===t.key)return t.preventDefault(),void(this.suggestionIndex=(this.suggestionIndex-1+this.suggestions.length)%this.suggestions.length);if("Enter"===t.key\|\|"Tab"===t.key)return t.preventDefault(),void this.acceptSuggestion(this.suggestions[this.suggestionIndex]);if("Escape"===t.key)return void(this.showSuggestions=!1)}if("Tab"===t.key){t.preventDefault();const e=this.textarea.selectionStart,i=this.textarea.selectionEnd,o=" ";return this.value=this.value.substring(0,e)+o+this.value.substring(i),requestAnimationFrame((()=>{this.textarea.selectionStart=this.textarea.selectionEnd=e+o.length,this.highlightCode()})),void this.valueChange.emit(this.value)}const i=this.textarea.selectionStart,o=this.textarea.selectionEnd,r=this.value,a={"(":")","{":"}","[":"]",'"':'"',"'":"'"};if(a[t.key])return t.preventDefault(),this.value=r.substring(0,i)+t.key+a[t.key]+r.substring(o),requestAnimationFrame((()=>{this.textarea.selectionStart=this.textarea.selectionEnd=i+1,this.highlightCode()})),void this.valueChange.emit(this.value);if(["}","]",")",'"',"'"].includes(t.key)&&r[i]===t.key)return t.preventDefault(),void(this.textarea.selectionStart=this.textarea.selectionEnd=i+1);if("Enter"===t.key){t.preventDefault();const e=r.substring(0,i).split("\n").pop(),a=e.match(/^\s/);let s=a?a[0]:"";return(e.trim().endsWith("{")\|\|e.trim().endsWith(":"))&&(s+=" "),this.value=r.substring(0,i)+"\n"+s+r.substring(o),requestAnimationFrame((()=>{this.textarea.selectionStart=this.textarea.selectionEnd=i+1+s.length,this.highlightCode()})),void this.valueChange.emit(this.value)}if("Backspace"===t.key&&i===o&&i>0){const e=r[i-1],o=r[i];("{"===e&&"}"===o\|\|"("===e&&")"===o\|\|"["===e&&"]"===o\|\|'"'===e&&'"'===o\|\|"'"===e&&"'"===o)&&(t.preventDefault(),this.value=r.substring(0,i-1)+r.substring(i+1),requestAnimationFrame((()=>{this.textarea.selectionStart=this.textarea.selectionEnd=i-1,this.highlightCode()})),this.valueChange.emit(this.value))}};handleSelection=t=>{const e=t.target,i=e.value.substring(0,e.selectionStart).split("\n");this.statusStats={line:i.length,col:i[i.length-1].length+1,selected:e.selectionEnd-e.selectionStart}};handleMinimapClick=t=>{const e=t.currentTarget.getBoundingClientRect();this.textarea&&(this.textarea.scrollTop=(t.clientY-e.top)/e.heightthis.textarea.scrollHeight-this.textarea.clientHeight/2)};handleCopy=()=>{navigator.clipboard.writeText(this.value)};handleTabClick(t){if(t<0\|\|t>=this.tabs.length)return;this.activeTabIndex=t;const e=this.tabs[t];this.value=e.content,this.language=e.language,this.valueChange.emit(this.value)}toggleSearch=()=>{this.showSearch=!this.showSearch,this.showSearch?setTimeout((()=>this.searchInput?.focus()),50):this.searchQuery=""};findNext(){if(!this.searchQuery)return;const t=this.value;let e=t.indexOf(this.searchQuery,this.textarea.selectionEnd);-1===e&&(e=t.indexOf(this.searchQuery,0)),-1!==e&&this.selectAndScroll(e,e+this.searchQuery.length)}findPrev(){if(!this.searchQuery)return;const t=this.value;let e=t.lastIndexOf(this.searchQuery,this.textarea.selectionStart-1);-1===e&&(e=t.lastIndexOf(this.searchQuery)),-1!==e&&this.selectAndScroll(e,e+this.searchQuery.length)}selectAndScroll(t,e){this.textarea.focus(),this.textarea.selectionStart=t,this.textarea.selectionEnd=e,this.handleScroll()}togglePalette=()=>{this.showPalette=!this.showPalette,this.paletteQuery="",this.showPalette&&setTimeout((()=>this.paletteInput?.focus()),50)};runCommand(t){t.isSymbol?this.selectAndScroll(t.start,t.end):t.action(),this.showPalette=!1}getPaletteItems(){if(this.paletteQuery.startsWith("@"))return this.getSymbols(this.paletteQuery.substring(1));const t=this.paletteQuery.toLowerCase();return this.commands.filter((e=>e.label.toLowerCase().includes(t)))}getSymbols(t){const e=[],i=this.value.split("\n"),o=t.toLowerCase(),r={javascript:/function\s+([\w$]+)\|const\s+([\w$]+)\s=\s$[^)]$\s=>\|class\s+([\w$]+)/g,python:/def\s+([\w]+)\|class\s+([\w]+)/g,java:/(?:public\|private\|protected\|static\|\s) +[\w\<\>\[\]]+\s+([\w]+)\s$[^)]$\s\{\|class\s+([\w]+)/g,csharp:/(?:public\|private\|protected\|static\|\s) +[\w\<\>\[\]]+\s+([\w]+)\s$[^)]$\s\{\|class\s+([\w]+)/g}[this.language];if(!r)return[];let a=0;for(let t=0;t<i.length;t++){const s=i[t];let n;for(;null!==(n=r.exec(s));){const i=n[1]\|\|n[2]\|\|n[3];i&&i.toLowerCase().includes(o)&&e.push({id:"symbol-"+t,label:"@"+i,isSymbol:!0,start:a+n.index,end:a+n.index+n[0].length,line:t+1})}a+=s.length+1}return e}toggleTheme(){this.theme="vs-dark"===this.theme?"vs-light":"vs-dark"}toggleMinimap(){this.showMinimap=!this.showMinimap}handleSelectAll(){this.textarea&&this.textarea.select()}handleUndo(){document.execCommand("undo")}handleRedo(){document.execCommand("redo")}handleCommentSelection(){if(!this.textarea)return;const t=this.textarea.selectionStart,e=this.textarea.selectionEnd,i=this.value,o=i.substring(t,e);let r;if("javascript"===this.language\|\|"python"===this.language\|\|"java"===this.language\|\|"csharp"===this.language){const t="python"===this.language?"# ":"// ";r=o.includes("\n")?o.split("\n").map((e=>e.startsWith(t)?e.substring(t.length):t+e)).join("\n"):o.startsWith(t)?o.substring(t.length):t+o}else"html"===this.language?r=o.startsWith("\x3c!--")?o.replace(/^<!--\s([\s\S]?)\s-->$/,"$1"):`\x3c!-- ${o} --\x3e`:"css"===this.language&&(r=o.startsWith("/")?o.replace(/^\/\\s([\s\S]?)\s\\/$/,"$1"):`/ ${o} /`);void 0!==r&&(this.value=i.substring(0,t)+r+i.substring(e),this.valueChange.emit(this.value),requestAnimationFrame((()=>{this.textarea.selectionStart=t,this.textarea.selectionEnd=t+r.length,this.highlightCode()})))}simpleFormat(){if("json"===this.language){try{const t=JSON.parse(this.value);this.value=JSON.stringify(t,null,2),this.valueChange.emit(this.value)}catch(t){}return}const t=this.value.split("\n");let e=0;const i=[];for(let o=0;o<t.length;o++){let r=t[o].trim();""!==r?((r.match(/^[\}\]\)]/)\|\|r.startsWith("</"))&&(e=Math.max(0,e-1)),i.push(" ".repeat(e)+r),(r.endsWith("{")\|\|r.endsWith("[")\|\|r.endsWith("(")\|\|r.match(/<[^/].>$/)&&!r.match(/\/>$/)&&!r.includes("</"))&&e++):i.push("")}this.value=i.join("\n"),this.valueChange.emit(this.value),this.terminalLogs=[...this.terminalLogs,{type:"info",text:"Document formatted successfully.",time:(new Date).toLocaleTimeString()}]}getLineGitStatus(t){return t%15==0?"added":t%25==0?"modified":"none"}runLinting(){const t=[],e=this.value.split("\n"),i=[];for(let o=0;o<e.length;o++){const r=e[o];for(let e=0;e<r.length;e++){const a=r[e];if(["{","[","("].includes(a))i.push({char:a,line:o+1});else if(["}","]",")"].includes(a)){const e=i.pop();e&&this.matches(e.char,a)\|\|t.push({line:o+1,msg:`Unexpected '${a}'`})}}}i.length>0&&i.forEach((e=>{t.push({line:e.line,msg:`Unclosed '${e.char}'`})})),this.lintErrors=t}matches(t,e){return"{"===t&&"}"===e\|\|"["===t&&"]"===e\|\|"("===t&&")"===e}isLineFoldable(t,e){if(t>=e.length-1)return!1;const i=this.getIndentLevel(e[t]);return this.getIndentLevel(e[t+1])>i\|\|e[t].trim().endsWith("{")\|\|e[t].trim().endsWith(":")}getIndentLevel(t){const e=t.match(/^\s/);return e?e[0].length:0}toggleFold(t){this.foldedLines.has(t)?this.foldedLines.delete(t):this.foldedLines.add(t),this.foldedLines=new Set(this.foldedLines)}foldAll(){const t=this.value.split("\n");for(let e=0;e<t.length;e++)this.isLineFoldable(e,t)&&this.foldedLines.add(e+1);this.foldedLines=new Set(this.foldedLines)}unfoldAll(){this.foldedLines.clear(),this.foldedLines=new Set(this.foldedLines)}updateLineCount(){const t=this.value?this.value.split("\n").length:1;this.lineCount=t}highlightCode(){if(!this.value)return void(this.highlightedCode="");let t=this.escapeHtml(this.value);switch(this.language){case"javascript":case"json":t=this.highlightJS(t);break;case"html":t=this.highlightHTML(t);break;case"css":t=this.highlightCSS(t);break;case"python":t=this.highlightPython(t);break;case"java":case"csharp":t=this.highlightJavaCSharp(t);break;case"ladder":t=this.highlightLadder(t)}this.value.endsWith("\n")&&(t+="<br>"),this.highlightedCode=t}escapeRegex(t){return t.replace(/[.+?^${}()\|[\]\\]/g,"\\$&")}escapeHtml(t){return t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}highlightJS(t){return t.replace(/\/\/./g,'<span class="token comment">$&</span>').replace(/\/\[\s\S]?\\//g,'<span class="token comment">$&</span>').replace(/('.?')\|(".?")\|(`[\s\S]?`)/g,'<span class="token string">$&</span>').replace(/\b(const\|let\|var\|function\|return\|if\|else\|for\|while\|import\|export\|class\|this\|new\|true\|false\|null\|undefined\|async\|await\|try\|catch\|finally\|throw\|break\|continue\|default\|case\|switch\|typeof\|instanceof\|void\|delete\|in\|of\|static\|get\|set\|extends\|super)\b/g,'<span class="token keyword">$&</span>').replace(/\b(\d+)\b/g,'<span class="token number">$&</span>').replace(/\b([A-Z][a-zA-Z0-9_])\b/g,'<span class="token class">$&</span>').replace(/(\w+)(?=\()/g,'<span class="token function">$&</span>')}highlightHTML(t){return t.replace(/(<\/?)(\w+)(.?)(>)/g,((t,e,i,o,r)=>`<span class="token tag">${e}${i}</span>${o.replace(/(\w+)=("[^"]")/g,'<span class="token attr-name">$1</span>=<span class="token string">$2</span>')}<span class="token tag">${r}</span>`)).replace(/<!--[\s\S]?-->/g,'<span class="token comment">$&</span>')}highlightCSS(t){return t.replace(/\/\[\s\S]?\\//g,'<span class="token comment">$&</span>').replace(/([a-zA-Z-]+)(?=:)/g,'<span class="token property">$1</span>').replace(/(:)([^;]+)(;)/g,((t,e,i,o)=>`${e}<span class="token number">${i}</span>${o}`)).replace(/(\.\|#)([\w-]+)/g,'<span class="token selector">$1$2</span>')}highlightPython(t){return t.replace(/#./g,'<span class="token comment">$&</span>').replace(/("""[\s\S]?""")\|('''.?''')/g,'<span class="token string">$&</span>').replace(/('.?')\|(".?")/g,'<span class="token string">$&</span>').replace(/\b(def\|class\|if\|elif\|else\|for\|while\|return\|import\|from\|as\|try\|except\|finally\|with\|pass\|continue\|break\|True\|False\|None)\b/g,'<span class="token keyword">$&</span>').replace(/\b(\d+)\b/g,'<span class="token number">$&</span>').replace(/\b([A-Z][a-zA-Z0-9_])\b/g,'<span class="token class">$&</span>').replace(/@\w+/g,'<span class="token function">$&</span>')}highlightJavaCSharp(t){return t.replace(/\/\/./g,'<span class="token comment">$&</span>').replace(/('.?')\|(".?")/g,'<span class="token string">$&</span>').replace(/\b(public\|private\|protected\|static\|final\|class\|interface\|void\|int\|double\|String\|boolean\|if\|else\|for\|while\|return\|new\|this\|super\|extends\|implements\|try\|catch\|finally\|throw\|throws\|package\|import\|namespace\|using\|var)\b/g,'<span class="token keyword">$&</span>').replace(/\b(\d+)\b/g,'<span class="token number">$&</span>').replace(/\b([A-Z][a-zA-Z0-9_])\b/g,'<span class="token class">$&</span>').replace(/@\w+/g,'<span class="token function">$&</span>')}highlightLadder(t){return t.replace(/$\.?\$/g,'<span class="token comment">$&</span>').replace(/\b(XIC\|XIO\|OTE\|OTL\|OTU\|TON\|TOF\|RTO\|CTU\|CTD\|MOV\|COP\|ADD\|SUB\|MUL\|DIV\|LIM\|EQU\|NEQ\|LES\|GRT\|LEQ\|GEQ\|JMP\|LBL)\b/g,'<span class="token keyword">$&</span>').replace(/\b(PROGRAM\|END_PROGRAM\|VAR\|END_VAR\|BOOL\|INT\|REAL\|TIME\|TON\|IF\|THEN\|END_IF)\b/g,'<span class="token keyword">$&</span>').replace(/%[IQM][\d\.]+/g,'<span class="token number">$&</span>').replace(/\b([A-Z][a-zA-Z0-9_])\b/g,'<span class="token variable">$&</span>')}renderLineNumbers(){if(!this.showLineNumbers)return null;const t=this.value.split("\n");return o("div",{class:"line-numbers",ref:t=>this.lineNumbersRef=t},t.map(((e,i)=>{const r=i+1,a=this.lintErrors.find((t=>t.line===r)),s=this.isLineFoldable(i,t),n=this.foldedLines.has(r),l=this.getLineGitStatus(i);return o("div",{class:{"line-number":!0,["git-"+l]:"none"!==l},onClick:()=>s&&this.toggleFold(r),style:{color:a?"#ff4d4d":"inherit"},title:a?a.msg:""},r,s&&o("span",{class:"fold-icon"},o("ui-icon",{name:"chevron-"+(n?"right":"down"),library:"fontawesome",size:"10px"})))})))}renderPalette(){if(!this.showPalette)return null;const t=this.getPaletteItems();return o("div",{class:"editor-palette-overlay",onClick:this.togglePalette},o("div",{class:"editor-palette",onClick:t=>t.stopPropagation()},o("div",{class:"palette-input-wrapper"},o("ui-icon",{name:"terminal",library:"fontawesome"}),o("ui-input",{type:"text",placeholder:"Type a command or @ for symbols...",value:this.paletteQuery,onInputChange:t=>this.paletteQuery=t.detail,ref:t=>this.paletteInput=t,onInputKeydown:e=>{"Escape"===e.detail.key&&this.togglePalette(),"Enter"===e.detail.key&&t.length>0&&this.runCommand(t[0])},variant:"plain",size:"sm"})),o("div",{class:"palette-results"},t.length>0?t.map((t=>o("div",{class:"palette-item",onClick:()=>this.runCommand(t)},o("ui-icon",{name:t.isSymbol?"at":"play",library:"fontawesome",size:"14px"}),o("span",null,t.label),t.line&&o("span",{class:"palette-meta"},"Line ",t.line)))):o("div",{class:"palette-no-results"},"No results found"))))}renderSearch(){return this.showSearch?o("div",{class:"search-widget"},o("ui-input",{customClass:"search-input",ref:t=>this.searchInput=t,type:"text",placeholder:"Find",value:this.searchQuery,onInputChange:t=>this.searchQuery=t.detail,onInputKeydown:t=>{const e=t.detail;"Escape"===e.key&&(this.showSearch=!1),"Enter"===e.key&&(e.shiftKey?this.findPrev():this.findNext())},size:"sm",variant:"outlined"}),o("div",{class:"search-actions"},o("ui-button",{variant:"ghost",size:"sm",onClick:()=>this.findPrev(),ariaLabel:"Previous (Shift+Enter)",icon:"arrow-up",iconLibrary:"fontawesome",iconOnly:!0,iconSize:"14px"}),o("ui-button",{variant:"ghost",size:"sm",onClick:()=>this.findNext(),ariaLabel:"Next (Enter)",icon:"arrow-down",iconLibrary:"fontawesome",iconOnly:!0,iconSize:"14px"}),o("ui-button",{variant:"ghost",size:"sm",onClick:()=>this.showSearch=!1,ariaLabel:"Close search",icon:"times",iconLibrary:"fontawesome",iconOnly:!0,iconSize:"14px"}))):null}renderMinimap(){return this.showMinimap?o("div",{class:"minimap-container",onClick:this.handleMinimapClick},o("div",{class:"minimap-content",innerHTML:a(this.highlightedCode),ref:t=>this.minimapRef=t}),o("div",{class:"minimap-viewport",ref:t=>this.minimapViewport=t})):null}renderStatusBar(){return o("div",{class:"status-bar"},o("div",{class:"status-item"},o("ui-icon",{name:"code-branch",library:"fontawesome",size:"14px"})," main"),o("div",{class:"status-item"},o("ui-icon",{name:"exclamation-circle",library:"fontawesome",size:"14px"})," ",this.lintErrors.length," Errors"),o("div",{class:"status-item"},"Ln ",this.statusStats.line,", Col ",this.statusStats.col),o("div",{class:"status-item"},this.statusStats.selected>0?`(${this.statusStats.selected} selected)`:""),o("div",{class:"status-item"},"Spaces: 2"),o("div",{class:"status-item"},this.language.toUpperCase()),o("div",{class:"status-item",onClick:()=>this.toggleTheme(),style:{cursor:"pointer"}},o("ui-icon","vs-dark"===this.theme?{name:"moon",library:"fontawesome",size:"14px"}:{name:"sun",library:"fontawesome",size:"14px"})))}renderSuggestions(){return this.showSuggestions?o("ul",{class:"suggestion-list",style:{top:this.suggestionPos.top+"px",left:this.suggestionPos.left+"px"}},this.suggestions.map(((t,e)=>o("li",{class:e===this.suggestionIndex?"active":"",onClick:()=>this.acceptSuggestion(t),onMouseDown:t=>t.preventDefault()},o("ui-icon",{name:"cube",library:"fontawesome",size:"14px",class:"icon"})," ",t)))):null}renderRibbonButton(t,e,i,r={}){const{lg:a=!1,color:s}=r,n="always"===this.toolbarLabelDisplay,l="hover"===this.toolbarLabelDisplay,c=o("ui-button",{slot:l?"target":void 0,onClick:i,style:s?{color:s}:{},ariaLabel:e,label:n?e:void 0,icon:t.replace(/^fa[sb]? fa-/,""),iconLibrary:"fontawesome",iconOnly:!n,size:a?"lg":"md",variant:"ghost"});return l?o("ui-tooltip",{content:e,position:"bottom"},c):c}isGroupVisible(t){return!(this.toolbarGroups&&!this.toolbarGroups.includes("all"))\|\|this.toolbarGroups.includes(t)}renderToolbar(){return this.toolbar?o("div",{class:"editor-ribbon-container labels-"+this.toolbarLabelDisplay},o("div",{class:"ribbon-tabs"},o("div",{class:"ribbon-tab "+("home"===this.activeToolbarTab?"active":""),onClick:()=>this.activeToolbarTab="home"},o("ui-tooltip",{content:"Home",position:"bottom"},o("ui-icon",{name:"home",library:"fontawesome",slot:"target",size:"16px"}))),o("div",{class:"ribbon-tab "+("edit"===this.activeToolbarTab?"active":""),onClick:()=>this.activeToolbarTab="edit"},o("ui-tooltip",{content:"Edit",position:"bottom"},o("ui-icon",{name:"edit",library:"fontawesome",slot:"target",size:"16px"}))),o("div",{class:"ribbon-tab "+("view"===this.activeToolbarTab?"active":""),onClick:()=>this.activeToolbarTab="view"},o("ui-tooltip",{content:"View",position:"bottom"},o("ui-icon",{name:"eye",library:"fontawesome",slot:"target",size:"16px"}))),o("div",{class:"ribbon-tab "+("run"===this.activeToolbarTab?"active":""),onClick:()=>this.activeToolbarTab="run"},o("ui-tooltip",{content:"Run",position:"bottom"},o("ui-icon",{name:"play",library:"fontawesome",slot:"target",size:"16px"})))),o("div",{class:"ribbon-content"},"home"===this.activeToolbarTab&&o("div",{class:"ribbon-panel"},this.isGroupVisible("history")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-undo","Undo",(()=>this.handleUndo()),{lg:!0}),this.renderRibbonButton("fas fa-redo","Redo",(()=>this.handleRedo()),{lg:!0})),o("div",{class:"ribbon-group-label"},"History")),this.isGroupVisible("history")&&this.isGroupVisible("clipboard")&&o("div",{class:"ribbon-group divider"}),this.isGroupVisible("clipboard")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-copy","Copy",(()=>this.handleCopy())),this.renderRibbonButton("fas fa-mouse-pointer","Select All",(()=>this.handleSelectAll()))),o("div",{class:"ribbon-group-label"},"Clipboard")),(this.isGroupVisible("history")\|\|this.isGroupVisible("clipboard"))&&this.isGroupVisible("search")&&o("div",{class:"ribbon-group divider"}),this.isGroupVisible("search")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-search","Find",(()=>this.toggleSearch()),{lg:!0}),this.renderRibbonButton("fas fa-terminal","Palette",(()=>this.togglePalette()),{lg:!0})),o("div",{class:"ribbon-group-label"},"Search"))),"edit"===this.activeToolbarTab&&o("div",{class:"ribbon-panel"},this.isGroupVisible("document")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-code","Format",(()=>this.simpleFormat()),{lg:!0})),o("div",{class:"ribbon-group-label"},"Document")),this.isGroupVisible("document")&&this.isGroupVisible("folding")&&o("div",{class:"ribbon-group divider"}),this.isGroupVisible("folding")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-minus-square","Fold All",(()=>this.foldAll())),this.renderRibbonButton("fas fa-plus-square","Unfold All",(()=>this.unfoldAll()))),o("div",{class:"ribbon-group-label"},"Folding")),(this.isGroupVisible("document")\|\|this.isGroupVisible("folding"))&&this.isGroupVisible("actions")&&o("div",{class:"ribbon-group divider"}),this.isGroupVisible("actions")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-comment-slash","Comment",(()=>this.handleCommentSelection()))),o("div",{class:"ribbon-group-label"},"Actions"))),"view"===this.activeToolbarTab&&o("div",{class:"ribbon-panel"},this.isGroupVisible("interface")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-map","Minimap",(()=>this.toggleMinimap()),{lg:!0,active:this.showMinimap}),this.renderRibbonButton("fas fa-list-ol","Line Numbers",(()=>this.showLineNumbers=!this.showLineNumbers),{lg:!0,active:this.showLineNumbers})),o("div",{class:"ribbon-group-label"},"Interface")),this.isGroupVisible("interface")&&this.isGroupVisible("theme")&&o("div",{class:"ribbon-group divider"}),this.isGroupVisible("theme")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("vs-dark"===this.theme?"fas fa-moon":"fas fa-sun","vs-dark"===this.theme?"Dark":"Light",(()=>this.toggleTheme()),{lg:!0})),o("div",{class:"ribbon-group-label"},"Theme")),(this.isGroupVisible("interface")\|\|this.isGroupVisible("theme"))&&this.isGroupVisible("appearance")&&o("div",{class:"ribbon-group divider"}),this.isGroupVisible("appearance")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},o("div",{class:"ribbon-select-container"},o("select",{onChange:t=>this.fontSize=parseInt(t.target.value)},[10,12,14,16,18,20,24].map((t=>o("option",{value:t,selected:this.fontSize===t},t,"px")))),"always"===this.toolbarLabelDisplay&&o("span",null,"Font Size"))),o("div",{class:"ribbon-group-label"},"Appearance"))),"run"===this.activeToolbarTab&&o("div",{class:"ribbon-panel"},this.isGroupVisible("execution")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-play","Run Code",(()=>this.runCode.emit()),{lg:!0,color:"#4ade80"})),o("div",{class:"ribbon-group-label"},"Execution"))))):null}renderHelp(){return this.showHelp?o("div",{class:"help-modal-overlay",onClick:()=>this.showHelp=!1},o("div",{class:"help-modal",onClick:t=>t.stopPropagation()},o("div",{class:"help-header"},o("h3",null,"Editor Shortcuts & Help"),o("ui-button",{variant:"ghost",onClick:()=>this.showHelp=!1,ariaLabel:"Close help",icon:"times",iconLibrary:"fontawesome",iconOnly:!0})),o("div",{class:"help-content"},o("div",{class:"help-section"},o("h4",null,"Keyboard Shortcuts"),o("ul",null,o("li",null,o("kbd",null,"Ctrl")," + ",o("kbd",null,"F")," : Find / Search"),o("li",null,o("kbd",null,"Ctrl")," + ",o("kbd",null,"Shift")," + ",o("kbd",null,"P")," : Command Palette"),o("li",null,o("kbd",null,"Ctrl")," + ",o("kbd",null,"Space")," : Trigger Suggestions"),o("li",null,o("kbd",null,"Tab")," : Indent / Accept Suggestion"))),o("div",{class:"help-section"},o("h4",null,"Toolbar Features"),o("ul",null,o("li",null,o("ui-icon",{name:"play",library:"fontawesome",style:{color:"#4ade80"},size:"14px"})," ",o("strong",null,"Run"),": Execute code (demo mode)"),o("li",null,o("ui-icon",{name:"indent",library:"fontawesome",size:"14px"})," ",o("strong",null,"Format"),": Auto-indent code"),o("li",null,o("ui-icon",{name:"moon",library:"fontawesome",size:"14px"})," ",o("strong",null,"Theme"),": Toggle Dark/Light")))))):null}renderTabBar(){return this.tabs&&0!==this.tabs.length?o("div",{class:"editor-tabs"},this.tabs.map(((t,e)=>o("div",{class:"editor-tab "+(e===this.activeTabIndex?"active":""),onClick:()=>this.handleTabClick(e)},o("ui-icon",{class:"tab-icon",name:this.getIconForLang(t.language),library:"fontawesome"}),o("span",{class:"tab-title"},t.title))))):null}getIconForLang(t){switch(t){case"javascript":return"js-square";case"html":return"html5";case"css":return"css3";case"python":return"python";case"java":return"java";case"json":return"code";default:return"file-alt"}}renderSidebar(){return this.showSidebar?o("div",{class:{"editor-sidebar":!0,collapsed:!this.showSidebar}},o("div",{class:"sidebar-tabs"},o("div",{class:{"sidebar-tab":!0,active:"files"===this.activeSidebarTab},onClick:()=>this.activeSidebarTab="files"},o("ui-icon",{name:"copy",library:"fontawesome"}))),o("div",{class:"sidebar-content"},"files"===this.activeSidebarTab&&o("div",{class:"file-explorer"},o("div",{class:"sidebar-header"},"EXPLORER"),o("div",{class:"file-list"},this.files.map(((t,e)=>o("div",{class:{"file-item":!0,active:this.activeFileIndex===e},onClick:()=>this.switchFile(e)},o("ui-icon",{name:this.getFileIcon(t.name).split(" ").find((t=>t.startsWith("fa-"))).replace("fa-",""),library:"fontawesome",class:this.getFileIcon(t.name)}),o("span",null,t.name)))))))):null}handleTerminalKeyDown=t=>{if("Enter"===t.key){const e=t.target,i=e.value.trim().toLowerCase();if(!i)return;this.terminalLogs=[...this.terminalLogs,{type:"info",text:"$ "+e.value,time:(new Date).toLocaleTimeString()}],"clear"===i?this.terminalLogs=[]:"run"===i\|\|"node index.js"===i?(this.terminalLogs=[...this.terminalLogs,{type:"info",text:"Executing program...",time:(new Date).toLocaleTimeString()}],setTimeout((()=>{const t=this.executeCode().map((t=>({...t,time:(new Date).toLocaleTimeString()})));this.terminalLogs=[...this.terminalLogs,...t],this.runCode.emit()}),500)):this.terminalLogs="help"===i?[...this.terminalLogs,{type:"info",text:"Available commands: run, clear, help, ls, whoami",time:(new Date).toLocaleTimeString()}]:[...this.terminalLogs,{type:"error",text:"Command not found: "+i,time:(new Date).toLocaleTimeString()}],e.value=""}};renderBreadcrumbs(){const t=this.files[this.activeFileIndex];return o("div",{class:"editor-breadcrumbs"},o("div",{class:"breadcrumb-item"},o("ui-icon",{name:"folder-open",library:"fontawesome",size:"12px"}),o("span",null,"project"),o("span",{class:"separator"},"/")),o("div",{class:"breadcrumb-item"},o("ui-icon",{name:this.getFileIcon(t.name).split(" ").find((t=>t.startsWith("fa-"))).replace("fa-",""),library:"fontawesome",class:this.getFileIcon(t.name),size:"12px"}),o("span",null,t.name)))}renderBottomPanel(){return this.showBottomPanel?o("div",{class:{"editor-bottom-panel":!0,collapsed:!this.showBottomPanel}},o("div",{class:"panel-header"},o("div",{class:"panel-tabs"},o("div",{class:{"panel-tab":!0,active:"terminal"===this.activeBottomTab},onClick:()=>this.activeBottomTab="terminal"},"TERMINAL"),o("div",{class:{"panel-tab":!0,active:"output"===this.activeBottomTab},onClick:()=>this.activeBottomTab="output"},"OUTPUT"),o("div",{class:{"panel-tab":!0,active:"problems"===this.activeBottomTab},onClick:()=>this.activeBottomTab="problems"},"PROBLEMS")),o("div",{class:"panel-controls"},o("ui-icon",{name:"times",library:"fontawesome",onClick:()=>this.showBottomPanel=!1,style:{cursor:"pointer"}}))),o("div",{class:"panel-content"},"terminal"===this.activeBottomTab&&o("div",{class:"terminal-content"},this.terminalLogs.map((t=>o("div",{class:"log-item "+t.type},o("span",{class:"log-time"},"[",t.time,"]"),o("span",{class:"log-text"},t.text)))),o("div",{class:"terminal-input-line"},o("span",{class:"terminal-prompt"},"$"),o("ui-input",{type:"text",customClass:"terminal-input",placeholder:"Type a command (run, clear, help)...",onInputKeydown:t=>this.handleTerminalKeyDown(t.detail),variant:"plain",size:"sm",fullWidth:!0}))),"output"===this.activeBottomTab&&o("div",{class:"output-preview",style:{display:"flex",alignItems:"center",justifyCenter:"center",height:"100%",background:"#f8fafc",color:"#64748b"}},o("div",{style:{textAlign:"center"}},o("ui-icon",{name:"eye-slash",library:"fontawesome",size:"32px",style:{opacity:.5,marginBottom:"12px"}}),o("p",{style:{fontSize:"14px",fontWeight:"500"}},"Live Preview Disabled (No Iframe)"))))):null}switchFile(t){this.activeFileIndex=t;const e=this.files[t];this.value=e.content,this.language=e.language,this.valueChange.emit(this.value)}getFileIcon(t){return t.endsWith(".js")?"fab fa-js-square text-warning":t.endsWith(".html")?"fab fa-html5 text-danger":t.endsWith(".css")?"fab fa-css3-alt text-primary":"fas fa-file-code"}render(){const t="vs-light"===this.theme?"theme-vs-light":"theme-vs-dark",e=this.value.split("\n");let i=-1,r=-1;for(let t=0;t<e.length;t++)if(-1!==i){if(!(this.getIndentLevel(e[t])<=r&&""!==e[t].trim()))continue;i=-1}else this.foldedLines.has(t+1)&&(i=t+1,r=this.getIndentLevel(e[t]));return o("div",{key:"321fc92d91bf5365394b866e7efef0bcce5f92e8",class:"code-editor-container "+t},this.renderTabBar(),this.renderToolbar(),this.renderPalette(),o("div",{key:"212c74c9fae6bddf8206698c2b7279acc328cdf6",class:"code-editor-layout"},this.renderSidebar(),o("div",{key:"6afeb17b34a66e4cdaf72d8582041913a58d13fc",class:"editor-main-panel"},this.renderBreadcrumbs(),o("div",{key:"7a3e97d74cc5b68250a4471a3e1b9fa858d22b98",class:"editor-main-content",style:{display:"flex",flex:"1",minHeight:"0",position:"relative"}},this.renderLineNumbers(),o("div",{key:"ce569b57f4c9b4365cd9f014d8aff2d1c8679b8b",class:"editor-wrapper"},this.renderSearch(),this.renderSuggestions(),o("ui-button",{key:"629168b1f60cc6a962af7d4f81e0078d5c13f2d4",variant:"ghost",class:"copy-button",onClick:this.handleCopy,ariaLabel:"Copy Code",icon:"copy",iconLibrary:"fontawesome",iconOnly:!0}),o("pre",{key:"d4fa13f823d5ba4ab80db9ab66286de099ba28cc",class:"syntax-highlighter",ref:t=>this.pre=t,innerHTML:a(this.highlightedCode)}),o("textarea",{key:"77d8ec6eb4aa8cea02da3ca30d1b5a992717d319",class:"editor-content",ref:t=>this.textarea=t,value:this.value,onInput:this.handleInput,onScroll:this.handleScroll,onKeyDown:this.handleKeydown,onSelect:this.handleSelection,onClick:this.handleSelection,onKeyUp:this.handleSelection,spellcheck:!1,readonly:this.readonly,role:"textbox","aria-multiline":"true","aria-label":"Code Editor"})),this.renderMinimap()),this.renderBottomPanel())),this.renderStatusBar(),this.renderHelp())}static get watchers(){return{value:[{valueChanged:0}],language:[{languageChanged:0}],tabs:[{tabsChanged:0}],searchQuery:[{searchQueryChanged:0}]}}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:flex;flex-direction:column;font-family:"Menlo", "Monaco", "Courier New", monospace;font-size:14px;line-height:1.5;position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--border-color, var(--border-subtle, #e2e8f0));background-color:var(--editor-bg);color:var(--editor-fg);--editor-bg:var(--bg-primary, #ffffff);--editor-fg:var(--text-primary, #1e293b);--line-num-bg:var(--bg-primary, #f8fafc);--line-num-fg:var(--color-primary, #94a3b8);--indent-guide:rgba(0, 0, 0, 0.05);--cursor-color:var(--text-primary, #000);--selection-bg:var(--color-primary, #b3d4fc);--status-bar-bg:var(--bg-secondary, #f1f5f9);--status-bar-fg:var(--color-primary, #64748b);--minimap-width:60px;--git-added:var(--color-success, #28a745);--git-modified:var(--color-danger, #ffc107)}:host(.theme-vs-dark){--editor-bg:var(--bg-primary, #1e1e1e);--editor-fg:var(--bg-secondary, #d4d4d4);--line-num-bg:var(--bg-primary, #1e1e1e);--line-num-fg:var(--text-muted, #858585);--cursor-color:var(--text-standard, #ffffff);--selection-bg:var(--color-primary, #264f78);--status-bar-bg:var(--color-primary, #007acc);--status-bar-fg:var(--bg-primary, #ffffff);border-color:var(--border-strong, #333)}.code-editor-container{display:flex;flex-direction:column;flex:1;position:relative;overflow:hidden;height:100%}.code-editor-layout{display:grid;grid-template-columns:auto 1fr auto;flex:1;min-height:0;position:relative;overflow:hidden;background-color:var(--editor-bg)}.sidebar-tabs{width:48px;flex-shrink:0;background-color:var(--status-bar-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:20px}.sidebar-tabs .sidebar-tab{font-size:20px;color:var(--status-bar-fg);cursor:pointer;width:100%;display:flex;justify-content:center;position:relative;padding:8px 0;opacity:0.6;transition:all 0.2s}.sidebar-tabs .sidebar-tab.active{opacity:1;color:var(--color-primary, #007acc);border-left:2px solid var(--color-primary, #007acc)}.sidebar-tabs .sidebar-tab:hover{opacity:1}.sidebar-content{flex:1;overflow-y:auto;padding:0}.sidebar-header{padding:10px 16px;font-size:11px;font-weight:600;color:var(--status-bar-fg);text-transform:uppercase;letter-spacing:0.5px}.file-list{padding:4px 0}.file-item{display:flex;align-items:center;padding:6px 16px;gap:8px;cursor:pointer;font-size:13px;color:var(--status-bar-fg);transition:background 0.2s}.file-item:hover{background-color:rgba(128, 128, 128, 0.1);color:var(--editor-fg)}.file-item.active{background-color:rgba(0, 122, 204, 0.1);color:var(--color-primary, #007acc);font-weight:500}.file-item i{width:16px;text-align:center}.file-item .text-warning{color:var(--color-warning, #f59e0b)}.file-item .text-danger{color:var(--color-danger, #ef4444)}.file-item .text-primary{color:var(--color-primary, #10b981)}.editor-main-panel{display:flex;flex-direction:column;min-width:0;flex:1}.editor-breadcrumbs{height:35px;background-color:var(--editor-bg);border-bottom:1px solid var(--border-color);display:flex;align-items:center;padding:0 16px;font-size:13px;color:var(--status-bar-fg);gap:10px;user-select:none}.editor-breadcrumbs .breadcrumb-item{display:flex;align-items:center;gap:6px;cursor:pointer}.editor-breadcrumbs .breadcrumb-item:hover{color:var(--editor-fg)}.editor-breadcrumbs .breadcrumb-item i{font-size:14px}.editor-breadcrumbs .breadcrumb-item .separator{opacity:0.5;margin:0 4px}.editor-bottom-panel{height:250px;background-color:var(--editor-bg);border-top:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden;transition:height 0.3s ease}.editor-bottom-panel.collapsed{height:0;border-top:none}.editor-bottom-panel .panel-header{height:35px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;border-bottom:1px solid var(--border-color);background-color:var(--status-bar-bg)}.editor-bottom-panel .panel-tabs{display:flex;gap:20px;height:100%}.editor-bottom-panel .panel-tabs .panel-tab{font-size:11px;font-weight:600;color:var(--status-bar-fg);height:100%;display:flex;align-items:center;cursor:pointer;border-bottom:2px solid transparent;opacity:0.7;transition:all 0.2s}.editor-bottom-panel .panel-tabs .panel-tab:hover{opacity:1}.editor-bottom-panel .panel-tabs .panel-tab.active{opacity:1;color:var(--color-primary, #007acc);border-bottom-color:var(--color-primary, #007acc)}.editor-bottom-panel .panel-controls i{font-size:12px;color:var(--status-bar-fg);cursor:pointer;opacity:0.6}.editor-bottom-panel .panel-controls i:hover{opacity:1;color:var(--color-danger, #ef4444)}.editor-bottom-panel .panel-content{flex:1;overflow-y:auto;padding:12px 16px;font-family:"Menlo", "Monaco", "Courier New", monospace;background-color:var(--editor-bg)}.editor-bottom-panel .terminal-content .log-item{margin-bottom:4px;font-size:12px;display:flex;gap:8px}.editor-bottom-panel .terminal-content .log-item .log-time{opacity:0.5}.editor-bottom-panel .terminal-content .log-item.info{color:var(--color-success, #10b981)}.editor-bottom-panel .terminal-content .log-item.error{color:var(--color-danger, #ef4444)}.editor-bottom-panel .terminal-content .log-item.warn{color:var(--color-warning, #f59e0b)}.editor-bottom-panel .terminal-content .terminal-input-line{display:flex;gap:8px;margin-top:8px;align-items:center}.editor-bottom-panel .terminal-content .terminal-input-line .terminal-prompt{color:var(--color-primary, #007acc);font-weight:bold}.editor-bottom-panel .terminal-content .terminal-input-line .terminal-input{background:transparent;border:none;color:var(--editor-fg);outline:none;flex:1;font-family:inherit;font-size:12px}.line-numbers{flex-shrink:0;padding:10px 0;text-align:right;background-color:var(--line-num-bg);color:var(--line-num-fg);border-right:1px solid rgba(128, 128, 128, 0.1);user-select:none;min-width:45px;overflow:hidden}.line-numbers .line-number{display:flex;padding:0 4px 0 8px;height:1.5em;white-space:nowrap;justify-content:space-between;cursor:pointer}.line-numbers .line-number .fold-icon{opacity:0;font-size:9px;margin-left:4px;display:flex;align-items:center;color:var(--line-num-fg)}.line-numbers .line-number.git-added{border-left:3px solid var(--git-added)}.line-numbers .line-number.git-modified{border-left:3px solid var(--git-modified)}.line-numbers .line-number:hover .fold-icon{opacity:1;color:var(--editor-fg)}.folded-placeholder{background-color:var(--status-bar-bg);color:var(--status-bar-fg);padding:0 4px;border-radius:2px;font-size:10px;cursor:pointer;user-select:none;margin-left:4px;display:inline-block;height:14px;line-height:14px}.editor-wrapper{flex-grow:1;position:relative;overflow:hidden}.editor-content,.syntax-highlighter{margin:0;padding:10px;border:none;box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:inherit;tab-size:2;white-space:pre;word-wrap:normal;overflow-x:auto;overflow-y:auto;position:absolute;top:0;left:0;width:100%;height:100%}.editor-content{color:transparent;background:transparent;caret-color:var(--cursor-color);z-index:1;resize:none;outline:none;background-image:linear-gradient(to right, var(--indent-guide) 1px, transparent 1px);background-size:calc(var(--indent-size, 2) * 8.4px) 100%;background-repeat:repeat-x;background-attachment:local}.editor-content::selection{background:var(--selection-bg);color:transparent}.syntax-highlighter{z-index:0;pointer-events:none;color:var(--editor-fg)}.lint-error{text-decoration:underline wavy var(--color-danger, #ff4d4d);text-decoration-thickness:2px;position:relative}.minimap-container{width:var(--minimap-width);border-left:1px solid rgba(128, 128, 128, 0.1);background:var(--editor-bg);overflow:hidden;position:relative;user-select:none;flex-shrink:0;cursor:pointer}.minimap-content{transform-origin:top left;transform:scale(0.15);width:666%;pointer-events:none;padding:10px}.minimap-viewport{position:absolute;left:0;width:100%;background:rgba(100, 100, 100, 0.2);cursor:grab;transition:background 0.2s}.minimap-viewport:hover{background:rgba(100, 100, 100, 0.3)}.minimap-viewport:active{cursor:grabbing;background:rgba(100, 100, 100, 0.4)}.status-bar{display:flex;justify-content:flex-end;gap:16px;padding:4px 12px;background-color:var(--status-bar-bg);color:var(--status-bar-fg);font-size:11px;flex-shrink:0;user-select:none}.status-item{display:flex;align-items:center;gap:6px;cursor:default}.status-item i{font-size:10px}.command-palette-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:100;display:flex;justify-content:center;align-items:flex-start;padding-top:20px;backdrop-filter:blur(1px)}.command-palette{width:400px;max-width:90%;background:var(--editor-bg);border:1px solid var(--border-color, #454545);box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);border-radius:6px;display:flex;flex-direction:column;overflow:hidden;animation:slideDown 0.15s ease-out}.command-palette input{width:100%;padding:10px;border:none;background:var(--status-bar-bg);color:var(--editor-fg);font-family:inherit;font-size:13px;outline:none;border-bottom:1px solid var(--border-color, rgba(128, 128, 128, 0.2))}.command-palette .command-list{max-height:250px;overflow-y:auto;margin:0;padding:0;list-style:none}.command-palette .command-item{padding:8px 12px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;color:var(--editor-fg);border-left:2px solid transparent;}.command-palette .command-item:hover,.command-palette .command-item.active{background-color:var(--selection-bg);border-left-color:var(--status-bar-bg)}.command-palette .command-item .shortcut{opacity:0.6;font-size:11px}@keyframes slideDown{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.token.comment{color:var(--color-success, #6a9955);font-style:italic}.token.string{color:var(--color-danger, #ce9178)}.token.number{color:var(--color-primary, #b5cea8)}.token.boolean{color:var(--color-primary, #569cd6)}.token.keyword{color:var(--color-primary, #c586c0);font-weight:bold}.token.function{color:var(--color-primary, #dcdcaa)}.token.operator{color:var(--bg-secondary, #d4d4d4)}.token.class{color:var(--color-primary, #4ec9b0)}.token.variable{color:var(--color-primary, #9cdcfe)}.token.tag{color:var(--color-primary, #569cd6)}.token.attr-name{color:var(--color-primary, #9cdcfe)}.token.property{color:var(--color-primary, #9cdcfe)}.token.selector{color:var(--color-primary, #d7ba7d)}:host(:not(.theme-vs-dark)) .token.string{color:var(--color-danger, #a31515)}:host(:not(.theme-vs-dark)) .token.keyword{color:var(--color-primary, #af00db)}:host(:not(.theme-vs-dark)) .token.function{color:var(--color-primary, #795e26)}:host(:not(.theme-vs-dark)) .token.number{color:var(--color-success, #098658)}:host(:not(.theme-vs-dark)) .token.comment{color:var(--color-success, #008000)}:host(:not(.theme-vs-dark)) .token.selector{color:var(--text-primary, #800000)}.copy-button{position:absolute;top:8px;right:20px;z-index:10;background:rgba(128, 128, 128, 0.2);border:none;color:var(--editor-fg);padding:4px 8px;border-radius:4px;cursor:pointer;opacity:0;transition:opacity 0.2s;font-size:12px}.copy-button:hover{background:rgba(128, 128, 128, 0.4)}:host(:hover) .copy-button{opacity:1}.search-widget{position:absolute;top:10px;right:40px;right:60px;z-index:50;display:flex;background:var(--editor-bg);border:1px solid var(--border-color, #ccc);box-shadow:0 4px 6px rgba(0, 0, 0, 0.1);border-radius:4px;padding:4px;align-items:center}.search-widget .search-input{border:none;outline:none;background:transparent;color:var(--editor-fg);padding:4px;font-size:13px;width:150px}.search-widget .search-actions{display:flex;gap:2px}.search-widget .search-actions button{background:transparent;border:none;color:var(--status-bar-fg);cursor:pointer;padding:4px;border-radius:2px}.search-widget .search-actions button:hover{background:var(--line-num-bg);color:var(--editor-fg)}.suggestion-list{position:absolute;z-index:100;background:var(--editor-bg);border:1px solid var(--border-color, #ccc);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border-radius:4px;max-height:200px;overflow-y:auto;width:200px;margin:0;padding:0;list-style:none;font-size:13px;font-family:inherit}.suggestion-list li{padding:4px 8px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--editor-fg)}.suggestion-list li.active,.suggestion-list li:hover{background:var(--selection-bg);color:var(--editor-fg)}.suggestion-list li .icon{opacity:0.7;font-size:11px}.editor-tabs{display:flex;background-color:var(--status-bar-bg);background-color:var(--bg-primary, #252526);overflow-x:auto;flex-shrink:0;}.editor-tabs::-webkit-scrollbar{height:4px}.editor-tabs::-webkit-scrollbar-thumb{background:rgba(128, 128, 128, 0.3)}:host(:not(.theme-vs-dark)) .editor-tabs{background-color:var(--bg-primary, #f3f3f3)}.editor-tab{display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--text-muted, #969696);background-color:transparent;cursor:pointer;border-right:1px solid rgba(0, 0, 0, 0.1);font-size:13px;white-space:nowrap;border-top:2px solid transparent;}.editor-tab:hover{background-color:rgba(128, 128, 128, 0.1);color:var(--editor-fg)}.editor-tab.active{background-color:var(--editor-bg);color:var(--editor-fg);border-top-color:var(--color-primary, #007acc);}.editor-tab .tab-icon{font-size:12px;opacity:0.8}.editor-tab{}.editor-ribbon-container{display:flex;flex-direction:column;background-color:var(--ribbon-bg, #f3f3f3);border-bottom:1px solid var(--border-color, #d1d1d1);flex-shrink:0;user-select:none;font-family:"Segoe UI", system-ui, -apple-system, sans-serif;--ribbon-bg:var(--bg-primary, #f3f3f3);--ribbon-tab-active:var(--bg-primary, #ffffff);--ribbon-tab-fg:var(--text-secondary, #333333);--ribbon-accent:var(--color-primary, #2b579a);}:host(.theme-vs-dark) .editor-ribbon-container{--ribbon-bg:var(--bg-secondary, #2d2d2d);--ribbon-tab-active:var(--text-secondary, #3c3c3c);--ribbon-tab-fg:var(--bg-secondary, #cccccc);--ribbon-accent:var(--color-primary, #007acc);border-bottom-color:var(--border-strong, #3e3e3e)}.ribbon-tabs{display:flex;padding:0 10px;background-color:var(--ribbon-accent);gap:2px}.ribbon-tab{padding:4px 12px;cursor:pointer;opacity:0.7;transition:all 0.2s;border-bottom:2px solid transparent;font-size:11px;font-weight:500;display:flex;align-items:center;gap:6px;min-width:60px;justify-content:center}.ribbon-tab ui-tooltip{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ribbon-tab i{font-size:14px}.ribbon-tab:hover{background-color:rgba(255, 255, 255, 0.15);opacity:1}.ribbon-tab:hover i{transform:scale(1.1)}.ribbon-tab.active{background-color:var(--ribbon-bg);color:var(--ribbon-tab-fg);font-weight:600;border-bottom:none;border-radius:4px 4px 0 0;margin-top:4px;padding-top:4px;opacity:1}.ribbon-tab.active i{opacity:1}.ribbon-content{background:var(--editor-bg);border-bottom:1px solid var(--border-color);min-height:0;padding:4px;display:flex;gap:8px;overflow-x:auto}.labels-hover .ribbon-content,.labels-hidden .ribbon-content{min-height:48px}.ribbon-panel{display:flex;gap:12px;height:100%;align-items:stretch}.ribbon-group{display:flex;flex-direction:column;gap:2px;padding-right:12px;border-right:1px solid var(--border-color);height:100%;justify-content:space-between}.ribbon-group:last-child{border-right:none}.ribbon-group.divider{padding:0;width:1px;background:linear-gradient(to bottom, transparent 10%, var(--border-color, #d1d1d1) 20%, var(--border-color, #d1d1d1) 80%, transparent 90%);margin:2px 4px}.ribbon-group-content{display:flex;gap:4px;align-items:center;flex:1}.ribbon-group-label{font-size:9px;color:var(--status-bar-fg);text-align:center;text-transform:uppercase;letter-spacing:0.5px;opacity:0.7}.labels-hidden .ribbon-group-label{display:none}.ribbon-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 8px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--editor-fg);cursor:pointer;transition:all 0.2s;min-width:32px;font-size:11px}.ribbon-btn i{font-size:16px}.ribbon-btn:hover{background:rgba(144, 144, 144, 0.1);border-color:var(--border-color)}.ribbon-btn.active{background:rgba(0, 122, 204, 0.1);border-color:var(--color-primary, #007acc);color:var(--color-primary, #007acc)}.ribbon-btn.lg{padding:4px 12px;gap:4px;min-width:48px}.ribbon-btn.lg i{font-size:20px}.ribbon-btn.icon-only{padding:4px;min-width:28px;height:28px}.ribbon-btn.icon-only span{display:none}.ribbon-btn.icon-only i{font-size:16px}.ribbon-select-container{display:flex;flex-direction:column;gap:2px;align-items:center}.ribbon-select-container select{padding:2px 4px;font-size:11px;border:1px solid var(--border-color, #ccc);border-radius:3px;background:var(--editor-bg);color:var(--editor-fg);outline:none}.ribbon-select-container span{font-size:10px;opacity:0.7}.help-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);z-index:200;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(2px)}.help-modal{background:var(--editor-bg);color:var(--editor-fg);width:400px;max-width:90%;border-radius:8px;border:1px solid var(--border-color, #454545);box-shadow:0 10px 25px rgba(0, 0, 0, 0.5);display:flex;flex-direction:column;overflow:hidden;animation:fadeIn 0.2s ease-out}.help-modal .help-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--status-bar-bg);color:var(--status-bar-fg);border-bottom:1px solid rgba(128, 128, 128, 0.2)}.help-modal .help-header h3{margin:0;font-size:14px;font-weight:600}.help-modal .help-header .close-btn{background:transparent;border:none;color:inherit;cursor:pointer;font-size:14px;padding:4px}.help-modal .help-header .close-btn:hover{opacity:0.8}.help-modal .help-content{padding:16px;display:flex;flex-direction:column;gap:16px}.help-modal .help-section h4{margin:0 0 8px 0;font-size:12px;text-transform:uppercase;letter-spacing:0.5px;opacity:0.7;border-bottom:1px solid rgba(128, 128, 128, 0.2);padding-bottom:4px}.help-modal .help-section ul{list-style:none;padding:0;margin:0;font-size:13px}.help-modal .help-section ul li{margin-bottom:6px;display:flex;align-items:center;gap:8px}.help-modal kbd{background:rgba(128, 128, 128, 0.2);padding:2px 4px;border-radius:3px;font-family:inherit;font-size:11px;border:1px solid rgba(128, 128, 128, 0.3)}@keyframes fadeIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}'}},[513,"ui-code-editor",{value:[1025],language:[1],theme:[1],readonly:[4],lineNumbers:[4,"line-numbers"],toolbar:[4],toolbarLabelDisplay:[1,"toolbar-label-display"],toolbarGroups:[16],tabs:[16],highlightedCode:[32],lineCount:[32],statusStats:[32],showSearch:[32],searchQuery:[32],showPalette:[32],paletteQuery:[32],showHelp:[32],activeTabIndex:[32],unfoldedLines:[32],foldedLines:[32],lintErrors:[32],activeToolbarTab:[32],fontSize:[32],showLineNumbers:[32],showMinimap:[32],showSidebar:[32],showBottomPanel:[32],activeSidebarTab:[32],activeBottomTab:[32],activeFileIndex:[32],files:[32],terminalLogs:[32],suggestions:[32],suggestionIndex:[32],showSuggestions:[32],suggestionPos:[32]},void 0,{value:[{valueChanged:0}],language:[{languageChanged:0}],tabs:[{tabsChanged:0}],searchQuery:[{searchQueryChanged:0}]}]),h=p,b=function(){"undefined"!=typeof customElements&&["ui-code-editor","ui-badge","ui-button","ui-icon","ui-input","ui-tooltip"].forEach((t=>{switch(t){case"ui-code-editor":customElements.get(r(t))\|\|customElements.define(r(t),p);break;case"ui-badge":customElements.get(r(t))\|\|l();break;case"ui-button":customElements.get(r(t))\|\|n();break;case"ui-icon":customElements.get(r(t))\|\|s();break;case"ui-input":customElements.get(r(t))\|\|c();break;case"ui-tooltip":customElements.get(r(t))\|\|d()}}))};export{h as UiCodeEditor,b as defineCustomElement}
1	+ import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as o,transformTag as r}from"@stencil/core/internal/client";import{s as a,d as s}from"./icon.js";import{d as n,a as l}from"./badge.js";import{d as c}from"./input.js";import{d}from"./loader.js";import{d as p}from"./tooltip.js";const h=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=i(this,"valueChange",7),this.runCode=i(this,"runCode",7)}value="";language="javascript";theme="vs-dark";readonly=!1;lineNumbers=!0;toolbar=!1;toolbarLabelDisplay="hover";toolbarGroups=["all"];tabs=[];valueChange;runCode;highlightedCode="";lineCount=1;statusStats={line:1,col:1,selected:0};showSearch=!1;searchQuery="";showPalette=!1;paletteQuery="";showHelp=!1;activeTabIndex=0;unfoldedLines=new Set;foldedLines=new Set;lintErrors=[];activeToolbarTab="home";fontSize=14;showLineNumbers=!0;showMinimap=!0;showSidebar=!0;showBottomPanel=!0;activeSidebarTab="files";activeBottomTab="terminal";activeFileIndex=0;files=[{name:"index.js",language:"javascript",content:"// Welcome to the IDE\n// Start coding here..."},{name:"styles.css",language:"css",content:"/* Add your styles here /\nbody {\n margin: 0;\n}"},{name:"index.html",language:"html",content:"<!DOCTYPE html>\n<html>\n<body>\n <h1>Hello</h1>\n</body>\n</html>"}];terminalLogs=[{type:"info",text:"IDE Terminal initialized.",time:(new Date).toLocaleTimeString()}];suggestions=[];suggestionIndex=0;showSuggestions=!1;suggestionPos={top:0,left:0};textarea;pre;lineNumbersRef;minimapRef;minimapViewport;searchInput;paletteInput;charWidth=8.4;lineHeight=21;keywords={javascript:["function","return","const","let","var","import","export","class","if","else","for","while","switch","case","break","continue","true","false","null","undefined","console","log","document","window","async","await","try","catch","throw","new","this","super","typeof","instanceof","void","delete","in","of"],python:["def","class","return","if","elif","else","for","while","try","except","finally","import","from","as","pass","break","continue","True","False","None","print","with","yield","lambda","global","nonlocal","raise","assert"],html:["div","span","h1","h2","h3","p","a","button","input","form","img","ul","li","script","style","head","body","html","meta","link","title","header","footer","nav","main","section","article","aside"],css:["color","background","border","margin","padding","width","height","display","flex","grid","font-size","position","top","left","right","bottom","opacity","z-index","transform","transition","animation","justify-content","align-items"],java:["public","private","protected","class","interface","extends","implements","void","int","double","String","boolean","if","else","for","while","return","new","this","super","try","catch","finally","throw","throws","package","import","static","final"],csharp:["public","private","protected","class","interface","void","int","string","bool","if","else","for","while","return","new","this","var","namespace","using","static","readonly","async","await"]};commands=[{id:"theme-toggle",label:"Toggle Theme (Dark/Light)",action:()=>this.toggleTheme()},{id:"minimap-toggle",label:"Toggle Minimap",action:()=>this.showMinimap=!this.showMinimap},{id:"line-nums-toggle",label:"Toggle Line Numbers",action:()=>this.showLineNumbers=!this.showLineNumbers},{id:"format",label:"Format Document (Simple Indent)",action:()=>this.simpleFormat()},{id:"clear",label:"Clear Code",action:()=>{this.value="",this.valueChange.emit("")}},{id:"copy",label:"Copy to Clipboard",action:()=>this.handleCopy()},{id:"fold-all",label:"Fold All",action:()=>this.foldAll()},{id:"unfold-all",label:"Unfold All",action:()=>this.unfoldAll()},{id:"undo",label:"Undo",action:()=>document.execCommand("undo")},{id:"redo",label:"Redo",action:()=>document.execCommand("redo")}];componentWillLoad(){this.highlightCode(),this.updateLineCount(),this.runLinting()}componentDidLoad(){this.measureChar(),this.tabs.length>0&&this.handleTabClick(0)}measureChar(){if(!this.pre)return;const t=document.createElement("span");t.textContent="M",t.style.visibility="hidden",this.pre.appendChild(t);const e=t.getBoundingClientRect();this.charWidth=e.width,this.lineHeight=e.height,this.pre.removeChild(t)}valueChanged(){this.highlightCode(),this.updateLineCount(),this.runLinting()}languageChanged(){this.highlightCode(),this.runLinting()}tabsChanged(){this.tabs.length>0&&this.activeTabIndex>=this.tabs.length&&this.handleTabClick(0)}searchQueryChanged(){this.highlightCode()}executeCode(){if("javascript"===this.language\|\|"json"===this.language)try{const t=[],e={log:(...e)=>t.push({type:"info",text:e.map((t=>"object"==typeof t?JSON.stringify(t):t+"")).join(" ")}),error:(...e)=>t.push({type:"error",text:e.join(" ")}),warn:(...e)=>t.push({type:"warn",text:e.join(" ")})};return Function("console",this.value)(e),t.length>0?t:[{type:"info",text:"(Success: No output)"}]}catch(t){return[{type:"error",text:"Runtime Error: "+t.message}]}return[{type:"info",text:`Simulation for ${this.language} complete. (Code execution restricted to JS)`}]}handleInput=t=>{this.value=t.target.value,this.valueChange.emit(this.value),this.checkSuggestions()};checkSuggestions(){if(!this.textarea)return;const{selectionStart:t,value:e}=this.textarea;let i=t-1;for(;i>=0&&/[\w]/.test(e[i]);)i--;const o=e.substring(i+1,t);if(o.length<1)return void(this.showSuggestions=!1);const r=(this.keywords[this.language]\|\|[]).filter((t=>t.toLowerCase().startsWith(o.toLowerCase())&&t!==o));if(r.length>0){this.suggestions=r,this.suggestionIndex=0,this.showSuggestions=!0;const i=e.substring(0,t).split("\n");this.suggestionPos={top:i.lengththis.lineHeight-this.textarea.scrollTop+5,left:i[i.length-1].lengththis.charWidth-this.textarea.scrollLeft+10}}else this.showSuggestions=!1}acceptSuggestion(t){if(!this.textarea)return;const{selectionStart:e,value:i}=this.textarea;let o=e-1;for(;o>=0&&/[\w]/.test(i[o]);)o--;o++;const r=i.substring(0,o)+t+i.substring(e);this.value=r,this.valueChange.emit(r),this.showSuggestions=!1,requestAnimationFrame((()=>{this.textarea.selectionStart=this.textarea.selectionEnd=o+t.length,this.highlightCode(),this.textarea.focus()}))}handleScroll=()=>{if(this.textarea&&this.pre){const{scrollTop:t,scrollLeft:e}=this.textarea;if(this.pre.scrollTop=t,this.pre.scrollLeft=e,this.minimapRef&&(this.minimapRef.scrollTop=t/(this.textarea.scrollHeight-this.textarea.clientHeight)(this.minimapRef.scrollHeight-this.minimapRef.clientHeight),this.minimapViewport)){const e=this.textarea.clientHeight/this.textarea.scrollHeight;this.minimapViewport.style.top=t/this.textarea.scrollHeight100+"%",this.minimapViewport.style.height=100e+"%"}}this.lineNumbersRef&&this.textarea&&(this.lineNumbersRef.scrollTop=this.textarea.scrollTop)};handleKeydown=t=>{const e=t.ctrlKey\|\|t.metaKey;if(e&&t.shiftKey&&("p"===t.key\|\|"P"===t.key))return t.preventDefault(),void this.togglePalette();if(e&&"f"===t.key)return t.preventDefault(),void this.toggleSearch();if(this.showSuggestions){if("ArrowDown"===t.key)return t.preventDefault(),void(this.suggestionIndex=(this.suggestionIndex+1)%this.suggestions.length);if("ArrowUp"===t.key)return t.preventDefault(),void(this.suggestionIndex=(this.suggestionIndex-1+this.suggestions.length)%this.suggestions.length);if("Enter"===t.key\|\|"Tab"===t.key)return t.preventDefault(),void this.acceptSuggestion(this.suggestions[this.suggestionIndex]);if("Escape"===t.key)return void(this.showSuggestions=!1)}if("Tab"===t.key){t.preventDefault();const e=this.textarea.selectionStart,i=this.textarea.selectionEnd,o=" ";return this.value=this.value.substring(0,e)+o+this.value.substring(i),requestAnimationFrame((()=>{this.textarea.selectionStart=this.textarea.selectionEnd=e+o.length,this.highlightCode()})),void this.valueChange.emit(this.value)}const i=this.textarea.selectionStart,o=this.textarea.selectionEnd,r=this.value,a={"(":")","{":"}","[":"]",'"':'"',"'":"'"};if(a[t.key])return t.preventDefault(),this.value=r.substring(0,i)+t.key+a[t.key]+r.substring(o),requestAnimationFrame((()=>{this.textarea.selectionStart=this.textarea.selectionEnd=i+1,this.highlightCode()})),void this.valueChange.emit(this.value);if(["}","]",")",'"',"'"].includes(t.key)&&r[i]===t.key)return t.preventDefault(),void(this.textarea.selectionStart=this.textarea.selectionEnd=i+1);if("Enter"===t.key){t.preventDefault();const e=r.substring(0,i).split("\n").pop(),a=e.match(/^\s/);let s=a?a[0]:"";return(e.trim().endsWith("{")\|\|e.trim().endsWith(":"))&&(s+=" "),this.value=r.substring(0,i)+"\n"+s+r.substring(o),requestAnimationFrame((()=>{this.textarea.selectionStart=this.textarea.selectionEnd=i+1+s.length,this.highlightCode()})),void this.valueChange.emit(this.value)}if("Backspace"===t.key&&i===o&&i>0){const e=r[i-1],o=r[i];("{"===e&&"}"===o\|\|"("===e&&")"===o\|\|"["===e&&"]"===o\|\|'"'===e&&'"'===o\|\|"'"===e&&"'"===o)&&(t.preventDefault(),this.value=r.substring(0,i-1)+r.substring(i+1),requestAnimationFrame((()=>{this.textarea.selectionStart=this.textarea.selectionEnd=i-1,this.highlightCode()})),this.valueChange.emit(this.value))}};handleSelection=t=>{const e=t.target,i=e.value.substring(0,e.selectionStart).split("\n");this.statusStats={line:i.length,col:i[i.length-1].length+1,selected:e.selectionEnd-e.selectionStart}};handleMinimapClick=t=>{const e=t.currentTarget.getBoundingClientRect();this.textarea&&(this.textarea.scrollTop=(t.clientY-e.top)/e.heightthis.textarea.scrollHeight-this.textarea.clientHeight/2)};handleCopy=()=>{navigator.clipboard.writeText(this.value)};handleTabClick(t){if(t<0\|\|t>=this.tabs.length)return;this.activeTabIndex=t;const e=this.tabs[t];this.value=e.content,this.language=e.language,this.valueChange.emit(this.value)}toggleSearch=()=>{this.showSearch=!this.showSearch,this.showSearch?setTimeout((()=>this.searchInput?.focus()),50):this.searchQuery=""};findNext(){if(!this.searchQuery)return;const t=this.value;let e=t.indexOf(this.searchQuery,this.textarea.selectionEnd);-1===e&&(e=t.indexOf(this.searchQuery,0)),-1!==e&&this.selectAndScroll(e,e+this.searchQuery.length)}findPrev(){if(!this.searchQuery)return;const t=this.value;let e=t.lastIndexOf(this.searchQuery,this.textarea.selectionStart-1);-1===e&&(e=t.lastIndexOf(this.searchQuery)),-1!==e&&this.selectAndScroll(e,e+this.searchQuery.length)}selectAndScroll(t,e){this.textarea.focus(),this.textarea.selectionStart=t,this.textarea.selectionEnd=e,this.handleScroll()}togglePalette=()=>{this.showPalette=!this.showPalette,this.paletteQuery="",this.showPalette&&setTimeout((()=>this.paletteInput?.focus()),50)};runCommand(t){t.isSymbol?this.selectAndScroll(t.start,t.end):t.action(),this.showPalette=!1}getPaletteItems(){if(this.paletteQuery.startsWith("@"))return this.getSymbols(this.paletteQuery.substring(1));const t=this.paletteQuery.toLowerCase();return this.commands.filter((e=>e.label.toLowerCase().includes(t)))}getSymbols(t){const e=[],i=this.value.split("\n"),o=t.toLowerCase(),r={javascript:/function\s+([\w$]+)\|const\s+([\w$]+)\s=\s$[^)]$\s=>\|class\s+([\w$]+)/g,python:/def\s+([\w]+)\|class\s+([\w]+)/g,java:/(?:public\|private\|protected\|static\|\s) +[\w\<\>\[\]]+\s+([\w]+)\s$[^)]$\s\{\|class\s+([\w]+)/g,csharp:/(?:public\|private\|protected\|static\|\s) +[\w\<\>\[\]]+\s+([\w]+)\s$[^)]$\s\{\|class\s+([\w]+)/g}[this.language];if(!r)return[];let a=0;for(let t=0;t<i.length;t++){const s=i[t];let n;for(;null!==(n=r.exec(s));){const i=n[1]\|\|n[2]\|\|n[3];i&&i.toLowerCase().includes(o)&&e.push({id:"symbol-"+t,label:"@"+i,isSymbol:!0,start:a+n.index,end:a+n.index+n[0].length,line:t+1})}a+=s.length+1}return e}toggleTheme(){this.theme="vs-dark"===this.theme?"vs-light":"vs-dark"}toggleMinimap(){this.showMinimap=!this.showMinimap}handleSelectAll(){this.textarea&&this.textarea.select()}handleUndo(){document.execCommand("undo")}handleRedo(){document.execCommand("redo")}handleCommentSelection(){if(!this.textarea)return;const t=this.textarea.selectionStart,e=this.textarea.selectionEnd,i=this.value,o=i.substring(t,e);let r;if("javascript"===this.language\|\|"python"===this.language\|\|"java"===this.language\|\|"csharp"===this.language){const t="python"===this.language?"# ":"// ";r=o.includes("\n")?o.split("\n").map((e=>e.startsWith(t)?e.substring(t.length):t+e)).join("\n"):o.startsWith(t)?o.substring(t.length):t+o}else"html"===this.language?r=o.startsWith("\x3c!--")?o.replace(/^<!--\s([\s\S]?)\s-->$/,"$1"):`\x3c!-- ${o} --\x3e`:"css"===this.language&&(r=o.startsWith("/")?o.replace(/^\/\\s([\s\S]?)\s\\/$/,"$1"):`/ ${o} /`);void 0!==r&&(this.value=i.substring(0,t)+r+i.substring(e),this.valueChange.emit(this.value),requestAnimationFrame((()=>{this.textarea.selectionStart=t,this.textarea.selectionEnd=t+r.length,this.highlightCode()})))}simpleFormat(){if("json"===this.language){try{const t=JSON.parse(this.value);this.value=JSON.stringify(t,null,2),this.valueChange.emit(this.value)}catch(t){}return}const t=this.value.split("\n");let e=0;const i=[];for(let o=0;o<t.length;o++){let r=t[o].trim();""!==r?((r.match(/^[\}\]\)]/)\|\|r.startsWith("</"))&&(e=Math.max(0,e-1)),i.push(" ".repeat(e)+r),(r.endsWith("{")\|\|r.endsWith("[")\|\|r.endsWith("(")\|\|r.match(/<[^/].>$/)&&!r.match(/\/>$/)&&!r.includes("</"))&&e++):i.push("")}this.value=i.join("\n"),this.valueChange.emit(this.value),this.terminalLogs=[...this.terminalLogs,{type:"info",text:"Document formatted successfully.",time:(new Date).toLocaleTimeString()}]}getLineGitStatus(t){return t%15==0?"added":t%25==0?"modified":"none"}runLinting(){const t=[],e=this.value.split("\n"),i=[];for(let o=0;o<e.length;o++){const r=e[o];for(let e=0;e<r.length;e++){const a=r[e];if(["{","[","("].includes(a))i.push({char:a,line:o+1});else if(["}","]",")"].includes(a)){const e=i.pop();e&&this.matches(e.char,a)\|\|t.push({line:o+1,msg:`Unexpected '${a}'`})}}}i.length>0&&i.forEach((e=>{t.push({line:e.line,msg:`Unclosed '${e.char}'`})})),this.lintErrors=t}matches(t,e){return"{"===t&&"}"===e\|\|"["===t&&"]"===e\|\|"("===t&&")"===e}isLineFoldable(t,e){if(t>=e.length-1)return!1;const i=this.getIndentLevel(e[t]);return this.getIndentLevel(e[t+1])>i\|\|e[t].trim().endsWith("{")\|\|e[t].trim().endsWith(":")}getIndentLevel(t){const e=t.match(/^\s/);return e?e[0].length:0}toggleFold(t){this.foldedLines.has(t)?this.foldedLines.delete(t):this.foldedLines.add(t),this.foldedLines=new Set(this.foldedLines)}foldAll(){const t=this.value.split("\n");for(let e=0;e<t.length;e++)this.isLineFoldable(e,t)&&this.foldedLines.add(e+1);this.foldedLines=new Set(this.foldedLines)}unfoldAll(){this.foldedLines.clear(),this.foldedLines=new Set(this.foldedLines)}updateLineCount(){const t=this.value?this.value.split("\n").length:1;this.lineCount=t}highlightCode(){if(!this.value)return void(this.highlightedCode="");let t=this.escapeHtml(this.value);switch(this.language){case"javascript":case"json":t=this.highlightJS(t);break;case"html":t=this.highlightHTML(t);break;case"css":t=this.highlightCSS(t);break;case"python":t=this.highlightPython(t);break;case"java":case"csharp":t=this.highlightJavaCSharp(t);break;case"ladder":t=this.highlightLadder(t)}this.value.endsWith("\n")&&(t+="<br>"),this.highlightedCode=t}escapeRegex(t){return t.replace(/[.+?^${}()\|[\]\\]/g,"\\$&")}escapeHtml(t){return t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}highlightJS(t){return t.replace(/\/\/./g,'<span class="token comment">$&</span>').replace(/\/\[\s\S]?\\//g,'<span class="token comment">$&</span>').replace(/('.?')\|(".?")\|(`[\s\S]?`)/g,'<span class="token string">$&</span>').replace(/\b(const\|let\|var\|function\|return\|if\|else\|for\|while\|import\|export\|class\|this\|new\|true\|false\|null\|undefined\|async\|await\|try\|catch\|finally\|throw\|break\|continue\|default\|case\|switch\|typeof\|instanceof\|void\|delete\|in\|of\|static\|get\|set\|extends\|super)\b/g,'<span class="token keyword">$&</span>').replace(/\b(\d+)\b/g,'<span class="token number">$&</span>').replace(/\b([A-Z][a-zA-Z0-9_])\b/g,'<span class="token class">$&</span>').replace(/(\w+)(?=\()/g,'<span class="token function">$&</span>')}highlightHTML(t){return t.replace(/(<\/?)(\w+)(.?)(>)/g,((t,e,i,o,r)=>`<span class="token tag">${e}${i}</span>${o.replace(/(\w+)=("[^"]")/g,'<span class="token attr-name">$1</span>=<span class="token string">$2</span>')}<span class="token tag">${r}</span>`)).replace(/<!--[\s\S]?-->/g,'<span class="token comment">$&</span>')}highlightCSS(t){return t.replace(/\/\[\s\S]?\\//g,'<span class="token comment">$&</span>').replace(/([a-zA-Z-]+)(?=:)/g,'<span class="token property">$1</span>').replace(/(:)([^;]+)(;)/g,((t,e,i,o)=>`${e}<span class="token number">${i}</span>${o}`)).replace(/(\.\|#)([\w-]+)/g,'<span class="token selector">$1$2</span>')}highlightPython(t){return t.replace(/#./g,'<span class="token comment">$&</span>').replace(/("""[\s\S]?""")\|('''.?''')/g,'<span class="token string">$&</span>').replace(/('.?')\|(".?")/g,'<span class="token string">$&</span>').replace(/\b(def\|class\|if\|elif\|else\|for\|while\|return\|import\|from\|as\|try\|except\|finally\|with\|pass\|continue\|break\|True\|False\|None)\b/g,'<span class="token keyword">$&</span>').replace(/\b(\d+)\b/g,'<span class="token number">$&</span>').replace(/\b([A-Z][a-zA-Z0-9_])\b/g,'<span class="token class">$&</span>').replace(/@\w+/g,'<span class="token function">$&</span>')}highlightJavaCSharp(t){return t.replace(/\/\/./g,'<span class="token comment">$&</span>').replace(/('.?')\|(".?")/g,'<span class="token string">$&</span>').replace(/\b(public\|private\|protected\|static\|final\|class\|interface\|void\|int\|double\|String\|boolean\|if\|else\|for\|while\|return\|new\|this\|super\|extends\|implements\|try\|catch\|finally\|throw\|throws\|package\|import\|namespace\|using\|var)\b/g,'<span class="token keyword">$&</span>').replace(/\b(\d+)\b/g,'<span class="token number">$&</span>').replace(/\b([A-Z][a-zA-Z0-9_])\b/g,'<span class="token class">$&</span>').replace(/@\w+/g,'<span class="token function">$&</span>')}highlightLadder(t){return t.replace(/$\.?\$/g,'<span class="token comment">$&</span>').replace(/\b(XIC\|XIO\|OTE\|OTL\|OTU\|TON\|TOF\|RTO\|CTU\|CTD\|MOV\|COP\|ADD\|SUB\|MUL\|DIV\|LIM\|EQU\|NEQ\|LES\|GRT\|LEQ\|GEQ\|JMP\|LBL)\b/g,'<span class="token keyword">$&</span>').replace(/\b(PROGRAM\|END_PROGRAM\|VAR\|END_VAR\|BOOL\|INT\|REAL\|TIME\|TON\|IF\|THEN\|END_IF)\b/g,'<span class="token keyword">$&</span>').replace(/%[IQM][\d\.]+/g,'<span class="token number">$&</span>').replace(/\b([A-Z][a-zA-Z0-9_])\b/g,'<span class="token variable">$&</span>')}renderLineNumbers(){if(!this.showLineNumbers)return null;const t=this.value.split("\n");return o("div",{class:"line-numbers",ref:t=>this.lineNumbersRef=t},t.map(((e,i)=>{const r=i+1,a=this.lintErrors.find((t=>t.line===r)),s=this.isLineFoldable(i,t),n=this.foldedLines.has(r),l=this.getLineGitStatus(i);return o("div",{class:{"line-number":!0,["git-"+l]:"none"!==l},onClick:()=>s&&this.toggleFold(r),style:{color:a?"#ff4d4d":"inherit"},title:a?a.msg:""},r,s&&o("span",{class:"fold-icon"},o("ui-icon",{name:"chevron-"+(n?"right":"down"),library:"fontawesome",size:"10px"})))})))}renderPalette(){if(!this.showPalette)return null;const t=this.getPaletteItems();return o("div",{class:"editor-palette-overlay",onClick:this.togglePalette},o("div",{class:"editor-palette",onClick:t=>t.stopPropagation()},o("div",{class:"palette-input-wrapper"},o("ui-icon",{name:"terminal",library:"fontawesome"}),o("ui-input",{type:"text",placeholder:"Type a command or @ for symbols...",value:this.paletteQuery,onInputChange:t=>this.paletteQuery=t.detail,ref:t=>this.paletteInput=t,onInputKeydown:e=>{"Escape"===e.detail.key&&this.togglePalette(),"Enter"===e.detail.key&&t.length>0&&this.runCommand(t[0])},variant:"plain",size:"sm"})),o("div",{class:"palette-results"},t.length>0?t.map((t=>o("div",{class:"palette-item",onClick:()=>this.runCommand(t)},o("ui-icon",{name:t.isSymbol?"at":"play",library:"fontawesome",size:"14px"}),o("span",null,t.label),t.line&&o("span",{class:"palette-meta"},"Line ",t.line)))):o("div",{class:"palette-no-results"},"No results found"))))}renderSearch(){return this.showSearch?o("div",{class:"search-widget"},o("ui-input",{customClass:"search-input",ref:t=>this.searchInput=t,type:"text",placeholder:"Find",value:this.searchQuery,onInputChange:t=>this.searchQuery=t.detail,onInputKeydown:t=>{const e=t.detail;"Escape"===e.key&&(this.showSearch=!1),"Enter"===e.key&&(e.shiftKey?this.findPrev():this.findNext())},size:"sm",variant:"outlined"}),o("div",{class:"search-actions"},o("ui-button",{variant:"ghost",size:"sm",onClick:()=>this.findPrev(),ariaLabel:"Previous (Shift+Enter)",icon:"arrow-up",iconLibrary:"fontawesome",iconOnly:!0,iconSize:"14px"}),o("ui-button",{variant:"ghost",size:"sm",onClick:()=>this.findNext(),ariaLabel:"Next (Enter)",icon:"arrow-down",iconLibrary:"fontawesome",iconOnly:!0,iconSize:"14px"}),o("ui-button",{variant:"ghost",size:"sm",onClick:()=>this.showSearch=!1,ariaLabel:"Close search",icon:"times",iconLibrary:"fontawesome",iconOnly:!0,iconSize:"14px"}))):null}renderMinimap(){return this.showMinimap?o("div",{class:"minimap-container",onClick:this.handleMinimapClick},o("div",{class:"minimap-content",innerHTML:a(this.highlightedCode),ref:t=>this.minimapRef=t}),o("div",{class:"minimap-viewport",ref:t=>this.minimapViewport=t})):null}renderStatusBar(){return o("div",{class:"status-bar"},o("div",{class:"status-item"},o("ui-icon",{name:"code-branch",library:"fontawesome",size:"14px"})," main"),o("div",{class:"status-item"},o("ui-icon",{name:"exclamation-circle",library:"fontawesome",size:"14px"})," ",this.lintErrors.length," Errors"),o("div",{class:"status-item"},"Ln ",this.statusStats.line,", Col ",this.statusStats.col),o("div",{class:"status-item"},this.statusStats.selected>0?`(${this.statusStats.selected} selected)`:""),o("div",{class:"status-item"},"Spaces: 2"),o("div",{class:"status-item"},this.language.toUpperCase()),o("div",{class:"status-item",onClick:()=>this.toggleTheme(),style:{cursor:"pointer"}},o("ui-icon","vs-dark"===this.theme?{name:"moon",library:"fontawesome",size:"14px"}:{name:"sun",library:"fontawesome",size:"14px"})))}renderSuggestions(){return this.showSuggestions?o("ul",{class:"suggestion-list",style:{top:this.suggestionPos.top+"px",left:this.suggestionPos.left+"px"}},this.suggestions.map(((t,e)=>o("li",{class:e===this.suggestionIndex?"active":"",onClick:()=>this.acceptSuggestion(t),onMouseDown:t=>t.preventDefault()},o("ui-icon",{name:"cube",library:"fontawesome",size:"14px",class:"icon"})," ",t)))):null}renderRibbonButton(t,e,i,r={}){const{lg:a=!1,color:s}=r,n="always"===this.toolbarLabelDisplay,l="hover"===this.toolbarLabelDisplay,c=o("ui-button",{slot:l?"target":void 0,onClick:i,style:s?{color:s}:{},ariaLabel:e,label:n?e:void 0,icon:t.replace(/^fa[sb]? fa-/,""),iconLibrary:"fontawesome",iconOnly:!n,size:a?"lg":"md",variant:"ghost"});return l?o("ui-tooltip",{content:e,position:"bottom"},c):c}isGroupVisible(t){return!(this.toolbarGroups&&!this.toolbarGroups.includes("all"))\|\|this.toolbarGroups.includes(t)}renderToolbar(){return this.toolbar?o("div",{class:"editor-ribbon-container labels-"+this.toolbarLabelDisplay},o("div",{class:"ribbon-tabs"},o("div",{class:"ribbon-tab "+("home"===this.activeToolbarTab?"active":""),onClick:()=>this.activeToolbarTab="home"},o("ui-tooltip",{content:"Home",position:"bottom"},o("ui-icon",{name:"home",library:"fontawesome",slot:"target",size:"16px"}))),o("div",{class:"ribbon-tab "+("edit"===this.activeToolbarTab?"active":""),onClick:()=>this.activeToolbarTab="edit"},o("ui-tooltip",{content:"Edit",position:"bottom"},o("ui-icon",{name:"edit",library:"fontawesome",slot:"target",size:"16px"}))),o("div",{class:"ribbon-tab "+("view"===this.activeToolbarTab?"active":""),onClick:()=>this.activeToolbarTab="view"},o("ui-tooltip",{content:"View",position:"bottom"},o("ui-icon",{name:"eye",library:"fontawesome",slot:"target",size:"16px"}))),o("div",{class:"ribbon-tab "+("run"===this.activeToolbarTab?"active":""),onClick:()=>this.activeToolbarTab="run"},o("ui-tooltip",{content:"Run",position:"bottom"},o("ui-icon",{name:"play",library:"fontawesome",slot:"target",size:"16px"})))),o("div",{class:"ribbon-content"},"home"===this.activeToolbarTab&&o("div",{class:"ribbon-panel"},this.isGroupVisible("history")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-undo","Undo",(()=>this.handleUndo()),{lg:!0}),this.renderRibbonButton("fas fa-redo","Redo",(()=>this.handleRedo()),{lg:!0})),o("div",{class:"ribbon-group-label"},"History")),this.isGroupVisible("history")&&this.isGroupVisible("clipboard")&&o("div",{class:"ribbon-group divider"}),this.isGroupVisible("clipboard")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-copy","Copy",(()=>this.handleCopy())),this.renderRibbonButton("fas fa-mouse-pointer","Select All",(()=>this.handleSelectAll()))),o("div",{class:"ribbon-group-label"},"Clipboard")),(this.isGroupVisible("history")\|\|this.isGroupVisible("clipboard"))&&this.isGroupVisible("search")&&o("div",{class:"ribbon-group divider"}),this.isGroupVisible("search")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-search","Find",(()=>this.toggleSearch()),{lg:!0}),this.renderRibbonButton("fas fa-terminal","Palette",(()=>this.togglePalette()),{lg:!0})),o("div",{class:"ribbon-group-label"},"Search"))),"edit"===this.activeToolbarTab&&o("div",{class:"ribbon-panel"},this.isGroupVisible("document")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-code","Format",(()=>this.simpleFormat()),{lg:!0})),o("div",{class:"ribbon-group-label"},"Document")),this.isGroupVisible("document")&&this.isGroupVisible("folding")&&o("div",{class:"ribbon-group divider"}),this.isGroupVisible("folding")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-minus-square","Fold All",(()=>this.foldAll())),this.renderRibbonButton("fas fa-plus-square","Unfold All",(()=>this.unfoldAll()))),o("div",{class:"ribbon-group-label"},"Folding")),(this.isGroupVisible("document")\|\|this.isGroupVisible("folding"))&&this.isGroupVisible("actions")&&o("div",{class:"ribbon-group divider"}),this.isGroupVisible("actions")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-comment-slash","Comment",(()=>this.handleCommentSelection()))),o("div",{class:"ribbon-group-label"},"Actions"))),"view"===this.activeToolbarTab&&o("div",{class:"ribbon-panel"},this.isGroupVisible("interface")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-map","Minimap",(()=>this.toggleMinimap()),{lg:!0,active:this.showMinimap}),this.renderRibbonButton("fas fa-list-ol","Line Numbers",(()=>this.showLineNumbers=!this.showLineNumbers),{lg:!0,active:this.showLineNumbers})),o("div",{class:"ribbon-group-label"},"Interface")),this.isGroupVisible("interface")&&this.isGroupVisible("theme")&&o("div",{class:"ribbon-group divider"}),this.isGroupVisible("theme")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("vs-dark"===this.theme?"fas fa-moon":"fas fa-sun","vs-dark"===this.theme?"Dark":"Light",(()=>this.toggleTheme()),{lg:!0})),o("div",{class:"ribbon-group-label"},"Theme")),(this.isGroupVisible("interface")\|\|this.isGroupVisible("theme"))&&this.isGroupVisible("appearance")&&o("div",{class:"ribbon-group divider"}),this.isGroupVisible("appearance")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},o("div",{class:"ribbon-select-container"},o("select",{onChange:t=>this.fontSize=parseInt(t.target.value)},[10,12,14,16,18,20,24].map((t=>o("option",{value:t,selected:this.fontSize===t},t,"px")))),"always"===this.toolbarLabelDisplay&&o("span",null,"Font Size"))),o("div",{class:"ribbon-group-label"},"Appearance"))),"run"===this.activeToolbarTab&&o("div",{class:"ribbon-panel"},this.isGroupVisible("execution")&&o("div",{class:"ribbon-group"},o("div",{class:"ribbon-group-content"},this.renderRibbonButton("fas fa-play","Run Code",(()=>this.runCode.emit()),{lg:!0,color:"#4ade80"})),o("div",{class:"ribbon-group-label"},"Execution"))))):null}renderHelp(){return this.showHelp?o("div",{class:"help-modal-overlay",onClick:()=>this.showHelp=!1},o("div",{class:"help-modal",onClick:t=>t.stopPropagation()},o("div",{class:"help-header"},o("h3",null,"Editor Shortcuts & Help"),o("ui-button",{variant:"ghost",onClick:()=>this.showHelp=!1,ariaLabel:"Close help",icon:"times",iconLibrary:"fontawesome",iconOnly:!0})),o("div",{class:"help-content"},o("div",{class:"help-section"},o("h4",null,"Keyboard Shortcuts"),o("ul",null,o("li",null,o("kbd",null,"Ctrl")," + ",o("kbd",null,"F")," : Find / Search"),o("li",null,o("kbd",null,"Ctrl")," + ",o("kbd",null,"Shift")," + ",o("kbd",null,"P")," : Command Palette"),o("li",null,o("kbd",null,"Ctrl")," + ",o("kbd",null,"Space")," : Trigger Suggestions"),o("li",null,o("kbd",null,"Tab")," : Indent / Accept Suggestion"))),o("div",{class:"help-section"},o("h4",null,"Toolbar Features"),o("ul",null,o("li",null,o("ui-icon",{name:"play",library:"fontawesome",style:{color:"#4ade80"},size:"14px"})," ",o("strong",null,"Run"),": Execute code (demo mode)"),o("li",null,o("ui-icon",{name:"indent",library:"fontawesome",size:"14px"})," ",o("strong",null,"Format"),": Auto-indent code"),o("li",null,o("ui-icon",{name:"moon",library:"fontawesome",size:"14px"})," ",o("strong",null,"Theme"),": Toggle Dark/Light")))))):null}renderTabBar(){return this.tabs&&0!==this.tabs.length?o("div",{class:"editor-tabs"},this.tabs.map(((t,e)=>o("div",{class:"editor-tab "+(e===this.activeTabIndex?"active":""),onClick:()=>this.handleTabClick(e)},o("ui-icon",{class:"tab-icon",name:this.getIconForLang(t.language),library:"fontawesome"}),o("span",{class:"tab-title"},t.title))))):null}getIconForLang(t){switch(t){case"javascript":return"js-square";case"html":return"html5";case"css":return"css3";case"python":return"python";case"java":return"java";case"json":return"code";default:return"file-alt"}}renderSidebar(){return this.showSidebar?o("div",{class:{"editor-sidebar":!0,collapsed:!this.showSidebar}},o("div",{class:"sidebar-tabs"},o("div",{class:{"sidebar-tab":!0,active:"files"===this.activeSidebarTab},onClick:()=>this.activeSidebarTab="files"},o("ui-icon",{name:"copy",library:"fontawesome"}))),o("div",{class:"sidebar-content"},"files"===this.activeSidebarTab&&o("div",{class:"file-explorer"},o("div",{class:"sidebar-header"},"EXPLORER"),o("div",{class:"file-list"},this.files.map(((t,e)=>o("div",{class:{"file-item":!0,active:this.activeFileIndex===e},onClick:()=>this.switchFile(e)},o("ui-icon",{name:this.getFileIcon(t.name).split(" ").find((t=>t.startsWith("fa-"))).replace("fa-",""),library:"fontawesome",class:this.getFileIcon(t.name)}),o("span",null,t.name)))))))):null}handleTerminalKeyDown=t=>{if("Enter"===t.key){const e=t.target,i=e.value.trim().toLowerCase();if(!i)return;this.terminalLogs=[...this.terminalLogs,{type:"info",text:"$ "+e.value,time:(new Date).toLocaleTimeString()}],"clear"===i?this.terminalLogs=[]:"run"===i\|\|"node index.js"===i?(this.terminalLogs=[...this.terminalLogs,{type:"info",text:"Executing program...",time:(new Date).toLocaleTimeString()}],setTimeout((()=>{const t=this.executeCode().map((t=>({...t,time:(new Date).toLocaleTimeString()})));this.terminalLogs=[...this.terminalLogs,...t],this.runCode.emit()}),500)):this.terminalLogs="help"===i?[...this.terminalLogs,{type:"info",text:"Available commands: run, clear, help, ls, whoami",time:(new Date).toLocaleTimeString()}]:[...this.terminalLogs,{type:"error",text:"Command not found: "+i,time:(new Date).toLocaleTimeString()}],e.value=""}};renderBreadcrumbs(){const t=this.files[this.activeFileIndex];return o("div",{class:"editor-breadcrumbs"},o("div",{class:"breadcrumb-item"},o("ui-icon",{name:"folder-open",library:"fontawesome",size:"12px"}),o("span",null,"project"),o("span",{class:"separator"},"/")),o("div",{class:"breadcrumb-item"},o("ui-icon",{name:this.getFileIcon(t.name).split(" ").find((t=>t.startsWith("fa-"))).replace("fa-",""),library:"fontawesome",class:this.getFileIcon(t.name),size:"12px"}),o("span",null,t.name)))}renderBottomPanel(){return this.showBottomPanel?o("div",{class:{"editor-bottom-panel":!0,collapsed:!this.showBottomPanel}},o("div",{class:"panel-header"},o("div",{class:"panel-tabs"},o("div",{class:{"panel-tab":!0,active:"terminal"===this.activeBottomTab},onClick:()=>this.activeBottomTab="terminal"},"TERMINAL"),o("div",{class:{"panel-tab":!0,active:"output"===this.activeBottomTab},onClick:()=>this.activeBottomTab="output"},"OUTPUT"),o("div",{class:{"panel-tab":!0,active:"problems"===this.activeBottomTab},onClick:()=>this.activeBottomTab="problems"},"PROBLEMS")),o("div",{class:"panel-controls"},o("ui-icon",{name:"times",library:"fontawesome",onClick:()=>this.showBottomPanel=!1,style:{cursor:"pointer"}}))),o("div",{class:"panel-content"},"terminal"===this.activeBottomTab&&o("div",{class:"terminal-content"},this.terminalLogs.map((t=>o("div",{class:"log-item "+t.type},o("span",{class:"log-time"},"[",t.time,"]"),o("span",{class:"log-text"},t.text)))),o("div",{class:"terminal-input-line"},o("span",{class:"terminal-prompt"},"$"),o("ui-input",{type:"text",customClass:"terminal-input",placeholder:"Type a command (run, clear, help)...",onInputKeydown:t=>this.handleTerminalKeyDown(t.detail),variant:"plain",size:"sm",fullWidth:!0}))),"output"===this.activeBottomTab&&o("div",{class:"output-preview",style:{display:"flex",alignItems:"center",justifyCenter:"center",height:"100%",background:"#f8fafc",color:"#64748b"}},o("div",{style:{textAlign:"center"}},o("ui-icon",{name:"eye-slash",library:"fontawesome",size:"32px",style:{opacity:.5,marginBottom:"12px"}}),o("p",{style:{fontSize:"14px",fontWeight:"500"}},"Live Preview Disabled (No Iframe)"))))):null}switchFile(t){this.activeFileIndex=t;const e=this.files[t];this.value=e.content,this.language=e.language,this.valueChange.emit(this.value)}getFileIcon(t){return t.endsWith(".js")?"fab fa-js-square text-warning":t.endsWith(".html")?"fab fa-html5 text-danger":t.endsWith(".css")?"fab fa-css3-alt text-primary":"fas fa-file-code"}render(){const t="vs-light"===this.theme?"theme-vs-light":"theme-vs-dark",e=this.value.split("\n");let i=-1,r=-1;for(let t=0;t<e.length;t++)if(-1!==i){if(!(this.getIndentLevel(e[t])<=r&&""!==e[t].trim()))continue;i=-1}else this.foldedLines.has(t+1)&&(i=t+1,r=this.getIndentLevel(e[t]));return o("div",{key:"e856c9fbd64e22059c917ed99eebcc66f605d91b",class:"code-editor-container "+t},this.renderTabBar(),this.renderToolbar(),this.renderPalette(),o("div",{key:"de880b366ca14669ef66169d2283a18fab623e31",class:"code-editor-layout"},this.renderSidebar(),o("div",{key:"058b6a13934f82cd6b257a3b6322361c8323cb5d",class:"editor-main-panel"},this.renderBreadcrumbs(),o("div",{key:"408b4b6d461588819fa49ea1aef707edcc666be6",class:"editor-main-content",style:{display:"flex",flex:"1",minHeight:"0",position:"relative"}},this.renderLineNumbers(),o("div",{key:"dcb8f35793966525ef0da6d966e4789e5d0eed8e",class:"editor-wrapper"},this.renderSearch(),this.renderSuggestions(),o("ui-button",{key:"1cbe2e3c0929fa428fd6735b36dc4845bd733b58",variant:"ghost",class:"copy-button",onClick:this.handleCopy,ariaLabel:"Copy Code",icon:"copy",iconLibrary:"fontawesome",iconOnly:!0}),o("pre",{key:"dc17184da52fcfced8a468f891443ab7af9372f6",class:"syntax-highlighter",ref:t=>this.pre=t,innerHTML:a(this.highlightedCode)}),o("textarea",{key:"f04e9f88a8299b500bcb3bf9cf928416f539b15d",class:"editor-content",ref:t=>this.textarea=t,value:this.value,onInput:this.handleInput,onScroll:this.handleScroll,onKeyDown:this.handleKeydown,onSelect:this.handleSelection,onClick:this.handleSelection,onKeyUp:this.handleSelection,spellcheck:!1,readonly:this.readonly,role:"textbox","aria-multiline":"true","aria-label":"Code Editor"})),this.renderMinimap()),this.renderBottomPanel())),this.renderStatusBar(),this.renderHelp())}static get watchers(){return{value:[{valueChanged:0}],language:[{languageChanged:0}],tabs:[{tabsChanged:0}],searchQuery:[{searchQueryChanged:0}]}}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:flex;flex-direction:column;font-family:"Menlo", "Monaco", "Courier New", monospace;font-size:14px;line-height:1.5;position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--border-color, var(--border-subtle, #e2e8f0));background-color:var(--editor-bg);color:var(--editor-fg);--editor-bg:var(--bg-primary, #ffffff);--editor-fg:var(--text-primary, #1e293b);--line-num-bg:var(--bg-primary, #f8fafc);--line-num-fg:var(--color-primary, #94a3b8);--indent-guide:rgba(0, 0, 0, 0.05);--cursor-color:var(--text-primary, #000);--selection-bg:var(--color-primary, #b3d4fc);--status-bar-bg:var(--bg-secondary, #f1f5f9);--status-bar-fg:var(--color-primary, #64748b);--minimap-width:60px;--git-added:var(--color-success, #28a745);--git-modified:var(--color-danger, #ffc107)}:host(.theme-vs-dark){--editor-bg:var(--bg-primary, #1e1e1e);--editor-fg:var(--bg-secondary, #d4d4d4);--line-num-bg:var(--bg-primary, #1e1e1e);--line-num-fg:var(--text-muted, #858585);--cursor-color:var(--text-standard, #ffffff);--selection-bg:var(--color-primary, #264f78);--status-bar-bg:var(--color-primary, #007acc);--status-bar-fg:var(--bg-primary, #ffffff);border-color:var(--border-strong, #333)}.code-editor-container{display:flex;flex-direction:column;flex:1;position:relative;overflow:hidden;height:100%}.code-editor-layout{display:grid;grid-template-columns:auto 1fr auto;flex:1;min-height:0;position:relative;overflow:hidden;background-color:var(--editor-bg)}.sidebar-tabs{width:48px;flex-shrink:0;background-color:var(--status-bar-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:20px}.sidebar-tabs .sidebar-tab{font-size:20px;color:var(--status-bar-fg);cursor:pointer;width:100%;display:flex;justify-content:center;position:relative;padding:8px 0;opacity:0.6;transition:all 0.2s}.sidebar-tabs .sidebar-tab.active{opacity:1;color:var(--color-primary, #007acc);border-left:2px solid var(--color-primary, #007acc)}.sidebar-tabs .sidebar-tab:hover{opacity:1}.sidebar-content{flex:1;overflow-y:auto;padding:0}.sidebar-header{padding:10px 16px;font-size:11px;font-weight:600;color:var(--status-bar-fg);text-transform:uppercase;letter-spacing:0.5px}.file-list{padding:4px 0}.file-item{display:flex;align-items:center;padding:6px 16px;gap:8px;cursor:pointer;font-size:13px;color:var(--status-bar-fg);transition:background 0.2s}.file-item:hover{background-color:rgba(128, 128, 128, 0.1);color:var(--editor-fg)}.file-item.active{background-color:rgba(0, 122, 204, 0.1);color:var(--color-primary, #007acc);font-weight:500}.file-item i{width:16px;text-align:center}.file-item .text-warning{color:var(--color-warning, #f59e0b)}.file-item .text-danger{color:var(--color-danger, #ef4444)}.file-item .text-primary{color:var(--color-primary, #10b981)}.editor-main-panel{display:flex;flex-direction:column;min-width:0;flex:1}.editor-breadcrumbs{height:35px;background-color:var(--editor-bg);border-bottom:1px solid var(--border-color);display:flex;align-items:center;padding:0 16px;font-size:13px;color:var(--status-bar-fg);gap:10px;user-select:none}.editor-breadcrumbs .breadcrumb-item{display:flex;align-items:center;gap:6px;cursor:pointer}.editor-breadcrumbs .breadcrumb-item:hover{color:var(--editor-fg)}.editor-breadcrumbs .breadcrumb-item i{font-size:14px}.editor-breadcrumbs .breadcrumb-item .separator{opacity:0.5;margin:0 4px}.editor-bottom-panel{height:250px;background-color:var(--editor-bg);border-top:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden;transition:height 0.3s ease}.editor-bottom-panel.collapsed{height:0;border-top:none}.editor-bottom-panel .panel-header{height:35px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;border-bottom:1px solid var(--border-color);background-color:var(--status-bar-bg)}.editor-bottom-panel .panel-tabs{display:flex;gap:20px;height:100%}.editor-bottom-panel .panel-tabs .panel-tab{font-size:11px;font-weight:600;color:var(--status-bar-fg);height:100%;display:flex;align-items:center;cursor:pointer;border-bottom:2px solid transparent;opacity:0.7;transition:all 0.2s}.editor-bottom-panel .panel-tabs .panel-tab:hover{opacity:1}.editor-bottom-panel .panel-tabs .panel-tab.active{opacity:1;color:var(--color-primary, #007acc);border-bottom-color:var(--color-primary, #007acc)}.editor-bottom-panel .panel-controls i{font-size:12px;color:var(--status-bar-fg);cursor:pointer;opacity:0.6}.editor-bottom-panel .panel-controls i:hover{opacity:1;color:var(--color-danger, #ef4444)}.editor-bottom-panel .panel-content{flex:1;overflow-y:auto;padding:12px 16px;font-family:"Menlo", "Monaco", "Courier New", monospace;background-color:var(--editor-bg)}.editor-bottom-panel .terminal-content .log-item{margin-bottom:4px;font-size:12px;display:flex;gap:8px}.editor-bottom-panel .terminal-content .log-item .log-time{opacity:0.5}.editor-bottom-panel .terminal-content .log-item.info{color:var(--color-success, #10b981)}.editor-bottom-panel .terminal-content .log-item.error{color:var(--color-danger, #ef4444)}.editor-bottom-panel .terminal-content .log-item.warn{color:var(--color-warning, #f59e0b)}.editor-bottom-panel .terminal-content .terminal-input-line{display:flex;gap:8px;margin-top:8px;align-items:center}.editor-bottom-panel .terminal-content .terminal-input-line .terminal-prompt{color:var(--color-primary, #007acc);font-weight:bold}.editor-bottom-panel .terminal-content .terminal-input-line .terminal-input{background:transparent;border:none;color:var(--editor-fg);outline:none;flex:1;font-family:inherit;font-size:12px}.line-numbers{flex-shrink:0;padding:10px 0;text-align:right;background-color:var(--line-num-bg);color:var(--line-num-fg);border-right:1px solid rgba(128, 128, 128, 0.1);user-select:none;min-width:45px;overflow:hidden}.line-numbers .line-number{display:flex;padding:0 4px 0 8px;height:1.5em;white-space:nowrap;justify-content:space-between;cursor:pointer}.line-numbers .line-number .fold-icon{opacity:0;font-size:9px;margin-left:4px;display:flex;align-items:center;color:var(--line-num-fg)}.line-numbers .line-number.git-added{border-left:3px solid var(--git-added)}.line-numbers .line-number.git-modified{border-left:3px solid var(--git-modified)}.line-numbers .line-number:hover .fold-icon{opacity:1;color:var(--editor-fg)}.folded-placeholder{background-color:var(--status-bar-bg);color:var(--status-bar-fg);padding:0 4px;border-radius:2px;font-size:10px;cursor:pointer;user-select:none;margin-left:4px;display:inline-block;height:14px;line-height:14px}.editor-wrapper{flex-grow:1;position:relative;overflow:hidden}.editor-content,.syntax-highlighter{margin:0;padding:10px;border:none;box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:inherit;tab-size:2;white-space:pre;word-wrap:normal;overflow-x:auto;overflow-y:auto;position:absolute;top:0;left:0;width:100%;height:100%}.editor-content{color:transparent;background:transparent;caret-color:var(--cursor-color);z-index:1;resize:none;outline:none;background-image:linear-gradient(to right, var(--indent-guide) 1px, transparent 1px);background-size:calc(var(--indent-size, 2) * 8.4px) 100%;background-repeat:repeat-x;background-attachment:local}.editor-content::selection{background:var(--selection-bg);color:transparent}.syntax-highlighter{z-index:0;pointer-events:none;color:var(--editor-fg)}.lint-error{text-decoration:underline wavy var(--color-danger, #ff4d4d);text-decoration-thickness:2px;position:relative}.minimap-container{width:var(--minimap-width);border-left:1px solid rgba(128, 128, 128, 0.1);background:var(--editor-bg);overflow:hidden;position:relative;user-select:none;flex-shrink:0;cursor:pointer}.minimap-content{transform-origin:top left;transform:scale(0.15);width:666%;pointer-events:none;padding:10px}.minimap-viewport{position:absolute;left:0;width:100%;background:rgba(100, 100, 100, 0.2);cursor:grab;transition:background 0.2s}.minimap-viewport:hover{background:rgba(100, 100, 100, 0.3)}.minimap-viewport:active{cursor:grabbing;background:rgba(100, 100, 100, 0.4)}.status-bar{display:flex;justify-content:flex-end;gap:16px;padding:4px 12px;background-color:var(--status-bar-bg);color:var(--status-bar-fg);font-size:11px;flex-shrink:0;user-select:none}.status-item{display:flex;align-items:center;gap:6px;cursor:default}.status-item i{font-size:10px}.command-palette-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:100;display:flex;justify-content:center;align-items:flex-start;padding-top:20px;backdrop-filter:blur(1px)}.command-palette{width:400px;max-width:90%;background:var(--editor-bg);border:1px solid var(--border-color, #454545);box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);border-radius:6px;display:flex;flex-direction:column;overflow:hidden;animation:slideDown 0.15s ease-out}.command-palette input{width:100%;padding:10px;border:none;background:var(--status-bar-bg);color:var(--editor-fg);font-family:inherit;font-size:13px;outline:none;border-bottom:1px solid var(--border-color, rgba(128, 128, 128, 0.2))}.command-palette .command-list{max-height:250px;overflow-y:auto;margin:0;padding:0;list-style:none}.command-palette .command-item{padding:8px 12px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;color:var(--editor-fg);border-left:2px solid transparent;}.command-palette .command-item:hover,.command-palette .command-item.active{background-color:var(--selection-bg);border-left-color:var(--status-bar-bg)}.command-palette .command-item .shortcut{opacity:0.6;font-size:11px}@keyframes slideDown{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.token.comment{color:var(--color-success, #6a9955);font-style:italic}.token.string{color:var(--color-danger, #ce9178)}.token.number{color:var(--color-primary, #b5cea8)}.token.boolean{color:var(--color-primary, #569cd6)}.token.keyword{color:var(--color-primary, #c586c0);font-weight:bold}.token.function{color:var(--color-primary, #dcdcaa)}.token.operator{color:var(--bg-secondary, #d4d4d4)}.token.class{color:var(--color-primary, #4ec9b0)}.token.variable{color:var(--color-primary, #9cdcfe)}.token.tag{color:var(--color-primary, #569cd6)}.token.attr-name{color:var(--color-primary, #9cdcfe)}.token.property{color:var(--color-primary, #9cdcfe)}.token.selector{color:var(--color-primary, #d7ba7d)}:host(:not(.theme-vs-dark)) .token.string{color:var(--color-danger, #a31515)}:host(:not(.theme-vs-dark)) .token.keyword{color:var(--color-primary, #af00db)}:host(:not(.theme-vs-dark)) .token.function{color:var(--color-primary, #795e26)}:host(:not(.theme-vs-dark)) .token.number{color:var(--color-success, #098658)}:host(:not(.theme-vs-dark)) .token.comment{color:var(--color-success, #008000)}:host(:not(.theme-vs-dark)) .token.selector{color:var(--text-primary, #800000)}.copy-button{position:absolute;top:8px;right:20px;z-index:10;background:rgba(128, 128, 128, 0.2);border:none;color:var(--editor-fg);padding:4px 8px;border-radius:4px;cursor:pointer;opacity:0;transition:opacity 0.2s;font-size:12px}.copy-button:hover{background:rgba(128, 128, 128, 0.4)}:host(:hover) .copy-button{opacity:1}.search-widget{position:absolute;top:10px;right:40px;right:60px;z-index:50;display:flex;background:var(--editor-bg);border:1px solid var(--border-color, #ccc);box-shadow:0 4px 6px rgba(0, 0, 0, 0.1);border-radius:4px;padding:4px;align-items:center}.search-widget .search-input{border:none;outline:none;background:transparent;color:var(--editor-fg);padding:4px;font-size:13px;width:150px}.search-widget .search-actions{display:flex;gap:2px}.search-widget .search-actions button{background:transparent;border:none;color:var(--status-bar-fg);cursor:pointer;padding:4px;border-radius:2px}.search-widget .search-actions button:hover{background:var(--line-num-bg);color:var(--editor-fg)}.suggestion-list{position:absolute;z-index:100;background:var(--editor-bg);border:1px solid var(--border-color, #ccc);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border-radius:4px;max-height:200px;overflow-y:auto;width:200px;margin:0;padding:0;list-style:none;font-size:13px;font-family:inherit}.suggestion-list li{padding:4px 8px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--editor-fg)}.suggestion-list li.active,.suggestion-list li:hover{background:var(--selection-bg);color:var(--editor-fg)}.suggestion-list li .icon{opacity:0.7;font-size:11px}.editor-tabs{display:flex;background-color:var(--status-bar-bg);background-color:var(--bg-primary, #252526);overflow-x:auto;flex-shrink:0;}.editor-tabs::-webkit-scrollbar{height:4px}.editor-tabs::-webkit-scrollbar-thumb{background:rgba(128, 128, 128, 0.3)}:host(:not(.theme-vs-dark)) .editor-tabs{background-color:var(--bg-primary, #f3f3f3)}.editor-tab{display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--text-muted, #969696);background-color:transparent;cursor:pointer;border-right:1px solid rgba(0, 0, 0, 0.1);font-size:13px;white-space:nowrap;border-top:2px solid transparent;}.editor-tab:hover{background-color:rgba(128, 128, 128, 0.1);color:var(--editor-fg)}.editor-tab.active{background-color:var(--editor-bg);color:var(--editor-fg);border-top-color:var(--color-primary, #007acc);}.editor-tab .tab-icon{font-size:12px;opacity:0.8}.editor-tab{}.editor-ribbon-container{display:flex;flex-direction:column;background-color:var(--ribbon-bg, #f3f3f3);border-bottom:1px solid var(--border-color, #d1d1d1);flex-shrink:0;user-select:none;font-family:"Segoe UI", system-ui, -apple-system, sans-serif;--ribbon-bg:var(--bg-primary, #f3f3f3);--ribbon-tab-active:var(--bg-primary, #ffffff);--ribbon-tab-fg:var(--text-secondary, #333333);--ribbon-accent:var(--color-primary, #2b579a);}:host(.theme-vs-dark) .editor-ribbon-container{--ribbon-bg:var(--bg-secondary, #2d2d2d);--ribbon-tab-active:var(--text-secondary, #3c3c3c);--ribbon-tab-fg:var(--bg-secondary, #cccccc);--ribbon-accent:var(--color-primary, #007acc);border-bottom-color:var(--border-strong, #3e3e3e)}.ribbon-tabs{display:flex;padding:0 10px;background-color:var(--ribbon-accent);gap:2px}.ribbon-tab{padding:4px 12px;cursor:pointer;opacity:0.7;transition:all 0.2s;border-bottom:2px solid transparent;font-size:11px;font-weight:500;display:flex;align-items:center;gap:6px;min-width:60px;justify-content:center}.ribbon-tab ui-tooltip{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ribbon-tab i{font-size:14px}.ribbon-tab:hover{background-color:rgba(255, 255, 255, 0.15);opacity:1}.ribbon-tab:hover i{transform:scale(1.1)}.ribbon-tab.active{background-color:var(--ribbon-bg);color:var(--ribbon-tab-fg);font-weight:600;border-bottom:none;border-radius:4px 4px 0 0;margin-top:4px;padding-top:4px;opacity:1}.ribbon-tab.active i{opacity:1}.ribbon-content{background:var(--editor-bg);border-bottom:1px solid var(--border-color);min-height:0;padding:4px;display:flex;gap:8px;overflow-x:auto}.labels-hover .ribbon-content,.labels-hidden .ribbon-content{min-height:48px}.ribbon-panel{display:flex;gap:12px;height:100%;align-items:stretch}.ribbon-group{display:flex;flex-direction:column;gap:2px;padding-right:12px;border-right:1px solid var(--border-color);height:100%;justify-content:space-between}.ribbon-group:last-child{border-right:none}.ribbon-group.divider{padding:0;width:1px;background:linear-gradient(to bottom, transparent 10%, var(--border-color, #d1d1d1) 20%, var(--border-color, #d1d1d1) 80%, transparent 90%);margin:2px 4px}.ribbon-group-content{display:flex;gap:4px;align-items:center;flex:1}.ribbon-group-label{font-size:9px;color:var(--status-bar-fg);text-align:center;text-transform:uppercase;letter-spacing:0.5px;opacity:0.7}.labels-hidden .ribbon-group-label{display:none}.ribbon-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 8px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--editor-fg);cursor:pointer;transition:all 0.2s;min-width:32px;font-size:11px}.ribbon-btn i{font-size:16px}.ribbon-btn:hover{background:rgba(144, 144, 144, 0.1);border-color:var(--border-color)}.ribbon-btn.active{background:rgba(0, 122, 204, 0.1);border-color:var(--color-primary, #007acc);color:var(--color-primary, #007acc)}.ribbon-btn.lg{padding:4px 12px;gap:4px;min-width:48px}.ribbon-btn.lg i{font-size:20px}.ribbon-btn.icon-only{padding:4px;min-width:28px;height:28px}.ribbon-btn.icon-only span{display:none}.ribbon-btn.icon-only i{font-size:16px}.ribbon-select-container{display:flex;flex-direction:column;gap:2px;align-items:center}.ribbon-select-container select{padding:2px 4px;font-size:11px;border:1px solid var(--border-color, #ccc);border-radius:3px;background:var(--editor-bg);color:var(--editor-fg);outline:none}.ribbon-select-container span{font-size:10px;opacity:0.7}.help-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);z-index:200;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(2px)}.help-modal{background:var(--editor-bg);color:var(--editor-fg);width:400px;max-width:90%;border-radius:8px;border:1px solid var(--border-color, #454545);box-shadow:0 10px 25px rgba(0, 0, 0, 0.5);display:flex;flex-direction:column;overflow:hidden;animation:fadeIn 0.2s ease-out}.help-modal .help-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--status-bar-bg);color:var(--status-bar-fg);border-bottom:1px solid rgba(128, 128, 128, 0.2)}.help-modal .help-header h3{margin:0;font-size:14px;font-weight:600}.help-modal .help-header .close-btn{background:transparent;border:none;color:inherit;cursor:pointer;font-size:14px;padding:4px}.help-modal .help-header .close-btn:hover{opacity:0.8}.help-modal .help-content{padding:16px;display:flex;flex-direction:column;gap:16px}.help-modal .help-section h4{margin:0 0 8px 0;font-size:12px;text-transform:uppercase;letter-spacing:0.5px;opacity:0.7;border-bottom:1px solid rgba(128, 128, 128, 0.2);padding-bottom:4px}.help-modal .help-section ul{list-style:none;padding:0;margin:0;font-size:13px}.help-modal .help-section ul li{margin-bottom:6px;display:flex;align-items:center;gap:8px}.help-modal kbd{background:rgba(128, 128, 128, 0.2);padding:2px 4px;border-radius:3px;font-family:inherit;font-size:11px;border:1px solid rgba(128, 128, 128, 0.3)}@keyframes fadeIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}'}},[513,"ui-code-editor",{value:[1025],language:[1],theme:[1],readonly:[4],lineNumbers:[4,"line-numbers"],toolbar:[4],toolbarLabelDisplay:[1,"toolbar-label-display"],toolbarGroups:[16],tabs:[16],highlightedCode:[32],lineCount:[32],statusStats:[32],showSearch:[32],searchQuery:[32],showPalette:[32],paletteQuery:[32],showHelp:[32],activeTabIndex:[32],unfoldedLines:[32],foldedLines:[32],lintErrors:[32],activeToolbarTab:[32],fontSize:[32],showLineNumbers:[32],showMinimap:[32],showSidebar:[32],showBottomPanel:[32],activeSidebarTab:[32],activeBottomTab:[32],activeFileIndex:[32],files:[32],terminalLogs:[32],suggestions:[32],suggestionIndex:[32],showSuggestions:[32],suggestionPos:[32]},void 0,{value:[{valueChanged:0}],language:[{languageChanged:0}],tabs:[{tabsChanged:0}],searchQuery:[{searchQueryChanged:0}]}]),b=h,u=function(){"undefined"!=typeof customElements&&["ui-code-editor","ui-badge","ui-button","ui-icon","ui-input","ui-loader","ui-tooltip"].forEach((t=>{switch(t){case"ui-code-editor":customElements.get(r(t))\|\|customElements.define(r(t),h);break;case"ui-badge":customElements.get(r(t))\|\|l();break;case"ui-button":customElements.get(r(t))\|\|n();break;case"ui-icon":customElements.get(r(t))\|\|s();break;case"ui-input":customElements.get(r(t))\|\|c();break;case"ui-loader":customElements.get(r(t))\|\|d();break;case"ui-tooltip":customElements.get(r(t))\|\|p()}}))};export{b as UiCodeEditor,u as defineCustomElement}

package/dist/components/ui-code-preview.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as a,transformTag as o}from"@stencil/core/internal/client";import{d as s,a as r}from"./badge.js";import{d as n}from"./icon.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.uiReset=i(this,"uiReset",7),this.expandedChange=i(this,"expandedChange",7)}get el(){return this}jsCode="";tsCode="";cssCode="";htmlCode="";snippets=[];activeLang="";label="";expanded=!0;showReset=!1;uiReset;expandedChange;copied=!1;resetting=!1;prismLoaded=!1;internalSnippets=[];handleStateChange(){this.highlightCode()}handleCodeChange(){this.processSnippets(),this.expanded&&this.highlightCode()}componentWillLoad(){this.processSnippets(),!this.activeLang&&this.internalSnippets.length>0&&(this.activeLang=this.internalSnippets[0].language)}componentDidLoad(){this.loadPrism()}processSnippets(){let e=[];if(this.snippets)if("string"==typeof this.snippets)try{e=JSON.parse(this.snippets)}catch(e){console.error("Failed to parse snippets JSON",e)}else Array.isArray(this.snippets)&&(e=[...this.snippets]);this.tsCode?e.push({language:"typescript",code:this.tsCode,label:"TS"}):this.jsCode&&e.push({language:"javascript",code:this.jsCode,label:"JS"}),this.htmlCode&&e.push({language:"markup",code:this.htmlCode,label:"HTML"}),this.cssCode&&e.push({language:"css",code:this.cssCode,label:"CSS"}),this.internalSnippets=e,!this.internalSnippets.some((e=>e.language===this.activeLang))&&this.internalSnippets.length>0&&(this.activeLang=this.internalSnippets[0].language)}loadPrism(){if(window.Prism?.languages?.tsx)this.checkAndLoadLanguages();else if(window.PRISM_LOADING){const e=setInterval((()=>{window.Prism&&(clearInterval(e),this.checkAndLoadLanguages())}),100)}else{window.PRISM_LOADING=!0;const e=document.createElement("script");e.src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js",e.onload=()=>{this.checkAndLoadLanguages()},document.head.appendChild(e);const t=document.createElement("link");t.rel="stylesheet",t.href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css",document.head.appendChild(t)}}checkAndLoadLanguages(){if(!window.Prism)return;const e=new Set(this.internalSnippets.map((e=>e.language)));["javascript","typescript","jsx","tsx","css","markup"].forEach((t=>e.add(t)));const t={js:"javascript",ts:"typescript",html:"markup",xml:"markup",svg:"markup",py:"python",cs:"csharp","c#":"csharp",pdk:"php",rb:"ruby",go:"go",java:"java",json:"json",bash:"bash",sh:"bash",shell:"bash"},i=[];if(e.forEach((e=>{const a=t[e.toLowerCase()]\|\|e.toLowerCase();window.Prism.languages[a]\|\|i.push(a)})),0===i.length)return this.prismLoaded=!0,void this.highlightCode();let a=0;i.forEach((e=>{if(document.querySelector(`script[src="prism-${e}.min.js"]`))return a++,void(a===i.length&&(this.prismLoaded=!0,this.highlightCode()));const t=document.createElement("script");t.src=`https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-${e}.min.js`,t.onload=()=>{a++,a===i.length&&(this.prismLoaded=!0,this.highlightCode())},t.onerror=()=>{console.warn("Failed to load Prism language: "+e),a++,a===i.length&&(this.prismLoaded=!0,this.highlightCode())},document.head.appendChild(t)}))}highlightCode(){if(this.expanded){const e=this.internalSnippets.find((e=>e.language===this.activeLang))\|\|this.internalSnippets[0],t=e?e.code:"";setTimeout((()=>{const e=this.el.querySelector("code");e&&(e.textContent=t,window.Prism&&window.Prism.highlightElement(e))}),50)}}handleCopy=e=>{e.stopPropagation();const t=this.internalSnippets.find((e=>e.language===this.activeLang));t?.code&&navigator.clipboard.writeText(t.code).then((()=>{this.copied=!0,setTimeout((()=>this.copied=!1),2e3)}))};handleReset=e=>{e.stopPropagation(),this.resetting=!0,this.uiReset.emit(),setTimeout((()=>this.resetting=!1),600)};toggleExpanded=e=>{e.stopPropagation(),this.expanded=!this.expanded,this.expandedChange.emit(this.expanded)};getPrismLanguage(e){return{js:"javascript",ts:"typescript",html:"markup","c#":"csharp"}[e.toLowerCase()]\|\|e.toLowerCase()}getLabel(e){if(e.label)return e.label;const t=e.language.toLowerCase();return{javascript:"JS",typescript:"TS",markup:"HTML",css:"CSS",python:"Python",java:"Java",csharp:"C#",go:"Go",json:"JSON"}[t]\|\|t.toUpperCase()}render(){const e=this.internalSnippets.find((e=>e.language===this.activeLang))\|\|this.internalSnippets[0],t=e?e.code:"",i=this.getPrismLanguage(e?e.language:"markup");return a("div",{key:"7a1351cde2fe115457ca505a74ddbeac1f6dcddd",class:{"code-preview-root":!0,"is-expanded":this.expanded}},a("div",{key:"1f9addfe7e96493bccb7257ddb5069d1a7e70c7e",class:"code-toolbar"},a("div",{key:"080be5bd471895a49e949192b4980dc0de1e6226",class:"left-actions"},this.label&&a("span",{key:"d658281d365881a28fa22b875f5f091b4fe157a4",class:"code-label"},this.label),this.internalSnippets.length>1&&a("div",{key:"e61fb82ff28f045b037bf30310c730c4280fa4d8",class:"lang-tabs"},this.internalSnippets.map((e=>a("ui-button",{variant:this.activeLang===e.language?"primary":"ghost",class:{active:this.activeLang===e.language},onClick:()=>this.activeLang=e.language,size:"sm",label:this.getLabel(e)})))),1===this.internalSnippets.length&&!this.label&&a("span",{key:"d0e2caca56998e929749f305ac2af37be47ea4b6",class:"code-label",style:{opacity:"0.7",fontSize:"12px"}},this.getLabel(this.internalSnippets[0]))),a("div",{key:"49fa1c00084fa56f46acc5efd41a6008abf3a136",class:"right-actions"},this.showReset&&a("ui-button",{key:"4d65ee2605b003d51bb6ec924b086310f3c398f2",variant:"ghost",onClick:this.handleReset,title:"Reset demo",ariaLabel:"Reset demo",icon:"rotate-cw",iconLibrary:"lucide",iconOnly:!0,size:"sm",loading:this.resetting}),a("ui-button",{key:"0889f503e1703a2f07bc2fbc489282495667637c",variant:"ghost",onClick:this.toggleExpanded,title:this.expanded?"Hide code":"Show code",ariaLabel:this.expanded?"Hide code":"Show code",size:"sm",label:this.expanded?"Hide code":"Show code",icon:this.expanded?"chevron-up":"chevron-down",iconLibrary:"lucide"}),a("ui-button",{key:"e31e13096084bfeac8115e778423ec6693411b92",variant:"ghost",onClick:this.handleCopy,title:"Copy code",ariaLabel:"Copy code",size:"sm",icon:this.copied?"check":"copy",iconLibrary:"lucide",iconOnly:!0,iconColor:this.copied?"#4caf50":void 0}))),a("div",{key:"4e94f96825f20eb61feadf421a08cbc76cdec0db",class:"code-container",style:{maxHeight:this.expanded?"800px":"0"}},a("pre",{key:"8206cc5718503cdcc151d816897fffdaebdf0195",class:"language-"+i},a("code",{key:"32aed72ceca967b3f29aaccf03e8746033df5dea",class:"language-"+i},t))))}static get watchers(){return{activeLang:[{handleStateChange:0}],expanded:[{handleStateChange:0}],jsCode:[{handleCodeChange:0}],tsCode:[{handleCodeChange:0}],htmlCode:[{handleCodeChange:0}],cssCode:[{handleCodeChange:0}],snippets:[{handleCodeChange:0}]}}static get style(){return'.sr-only.sc-ui-code-preview{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only.sc-ui-code-preview{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.sc-ui-code-preview-h{display:block;margin:16px 0;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--preview-border-color:var(--border-default, #e0e0e0);--preview-bg-color:var(--bg-primary, var(--text-standard, #ffffff));--preview-toolbar-bg:var(--bg-primary, #f8f9fa);--preview-highlight-color:var(--color-primary, #1976d2);--preview-text-main:var(--text-primary, #202124);--preview-text-muted:var(--text-secondary, #5f6368);--preview-shadow:0 2px 8px rgba(0, 0, 0, 0.08);--code-bg:var(--bg-primary, #1d1f21)}.code-preview-root.sc-ui-code-preview{border:1px solid var(--preview-border-color);border-radius:8px;overflow:hidden;background:var(--preview-bg-color);box-shadow:var(--preview-shadow);transition:box-shadow 0.3s ease}.code-preview-root.sc-ui-code-preview:hover{box-shadow:0 4px 12px rgba(0, 0, 0, 0.12)}.code-toolbar.sc-ui-code-preview{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--preview-toolbar-bg);border-bottom:1px solid var(--preview-border-color);min-height:48px}.left-actions.sc-ui-code-preview{display:flex;align-items:center;gap:16px}.code-label.sc-ui-code-preview{font-size:14px;font-weight:600;color:var(--preview-text-main)}.lang-tabs.sc-ui-code-preview{display:flex;background:var(--bg-primary, #eee);padding:2px;border-radius:6px;gap:2px}.tab-btn.sc-ui-code-preview{background:transparent;border:none;padding:4px 12px;font-size:12px;font-weight:500;border-radius:4px;cursor:pointer;color:var(--preview-text-muted);transition:all 0.2s ease}.tab-btn.sc-ui-code-preview:hover{color:var(--preview-text-main)}.tab-btn.active.sc-ui-code-preview{background:var(--bg-primary, #ffffff);color:var(--preview-highlight-color);box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.right-actions.sc-ui-code-preview{display:flex;align-items:center;gap:8px}.icon-action-btn.sc-ui-code-preview{background:transparent;border:1px solid transparent;padding:6px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--preview-text-muted);transition:all 0.2s ease;font-size:13px;font-weight:500}.icon-action-btn.sc-ui-code-preview:hover{background:rgba(0, 0, 0, 0.04);color:var(--preview-text-main)}.copy-btn.sc-ui-code-preview{padding:6px}.btn-text.sc-ui-code-preview{user-select:none}.chevron-icon.sc-ui-code-preview{transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.chevron-icon.rotated.sc-ui-code-preview{transform:rotate(180deg)}.reset-icon.spinning.sc-ui-code-preview{animation:spin 0.6s cubic-bezier(0.4, 0, 0.2, 1)}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.code-container.sc-ui-code-preview{overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);background:var(--code-bg)}pre[class=language-].sc-ui-code-preview{margin:0 !important;padding:20px !important;font-size:13px !important;line-height:1.6 !important;background:var(--code-bg) !important;border-radius:0 !important;max-height:100% !important;overflow:auto !important}code[class*=language-].sc-ui-code-preview{font-family:"Fira Code", "Cascadia Code", "Source Code Pro", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;text-shadow:none !important}pre.sc-ui-code-preview::-webkit-scrollbar{width:8px;height:8px}pre.sc-ui-code-preview::-webkit-scrollbar-track{background:var(--bg-primary, #25282c)}pre.sc-ui-code-preview::-webkit-scrollbar-thumb{background:var(--bg-secondary, #4a4d51);border-radius:4px}pre.sc-ui-code-preview::-webkit-scrollbar-thumb:hover{background:var(--bg-secondary, #5a5d61)}@media (max-width: 600px){.btn-text.sc-ui-code-preview{display:none}.code-toolbar.sc-ui-code-preview{padding:8px}}'}},[514,"ui-code-preview",{jsCode:[513,"js-code"],tsCode:[513,"ts-code"],cssCode:[513,"css-code"],htmlCode:[513,"html-code"],snippets:[513],activeLang:[1025,"active-lang"],label:[1],expanded:[1540],showReset:[4,"show-reset"],copied:[32],resetting:[32],prismLoaded:[32],internalSnippets:[32]},void 0,{activeLang:[{handleStateChange:0}],expanded:[{handleStateChange:0}],jsCode:[{handleCodeChange:0}],tsCode:[{handleCodeChange:0}],htmlCode:[{handleCodeChange:0}],cssCode:[{handleCodeChange:0}],snippets:[{handleCodeChange:0}]}]),d=c,p=function(){"undefined"!=typeof customElements&&["ui-code-preview","ui-badge","ui-button","ui-icon"].forEach((e=>{switch(e){case"ui-code-preview":customElements.get(o(e))\|\|customElements.define(o(e),c);break;case"ui-badge":customElements.get(o(e))\|\|r();break;case"ui-button":customElements.get(o(e))\|\|s();break;case"ui-icon":customElements.get(o(e))\|\|n()}}))};export{d as UiCodePreview,p as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as a,transformTag as o}from"@stencil/core/internal/client";import{d as s,a as r}from"./badge.js";import{d as n}from"./icon.js";import{d as c}from"./loader.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.uiReset=i(this,"uiReset",7),this.expandedChange=i(this,"expandedChange",7)}get el(){return this}jsCode="";tsCode="";cssCode="";htmlCode="";snippets=[];activeLang="";label="";expanded=!0;showReset=!1;uiReset;expandedChange;copied=!1;resetting=!1;prismLoaded=!1;internalSnippets=[];handleStateChange(){this.highlightCode()}handleCodeChange(){this.processSnippets(),this.expanded&&this.highlightCode()}componentWillLoad(){this.processSnippets(),!this.activeLang&&this.internalSnippets.length>0&&(this.activeLang=this.internalSnippets[0].language)}componentDidLoad(){this.loadPrism()}processSnippets(){let e=[];if(this.snippets)if("string"==typeof this.snippets)try{e=JSON.parse(this.snippets)}catch(e){console.error("Failed to parse snippets JSON",e)}else Array.isArray(this.snippets)&&(e=[...this.snippets]);this.tsCode?e.push({language:"typescript",code:this.tsCode,label:"TS"}):this.jsCode&&e.push({language:"javascript",code:this.jsCode,label:"JS"}),this.htmlCode&&e.push({language:"markup",code:this.htmlCode,label:"HTML"}),this.cssCode&&e.push({language:"css",code:this.cssCode,label:"CSS"}),this.internalSnippets=e,!this.internalSnippets.some((e=>e.language===this.activeLang))&&this.internalSnippets.length>0&&(this.activeLang=this.internalSnippets[0].language)}loadPrism(){if(window.Prism?.languages?.tsx)this.checkAndLoadLanguages();else if(window.PRISM_LOADING){const e=setInterval((()=>{window.Prism&&(clearInterval(e),this.checkAndLoadLanguages())}),100)}else{window.PRISM_LOADING=!0;const e=document.createElement("script");e.src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js",e.onload=()=>{this.checkAndLoadLanguages()},document.head.appendChild(e);const t=document.createElement("link");t.rel="stylesheet",t.href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css",document.head.appendChild(t)}}checkAndLoadLanguages(){if(!window.Prism)return;const e=new Set(this.internalSnippets.map((e=>e.language)));["javascript","typescript","jsx","tsx","css","markup"].forEach((t=>e.add(t)));const t={js:"javascript",ts:"typescript",html:"markup",xml:"markup",svg:"markup",py:"python",cs:"csharp","c#":"csharp",pdk:"php",rb:"ruby",go:"go",java:"java",json:"json",bash:"bash",sh:"bash",shell:"bash"},i=[];if(e.forEach((e=>{const a=t[e.toLowerCase()]\|\|e.toLowerCase();window.Prism.languages[a]\|\|i.push(a)})),0===i.length)return this.prismLoaded=!0,void this.highlightCode();let a=0;i.forEach((e=>{if(document.querySelector(`script[src="prism-${e}.min.js"]`))return a++,void(a===i.length&&(this.prismLoaded=!0,this.highlightCode()));const t=document.createElement("script");t.src=`https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-${e}.min.js`,t.onload=()=>{a++,a===i.length&&(this.prismLoaded=!0,this.highlightCode())},t.onerror=()=>{console.warn("Failed to load Prism language: "+e),a++,a===i.length&&(this.prismLoaded=!0,this.highlightCode())},document.head.appendChild(t)}))}highlightCode(){if(this.expanded){const e=this.internalSnippets.find((e=>e.language===this.activeLang))\|\|this.internalSnippets[0],t=e?e.code:"";setTimeout((()=>{const e=this.el.querySelector("code");e&&(e.textContent=t,window.Prism&&window.Prism.highlightElement(e))}),50)}}handleCopy=e=>{e.stopPropagation();const t=this.internalSnippets.find((e=>e.language===this.activeLang));t?.code&&navigator.clipboard.writeText(t.code).then((()=>{this.copied=!0,setTimeout((()=>this.copied=!1),2e3)}))};handleReset=e=>{e.stopPropagation(),this.resetting=!0,this.uiReset.emit(),setTimeout((()=>this.resetting=!1),600)};toggleExpanded=e=>{e.stopPropagation(),this.expanded=!this.expanded,this.expandedChange.emit(this.expanded)};getPrismLanguage(e){return{js:"javascript",ts:"typescript",html:"markup","c#":"csharp"}[e.toLowerCase()]\|\|e.toLowerCase()}getLabel(e){if(e.label)return e.label;const t=e.language.toLowerCase();return{javascript:"JS",typescript:"TS",markup:"HTML",css:"CSS",python:"Python",java:"Java",csharp:"C#",go:"Go",json:"JSON"}[t]\|\|t.toUpperCase()}render(){const e=this.internalSnippets.find((e=>e.language===this.activeLang))\|\|this.internalSnippets[0],t=e?e.code:"",i=this.getPrismLanguage(e?e.language:"markup");return a("div",{key:"7c018300ea409daaeffdc41909ee4cd6219ee3e7",class:{"code-preview-root":!0,"is-expanded":this.expanded}},a("div",{key:"efca8affcb0b7261ea588b97950b99df29ca696a",class:"code-toolbar"},a("div",{key:"71d77e7c07764ff350d438eb963328f1def9695f",class:"left-actions"},this.label&&a("span",{key:"54b86ab6f989e15c93d7c6421dfd548be19c3be3",class:"code-label"},this.label),this.internalSnippets.length>1&&a("div",{key:"b4d2e0ebce935db765f8b125150448f224270998",class:"lang-tabs"},this.internalSnippets.map((e=>a("ui-button",{variant:this.activeLang===e.language?"primary":"ghost",class:{active:this.activeLang===e.language},onClick:()=>this.activeLang=e.language,size:"sm",label:this.getLabel(e)})))),1===this.internalSnippets.length&&!this.label&&a("span",{key:"dfd511444c9ac3367ec094a02b39a9b2a75ce80c",class:"code-label",style:{opacity:"0.7",fontSize:"12px"}},this.getLabel(this.internalSnippets[0]))),a("div",{key:"6db7ea479ab2760e5f4826866a763bb774b2d8d4",class:"right-actions"},this.showReset&&a("ui-button",{key:"b54d50c47246f4c9a7a3cd04f15ff69bc5f0ab0e",variant:"ghost",onClick:this.handleReset,title:"Reset demo",ariaLabel:"Reset demo",icon:"rotate-cw",iconLibrary:"lucide",iconOnly:!0,size:"sm",loading:this.resetting}),a("ui-button",{key:"1ea0a7befd699d18b05d6bc95ba0290f7d56d447",variant:"ghost",onClick:this.toggleExpanded,title:this.expanded?"Hide code":"Show code",ariaLabel:this.expanded?"Hide code":"Show code",size:"sm",label:this.expanded?"Hide code":"Show code",icon:this.expanded?"chevron-up":"chevron-down",iconLibrary:"lucide"}),a("ui-button",{key:"42aca403662777a91d6841f0195185dceaeb04da",variant:"ghost",onClick:this.handleCopy,title:"Copy code",ariaLabel:"Copy code",size:"sm",icon:this.copied?"check":"copy",iconLibrary:"lucide",iconOnly:!0,iconColor:this.copied?"#4caf50":void 0}))),a("div",{key:"48dee33979bc2f63352c5ed2375951b8341e812a",class:"code-container",style:{maxHeight:this.expanded?"800px":"0"}},a("pre",{key:"c426c52b4a21389c77ebfa99d7b14fdb6acc778d",class:"language-"+i},a("code",{key:"ece0a1bf1acedae115ac8c5f1c13cbb4065c7ee7",class:"language-"+i},t))))}static get watchers(){return{activeLang:[{handleStateChange:0}],expanded:[{handleStateChange:0}],jsCode:[{handleCodeChange:0}],tsCode:[{handleCodeChange:0}],htmlCode:[{handleCodeChange:0}],cssCode:[{handleCodeChange:0}],snippets:[{handleCodeChange:0}]}}static get style(){return'.sr-only.sc-ui-code-preview{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only.sc-ui-code-preview{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.sc-ui-code-preview-h{display:block;margin:16px 0;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--preview-border-color:var(--border-default, #e0e0e0);--preview-bg-color:var(--bg-primary, var(--text-standard, #ffffff));--preview-toolbar-bg:var(--bg-primary, #f8f9fa);--preview-highlight-color:var(--color-primary, #1976d2);--preview-text-main:var(--text-primary, #202124);--preview-text-muted:var(--text-secondary, #5f6368);--preview-shadow:0 2px 8px rgba(0, 0, 0, 0.08);--code-bg:var(--bg-primary, #1d1f21)}.code-preview-root.sc-ui-code-preview{border:1px solid var(--preview-border-color);border-radius:8px;overflow:hidden;background:var(--preview-bg-color);box-shadow:var(--preview-shadow);transition:box-shadow 0.3s ease}.code-preview-root.sc-ui-code-preview:hover{box-shadow:0 4px 12px rgba(0, 0, 0, 0.12)}.code-toolbar.sc-ui-code-preview{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--preview-toolbar-bg);border-bottom:1px solid var(--preview-border-color);min-height:48px}.left-actions.sc-ui-code-preview{display:flex;align-items:center;gap:16px}.code-label.sc-ui-code-preview{font-size:14px;font-weight:600;color:var(--preview-text-main)}.lang-tabs.sc-ui-code-preview{display:flex;background:var(--bg-primary, #eee);padding:2px;border-radius:6px;gap:2px}.tab-btn.sc-ui-code-preview{background:transparent;border:none;padding:4px 12px;font-size:12px;font-weight:500;border-radius:4px;cursor:pointer;color:var(--preview-text-muted);transition:all 0.2s ease}.tab-btn.sc-ui-code-preview:hover{color:var(--preview-text-main)}.tab-btn.active.sc-ui-code-preview{background:var(--bg-primary, #ffffff);color:var(--preview-highlight-color);box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.right-actions.sc-ui-code-preview{display:flex;align-items:center;gap:8px}.icon-action-btn.sc-ui-code-preview{background:transparent;border:1px solid transparent;padding:6px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--preview-text-muted);transition:all 0.2s ease;font-size:13px;font-weight:500}.icon-action-btn.sc-ui-code-preview:hover{background:rgba(0, 0, 0, 0.04);color:var(--preview-text-main)}.copy-btn.sc-ui-code-preview{padding:6px}.btn-text.sc-ui-code-preview{user-select:none}.chevron-icon.sc-ui-code-preview{transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.chevron-icon.rotated.sc-ui-code-preview{transform:rotate(180deg)}.reset-icon.spinning.sc-ui-code-preview{animation:spin 0.6s cubic-bezier(0.4, 0, 0.2, 1)}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.code-container.sc-ui-code-preview{overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);background:var(--code-bg)}pre[class=language-].sc-ui-code-preview{margin:0 !important;padding:20px !important;font-size:13px !important;line-height:1.6 !important;background:var(--code-bg) !important;border-radius:0 !important;max-height:100% !important;overflow:auto !important}code[class*=language-].sc-ui-code-preview{font-family:"Fira Code", "Cascadia Code", "Source Code Pro", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;text-shadow:none !important}pre.sc-ui-code-preview::-webkit-scrollbar{width:8px;height:8px}pre.sc-ui-code-preview::-webkit-scrollbar-track{background:var(--bg-primary, #25282c)}pre.sc-ui-code-preview::-webkit-scrollbar-thumb{background:var(--bg-secondary, #4a4d51);border-radius:4px}pre.sc-ui-code-preview::-webkit-scrollbar-thumb:hover{background:var(--bg-secondary, #5a5d61)}@media (max-width: 600px){.btn-text.sc-ui-code-preview{display:none}.code-toolbar.sc-ui-code-preview{padding:8px}}'}},[514,"ui-code-preview",{jsCode:[513,"js-code"],tsCode:[513,"ts-code"],cssCode:[513,"css-code"],htmlCode:[513,"html-code"],snippets:[513],activeLang:[1025,"active-lang"],label:[1],expanded:[1540],showReset:[4,"show-reset"],copied:[32],resetting:[32],prismLoaded:[32],internalSnippets:[32]},void 0,{activeLang:[{handleStateChange:0}],expanded:[{handleStateChange:0}],jsCode:[{handleCodeChange:0}],tsCode:[{handleCodeChange:0}],htmlCode:[{handleCodeChange:0}],cssCode:[{handleCodeChange:0}],snippets:[{handleCodeChange:0}]}]),p=d,h=function(){"undefined"!=typeof customElements&&["ui-code-preview","ui-badge","ui-button","ui-icon","ui-loader"].forEach((e=>{switch(e){case"ui-code-preview":customElements.get(o(e))\|\|customElements.define(o(e),d);break;case"ui-badge":customElements.get(o(e))\|\|r();break;case"ui-button":customElements.get(o(e))\|\|s();break;case"ui-icon":customElements.get(o(e))\|\|n();break;case"ui-loader":customElements.get(o(e))\|\|c()}}))};export{p as UiCodePreview,h as defineCustomElement}

package/dist/components/ui-color-controller.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as e,createEvent as a,h as c,Host as i,transformTag as r}from"@stencil/core/internal/client";import{d as l,a as s}from"./badge.js";import{d as n}from"./icon.js";import{d as o}from"./input.js";const p=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.colorChange=a(this,"colorChange",7)}value="#10b981";label="";colorChange;r=16;g=185;b=129;h=159;s=91;v=73;hex="10B981";handleValueUpdate(t){this.updateAllFromHex(t)}componentWillLoad(){this.updateAllFromHex(this.value)}updateAllFromHex(t){if(!t)return;const e=t.startsWith("#")?t.slice(1):t;this.hex=e.toUpperCase();const a=parseInt(e,16);this.r=a>>16&255,this.g=a>>8&255,this.b=255&a;const c=this.r/255,i=this.g/255,r=this.b/255,l=Math.max(c,i,r),s=l-Math.min(c,i,r);let n=0;0===s?n=0:l===c?n=(i-r)/s%6:l===i?n=(r-c)/s+2:l===r&&(n=(c-i)/s+4),n=Math.round(60n),n<0&&(n+=360);const o=0===l?0:s/l,p=l;this.h=n,this.s=Math.round(100o),this.v=Math.round(100p)}emitChange(){this.value="#"+this.hex,this.colorChange.emit(this.value)}handleHexInput=t=>{const e=t.detail.value\|\|"";6!==e.length&&3!==e.length\|\|/^[0-9A-Fa-f]+$/.test(e)&&(this.hex=e.toUpperCase(),this.updateAllFromHex(this.hex),this.emitChange())};handleRgbChange(t,e){isNaN(e)\|\|(this[t]=Math.max(0,Math.min(255,e)),this.hex=((1<<24)+(this.r<<16)+(this.g<<8)+this.b).toString(16).slice(1).toUpperCase(),this.updateAllFromHex(this.hex),this.emitChange())}handleHsvChange(t,e){if(isNaN(e))return;"h"===t&&(this.h=Math.max(0,Math.min(360,e))),"s"===t&&(this.s=Math.max(0,Math.min(100,e))),"v"===t&&(this.v=Math.max(0,Math.min(100,e)));const a=this.h,c=this.v/100,i=c(this.s/100),r=i(1-Math.abs(a/60%2-1)),l=c-i;let s=0,n=0,o=0;a<60?(s=i,n=r,o=0):a<120?(s=r,n=i,o=0):a<180?(s=0,n=i,o=r):a<240?(s=0,n=r,o=i):a<300?(s=r,n=0,o=i):(s=i,n=0,o=r),this.r=Math.round(255(s+l)),this.g=Math.round(255(n+l)),this.b=Math.round(255(o+l)),this.hex=((1<<24)+(this.r<<16)+(this.g<<8)+this.b).toString(16).slice(1).toUpperCase(),this.emitChange()}render(){return c(i,{key:"~~b3bf272d34509127138914724e36b188edd43d6e~~"},this.label&&c("div",{key:"~~36ebf9de294642b1d67135b6c8c452fb47c612e6~~",class:"col-ctrl-label"},this.label),c("div",{key:"~~59133d3793607ff7168906dbddd0e7e40c7244a9~~",class:"col-ctrl-grid"},c("div",{key:"~~44b1a8ae8bbc3faaf5c9b009eab5580297761c2d~~",class:"col-ctrl-row"},c("span",{key:"~~d5fe3fe12e6a116569b2939a0d63f8ff5599184f~~",class:"col-ctrl-key"},"H"),c("div",{key:"~~69bb7842109760c51e1122963cb56f0eba8454a0~~",class:"col-ctrl-input-wrapper"},c("ui-input",{key:"~~f6a133615ab877293398de65f3b0004c0234f161~~",class:"col-ctrl-input",type:"number",value:this.h,onInputChange:t=>this.handleHsvChange("h",parseInt(t.detail)),variant:"plain"}),c("span",{key:"~~e00ac8771d5c0f6a08d93fd3f1c1b85b6014edca~~",class:"col-ctrl-unit"},"°"))),c("div",{key:"~~2fd071bc5741f47cbf40b6664332c6f63e684091~~",class:"col-ctrl-row"},c("span",{key:"~~375c1767c1631f1f5aa0095606c9e50b350443f2~~",class:"col-ctrl-key"},"S"),c("div",{key:"~~3c41e3f98fc37ab7a2af5f3a57dfa7bb05427744~~",class:"col-ctrl-input-wrapper"},c("ui-input",{key:"~~3f2a4a152681231156b1b82091fd08b78d6cba2f~~",class:"col-ctrl-input",type:"number",value:this.s,onInputChange:t=>this.handleHsvChange("s",parseInt(t.detail)),variant:"plain"}),c("span",{key:"~~3c33faf1a4ffe99ebe5cde064c024034b691ad1f~~",class:"col-ctrl-unit"},"%"))),c("div",{key:"~~2e49ebd592ade20e0e7660b10416b656312347e0~~",class:"col-ctrl-row",style:{marginBottom:"12px"}},c("span",{key:"~~874e0da90ed96b03c7955ac6650c75b039ea886a~~",class:"col-ctrl-key"},"V"),c("div",{key:"~~7ef1fd0da2ea55c460643e464a0a06bd4ae2d280~~",class:"col-ctrl-input-wrapper"},c("ui-input",{key:"~~11cb688038ce67cee9c29b091498b7967674b7fa~~",class:"col-ctrl-input",type:"number",value:this.v,onInputChange:t=>this.handleHsvChange("v",parseInt(t.detail)),variant:"plain"}),c("span",{key:"~~09449462dbba86a0fd33b862f42590209218b9e2~~",class:"col-ctrl-unit"},"%"))),c("div",{key:"~~c16ecc86f52bbb01edea970400c2128d86384a70~~",class:"col-ctrl-row"},c("span",{key:"~~53fa2cd839dc048567e3aed4fe6ce766d7005577~~",class:"col-ctrl-key"},"R"),c("div",{key:"~~bcf8bf7833c0dc0030d99b28af56b0bc430fd708~~",class:"col-ctrl-input-wrapper"},c("ui-input",{key:"~~a498ca548a2529505bae7161659f50b4e5641678~~",class:"col-ctrl-input",type:"number",value:this.r,onInputChange:t=>this.handleRgbChange("r",parseInt(t.detail)),variant:"plain"}))),c("div",{key:"~~516aff05554aad71cc012a9905dad96d5e03b91e~~",class:"col-ctrl-row"},c("span",{key:"~~2c234e6e2f2111724cf603a76303a965b2277c17~~",class:"col-ctrl-key"},"G"),c("div",{key:"~~85339e47bcd95bf20f6e7ae42ac5d29739e8d05a~~",class:"col-ctrl-input-wrapper"},c("ui-input",{key:"~~d705b336aaceb110e92a9a63c000bfc19c9bdb17~~",class:"col-ctrl-input",type:"number",value:this.g,onInputChange:t=>this.handleRgbChange("g",parseInt(t.detail)),variant:"plain"}))),c("div",{key:"~~033523f4276729ee119fe4ad793e02850c288831~~",class:"col-ctrl-row",style:{marginBottom:"12px"}},c("span",{key:"~~66fd8bdd0d2dd540fb591d02ebc3240913477b52~~",class:"col-ctrl-key"},"B"),c("div",{key:"~~1cfa29786007a7c1292817b914cb573f0a69f1b8~~",class:"col-ctrl-input-wrapper"},c("ui-input",{key:"~~b6c51663d914adb081819c23fb8e7915be7b50cb~~",class:"col-ctrl-input",type:"number",value:this.b,onInputChange:t=>this.handleRgbChange("b",parseInt(t.detail)),variant:"plain"}))),c("div",{key:"~~4c43173acd72a63dcb2e3ea5759d05bceebd6087~~",class:"col-ctrl-row hex-row"},c("span",{key:"~~3d742b9ca0c5956498a6787171a22fbdb0e87a12~~",class:"col-ctrl-key"},"#"),c("div",{key:"~~294d48fc7bb69c9dda1a36788b6e712725fda674~~",class:"col-ctrl-input-wrapper hex-wrapper"},c("ui-input",{key:"~~051e90c5e2814ba7a5ae6cb542e379f343cf29ea~~",class:"col-ctrl-input hex-input",value:this.hex,onInputChange:t=>this.handleHexInput({detail:{value:t.detail}}),variant:"plain"})))))}static get watchers(){return{value:[{handleValueUpdate:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit;width:100%;max-width:2a0px}.col-ctrl-label{font-size:13px;font-weight:700;color:var(--color-primary, #6366f1);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.05em}.col-ctrl-grid{display:flex;flex-direction:column;gap:6px}.col-ctrl-row{display:flex;align-items:center;gap:8px}.col-ctrl-key{flex:0 0 20px;font-size:12px;font-weight:500;color:var(--text-secondary, #4b5563)}.col-ctrl-input-wrapper{flex:1;display:flex;align-items:center;border:1px solid var(--border-default, #e5e7eb);border-radius:4px;background:var(--bg-primary, #ffffff);padding:2px 6px;transition:all 0.2s}.col-ctrl-input-wrapper:focus-within{border-color:var(--color-primary, #6366f1);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 99, 102, 241), 0.1)}.col-ctrl-input{flex:1;border:none;background:transparent;outline:none;font-size:13px;padding:4px;width:100%;color:var(--text-primary, #111827);font-family:monospace;text-align:right}.col-ctrl-input::-webkit-outer-spin-button,.col-ctrl-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hex-row .col-ctrl-key{font-family:monospace;font-weight:700}.col-ctrl-unit{font-size:12px;color:var(--text-muted, #9ca3af);margin-left:4px;min-width:12px}.hex-input{text-align:left;letter-spacing:0.05em;font-weight:600}"}},[513,"ui-color-controller",{value:[1025],label:[1],r:[32],g:[32],b:[32],h:[32],s:[32],v:[32],hex:[32]},void 0,{value:[{handleValueUpdate:0}]}]),d=p,b=function(){"undefined"!=typeof customElements&&["ui-color-controller","ui-badge","ui-button","ui-icon","ui-input"].forEach((t=>{switch(t){case"ui-color-controller":customElements.get(r(t))\|\|customElements.define(r(t),p);break;case"ui-badge":customElements.get(r(t))\|\|s();break;case"ui-button":customElements.get(r(t))\|\|l();break;case"ui-icon":customElements.get(r(t))\|\|n();break;case"ui-input":customElements.get(r(t))\|\|o()}}))};export{d as UiColorController,b as defineCustomElement}
1	+ import{proxyCustomElement as t,HTMLElement as a,createEvent as e,h as c,Host as i,transformTag as r}from"@stencil/core/internal/client";import{d as s,a as l}from"./badge.js";import{d as n}from"./icon.js";import{d as o}from"./input.js";import{d as p}from"./loader.js";const d=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.colorChange=e(this,"colorChange",7)}value="#10b981";label="";colorChange;r=16;g=185;b=129;h=159;s=91;v=73;hex="10B981";handleValueUpdate(t){this.updateAllFromHex(t)}componentWillLoad(){this.updateAllFromHex(this.value)}updateAllFromHex(t){if(!t)return;const a=t.startsWith("#")?t.slice(1):t;this.hex=a.toUpperCase();const e=parseInt(a,16);this.r=e>>16&255,this.g=e>>8&255,this.b=255&e;const c=this.r/255,i=this.g/255,r=this.b/255,s=Math.max(c,i,r),l=s-Math.min(c,i,r);let n=0;0===l?n=0:s===c?n=(i-r)/l%6:s===i?n=(r-c)/l+2:s===r&&(n=(c-i)/l+4),n=Math.round(60n),n<0&&(n+=360);const o=0===s?0:l/s,p=s;this.h=n,this.s=Math.round(100o),this.v=Math.round(100p)}emitChange(){this.value="#"+this.hex,this.colorChange.emit(this.value)}handleHexInput=t=>{const a=t.detail.value\|\|"";6!==a.length&&3!==a.length\|\|/^[0-9A-Fa-f]+$/.test(a)&&(this.hex=a.toUpperCase(),this.updateAllFromHex(this.hex),this.emitChange())};handleRgbChange(t,a){isNaN(a)\|\|(this[t]=Math.max(0,Math.min(255,a)),this.hex=((1<<24)+(this.r<<16)+(this.g<<8)+this.b).toString(16).slice(1).toUpperCase(),this.updateAllFromHex(this.hex),this.emitChange())}handleHsvChange(t,a){if(isNaN(a))return;"h"===t&&(this.h=Math.max(0,Math.min(360,a))),"s"===t&&(this.s=Math.max(0,Math.min(100,a))),"v"===t&&(this.v=Math.max(0,Math.min(100,a)));const e=this.h,c=this.v/100,i=c(this.s/100),r=i(1-Math.abs(e/60%2-1)),s=c-i;let l=0,n=0,o=0;e<60?(l=i,n=r,o=0):e<120?(l=r,n=i,o=0):e<180?(l=0,n=i,o=r):e<240?(l=0,n=r,o=i):e<300?(l=r,n=0,o=i):(l=i,n=0,o=r),this.r=Math.round(255(l+s)),this.g=Math.round(255(n+s)),this.b=Math.round(255(o+s)),this.hex=((1<<24)+(this.r<<16)+(this.g<<8)+this.b).toString(16).slice(1).toUpperCase(),this.emitChange()}render(){return c(i,{key:"8a799159e4f7d80bbe881ba3a93d1a6faed5a54e"},this.label&&c("div",{key:"d32e7f8bcf4ab190437317d2697a86486e84d264",class:"col-ctrl-label"},this.label),c("div",{key:"75cc18672f23ef572569ac2cc9d125373264c962",class:"col-ctrl-grid"},c("div",{key:"af936f413bb4b7aeff0dd9752deadc0ce1dfcb03",class:"col-ctrl-row"},c("span",{key:"71c0d3c44062a67c1402d2e2b92f81c3ce8878dc",class:"col-ctrl-key"},"H"),c("div",{key:"08c832583ca9f956c3fc761fa32b712d208d853d",class:"col-ctrl-input-wrapper"},c("ui-input",{key:"283a471f4bf8af83f37b7ac201a81d25e6803dba",class:"col-ctrl-input",type:"number",value:this.h,onInputChange:t=>this.handleHsvChange("h",parseInt(t.detail)),variant:"plain"}),c("span",{key:"ef039c70dbc01252f0129f95f7eca4f6302f9049",class:"col-ctrl-unit"},"°"))),c("div",{key:"68c91d46d38583bd8a8158452033088811453d1c",class:"col-ctrl-row"},c("span",{key:"3dfb8b3a1f1053080d6ca3c3b03027fa46cc33bd",class:"col-ctrl-key"},"S"),c("div",{key:"929558e93d27bc799a2401b0f01f358222c24c24",class:"col-ctrl-input-wrapper"},c("ui-input",{key:"a2fcdc19f32f5348848347319c134d94d8963ca5",class:"col-ctrl-input",type:"number",value:this.s,onInputChange:t=>this.handleHsvChange("s",parseInt(t.detail)),variant:"plain"}),c("span",{key:"de5d00b3264b1284fe23ca13f9611e5046c444d6",class:"col-ctrl-unit"},"%"))),c("div",{key:"4e744c31accbcdbe6505a160e693926e6001ac9c",class:"col-ctrl-row",style:{marginBottom:"12px"}},c("span",{key:"9feef4b4fe6459e34f6ac36a42c90d24413da27b",class:"col-ctrl-key"},"V"),c("div",{key:"9d1821a375ab9473de477c7ab38cea6cd0cf9c57",class:"col-ctrl-input-wrapper"},c("ui-input",{key:"259bb011612129fd3589fcb7febf15bdd0e7ce13",class:"col-ctrl-input",type:"number",value:this.v,onInputChange:t=>this.handleHsvChange("v",parseInt(t.detail)),variant:"plain"}),c("span",{key:"3646c32d18517429f758cfef21d34df5d9ec407e",class:"col-ctrl-unit"},"%"))),c("div",{key:"4f0dae6cce89af626b9d545dda0971ab2f041bca",class:"col-ctrl-row"},c("span",{key:"6995401c0f6cabba13eb35c596e039769dc33c0a",class:"col-ctrl-key"},"R"),c("div",{key:"cc802f297a286f745957b613b37f3ab5ea12fa4e",class:"col-ctrl-input-wrapper"},c("ui-input",{key:"633391de1afcd81d7ce6f68656569f858a673d62",class:"col-ctrl-input",type:"number",value:this.r,onInputChange:t=>this.handleRgbChange("r",parseInt(t.detail)),variant:"plain"}))),c("div",{key:"f4dce90ceb3f0849cb17101c07229b384739d5f1",class:"col-ctrl-row"},c("span",{key:"c3891f220f1fccf54fd84ded9674bad3100c530f",class:"col-ctrl-key"},"G"),c("div",{key:"187f474a516c7a1bd35cce0e03e9aeb3c8d3b6b8",class:"col-ctrl-input-wrapper"},c("ui-input",{key:"60be98aaf3e10a67b43bb2206e767d60e7bc1e04",class:"col-ctrl-input",type:"number",value:this.g,onInputChange:t=>this.handleRgbChange("g",parseInt(t.detail)),variant:"plain"}))),c("div",{key:"a844765b839bfa715a150932d1b3b80c44899d11",class:"col-ctrl-row",style:{marginBottom:"12px"}},c("span",{key:"548be88547a50add11eb34c6f837e6fca6d9fbfd",class:"col-ctrl-key"},"B"),c("div",{key:"eaab04459f36946161d9165d917cff488b27a841",class:"col-ctrl-input-wrapper"},c("ui-input",{key:"7a3b67f4b98a20e920c8c6537a48354a891d76e5",class:"col-ctrl-input",type:"number",value:this.b,onInputChange:t=>this.handleRgbChange("b",parseInt(t.detail)),variant:"plain"}))),c("div",{key:"97a6584e32baa09c44a1c3dc80e93c45ea8b1282",class:"col-ctrl-row hex-row"},c("span",{key:"aed2ff62dd29ada3896212ede2c24cbf679591ca",class:"col-ctrl-key"},"#"),c("div",{key:"b75b8984f2e9dfca0c01022c45a2b1a6e23ba925",class:"col-ctrl-input-wrapper hex-wrapper"},c("ui-input",{key:"1e051860e57dd8f10298ac939509173bebaca5e3",class:"col-ctrl-input hex-input",value:this.hex,onInputChange:t=>this.handleHexInput({detail:{value:t.detail}}),variant:"plain"})))))}static get watchers(){return{value:[{handleValueUpdate:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit;width:100%;max-width:2a0px}.col-ctrl-label{font-size:13px;font-weight:700;color:var(--color-primary, #6366f1);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.05em}.col-ctrl-grid{display:flex;flex-direction:column;gap:6px}.col-ctrl-row{display:flex;align-items:center;gap:8px}.col-ctrl-key{flex:0 0 20px;font-size:12px;font-weight:500;color:var(--text-secondary, #4b5563)}.col-ctrl-input-wrapper{flex:1;display:flex;align-items:center;border:1px solid var(--border-default, #e5e7eb);border-radius:4px;background:var(--bg-primary, #ffffff);padding:2px 6px;transition:all 0.2s}.col-ctrl-input-wrapper:focus-within{border-color:var(--color-primary, #6366f1);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 99, 102, 241), 0.1)}.col-ctrl-input{flex:1;border:none;background:transparent;outline:none;font-size:13px;padding:4px;width:100%;color:var(--text-primary, #111827);font-family:monospace;text-align:right}.col-ctrl-input::-webkit-outer-spin-button,.col-ctrl-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hex-row .col-ctrl-key{font-family:monospace;font-weight:700}.col-ctrl-unit{font-size:12px;color:var(--text-muted, #9ca3af);margin-left:4px;min-width:12px}.hex-input{text-align:left;letter-spacing:0.05em;font-weight:600}"}},[513,"ui-color-controller",{value:[1025],label:[1],r:[32],g:[32],b:[32],h:[32],s:[32],v:[32],hex:[32]},void 0,{value:[{handleValueUpdate:0}]}]),h=d,f=function(){"undefined"!=typeof customElements&&["ui-color-controller","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((t=>{switch(t){case"ui-color-controller":customElements.get(r(t))\|\|customElements.define(r(t),d);break;case"ui-badge":customElements.get(r(t))\|\|l();break;case"ui-button":customElements.get(r(t))\|\|s();break;case"ui-icon":customElements.get(r(t))\|\|n();break;case"ui-input":customElements.get(r(t))\|\|o();break;case"ui-loader":customElements.get(r(t))\|\|p()}}))};export{h as UiColorController,f as defineCustomElement}

package/dist/components/ui-color-picker.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as i,createEvent as s,h as e,Host as a,transformTag as r}from"@stencil/core/internal/client";import{d as h,a as n}from"./badge.js";import{d as o}from"./icon.js";import{d as l}from"./input.js";import{d as c}from"./range-slider.js";const p=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.colorChange=s(this,"colorChange",7)}value="#3bf673";label="";showHex=!0;showRgb=!0;showRgba=!0;showHsl=!0;showHsla=!0;showAlpha=!1;showSwatches=!0;swatches=[];format="hex";disabled=!1;inline=!1;size="md";name="";required=!1;showRecent=!0;showEyeDropper=!0;showColorName=!0;showGradient=!1;variant="default";get el(){return this}internals;isOpen=!1;hue=220;saturation=80;lightness=60;alpha=1;hexInput="#3bf673";isInvalid=!1;invalidField=null;recentColors=[];isGradientMode=!1;gradientStops=["#3bf673","#10b981"];activeStopIndex=0;colorChange;handleDocumentPointerDown=t=>{this.isOpen&&!this.inline&&(("function"==typeof t.composedPath?t.composedPath():[]).includes(this.el)\|\|this.el.contains(t.target)\|\|(this.isOpen=!1))};defaultSwatches=["#ef4444","#f97316","#f59e0b","#eab308","#84cc16","#22c55e","#10b981","#06b6d4","#3bf673","#8b5cf6","#ec4899","#f43f5e","#6b7280","#1f2937","#ffffff"];colorNames={"#ff0000":"Red","#00ff00":"Lime","#0000ff":"Blue","#ffffff":"White","#000000":"Black","#808080":"Gray","#ffff00":"Yellow","#00ffff":"Cyan","#ff00ff":"Magenta","#3bf673":"Royal Blue","#10b981":"Emerald","#ef4444":"Red Orange","#f59e0b":"Amber","#8b5cf6":"Violet","#6b7280":"Slate"};initializeInternals(){if(!this.internals&&"function"==typeof this.el?.attachInternals)try{this.internals=this.el.attachInternals()}catch(t){if(!(t instanceof DOMException)\|\|"NotSupportedError"!==t.name)throw t}}componentWillLoad(){this.initializeInternals(),this.syncValueToState(this.value),this.value=this.getFormattedValue(),this.updateFormValue(),this.loadHistory()}connectedCallback(){document.addEventListener("pointerdown",this.handleDocumentPointerDown,!0)}disconnectedCallback(){document.removeEventListener("pointerdown",this.handleDocumentPointerDown,!0)}loadHistory(){if(this.showRecent)try{const t=localStorage.getItem("ui-color-history");t&&(this.recentColors=JSON.parse(t))}catch(t){console.error("Failed to load color history",t)}}saveHistory(t){if(!this.showRecent)return;const i=[t,...this.recentColors.filter((i=>i!==t))].slice(0,10);this.recentColors=i,localStorage.setItem("ui-color-history",JSON.stringify(i))}updateFormValue(){this.internals&&this.internals?.setFormValue(this.value)}valueChanged(t){this.syncValueToState(t)}getSwatches(){if("string"==typeof this.swatches)try{return JSON.parse(this.swatches)}catch{return this.defaultSwatches}return this.swatches.length>0?this.swatches:this.defaultSwatches}clamp(t,i,s){return Math.min(s,Math.max(i,t))}roundAlpha(t){return Math.round(100this.clamp(t,0,1))/100}componentToHex(t){return Math.round(this.clamp(t,0,255)).toString(16).padStart(2,"0")}rgbToHsl(t,i,s){const e=this.clamp(t,0,255)/255,a=this.clamp(i,0,255)/255,r=this.clamp(s,0,255)/255,h=Math.max(e,a,r),n=Math.min(e,a,r),o=(h+n)/2;let l=0,c=0;if(h!==n){const t=h-n;switch(c=o>.5?t/(2-h-n):t/(h+n),h){case e:l=((a-r)/t+(a<r?6:0))/6;break;case a:l=((r-e)/t+2)/6;break;default:l=((e-a)/t+4)/6}}return{h:Math.round(360l),s:Math.round(100c),l:Math.round(100o)}}parseHex(t){const i=t.trim().match(/^#([0-9a-f]{3}\|[0-9a-f]{4}\|[0-9a-f]{6}\|[0-9a-f]{8})$/i);if(!i)return null;let s=i[1];3!==s.length&&4!==s.length\|\|(s=s.split("").map((t=>`${t}${t}`)).join(""));const e=8===s.length,a=parseInt(s.slice(0,2),16),r=parseInt(s.slice(2,4),16),h=parseInt(s.slice(4,6),16),n=e?parseInt(s.slice(6,8),16)/255:this.alpha,o=this.rgbToHsl(a,r,h);return{hex:`#${this.componentToHex(a)}${this.componentToHex(r)}${this.componentToHex(h)}`,alpha:this.roundAlpha(n),...o}}parseRgbColor(t){const i=t.trim().match(/^rgba?$([^)]+)$$/i);if(!i)return null;const s=i[1].split(",").map((t=>t.trim()));if(3!==s.length&&4!==s.length)return null;const e=s.slice(0,3).map((t=>Number(t)));if(e.some((t=>Number.isNaN(t))))return null;const[a,r,h]=e.map((t=>this.clamp(t,0,255))),n=void 0!==s[3]?this.roundAlpha(Number(s[3])):this.alpha;if(Number.isNaN(n))return null;const o=this.rgbToHsl(a,r,h);return{hex:`#${this.componentToHex(a)}${this.componentToHex(r)}${this.componentToHex(h)}`,alpha:n,...o}}parseHslColor(t){const i=t.trim().match(/^hsla?$([^)]+)$$/i);if(!i)return null;const s=i[1].split(",").map((t=>t.trim()));if(3!==s.length&&4!==s.length)return null;const e=Number(s[0]),a=Number(s[1].replace("%","")),r=Number(s[2].replace("%","")),h=void 0!==s[3]?this.roundAlpha(Number(s[3])):this.alpha;if([e,a,r,h].some((t=>Number.isNaN(t))))return null;const n=(e%360+360)%360,o=this.clamp(a,0,100),l=this.clamp(r,0,100);return{hex:this.hslToHex(n,o,l),alpha:h,h:Math.round(n),s:Math.round(o),l:Math.round(l)}}parseColorValue(t){return!t\|\|t.startsWith("linear-gradient")?null:this.parseHex(t)\|\|this.parseRgbColor(t)\|\|this.parseHslColor(t)}syncParsedColor(t){this.hue=t.h,this.saturation=t.s,this.lightness=t.l,this.alpha=this.roundAlpha(t.alpha),this.hexInput=this.getHexInputValue(t.hex,t.alpha),this.isInvalid=!1,this.invalidField=null}syncValueToState(t){const i=this.parseColorValue(t);i&&this.syncParsedColor(i)}hslToHex(t,i,s){const e=t/360,a=i/100,r=s/100;let h,n,o;if(0===a)h=n=o=r;else{const t=(t,i,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<1/6?t+6(i-t)s:s<.5?i:s<2/3?t+(i-t)(2/3-s)6:t),i=r<.5?r(1+a):r+a-ra,s=2r-i;h=t(s,i,e+1/3),n=t(s,i,e),o=t(s,i,e-1/3)}const l=t=>Math.round(255t).toString(16).padStart(2,"0");return`#${l(h)}${l(n)}${l(o)}`}getRgbValues(){const t=this.hslToHex(this.hue,this.saturation,this.lightness).replace("#","");return{r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16)}}getHexValue(t=this.hslToHex(this.hue,this.saturation,this.lightness),i=this.alpha){return i<1?`${t}${this.componentToHex(255i)}`:t}getHexInputValue(t=this.hslToHex(this.hue,this.saturation,this.lightness),i=this.alpha){return this.getHexValue(t,i).replace(/^#/,"")}getRgbString(t=!1){const{r:i,g:s,b:e}=this.getRgbValues();return t?`rgba(${i}, ${s}, ${e}, ${this.roundAlpha(this.alpha)})`:`rgb(${i}, ${s}, ${e})`}getHslString(t=!1){return t?`hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, ${this.roundAlpha(this.alpha)})`:`hsl(${this.hue}, ${this.saturation}%, ${this.lightness}%)`}getFormattedValue(){switch(this.format){case"rgb":return this.getRgbString(!1);case"rgba":return this.getRgbString(!0);case"hsl":return this.getHslString(!1);case"hsla":return this.getHslString(!0);default:return this.getHexValue()}}updateColorFromInput(t,i){"hex"===i&&(this.hexInput=t.replace(/^#/,""));const s="hex"===i?"#"+t.replace(/^#/,""):t,e=this.parseColorValue(s);if(!e)return this.isInvalid=!0,void(this.invalidField=i);this.syncParsedColor(e);const a=this.getFormattedValue();this.value=a,this.updateFormValue(),this.colorChange.emit(a)}emitChange(){const t=this.hslToHex(this.hue,this.saturation,this.lightness);if(this.isGradientMode){this.gradientStops[this.activeStopIndex]=t,this.gradientStops=[...this.gradientStops];const i=`linear-gradient(90deg, ${this.gradientStops[0]}, ${this.gradientStops[1]})`;this.value=i,this.colorChange.emit(i)}else this.value=this.getFormattedValue(),this.hexInput=this.getHexInputValue(t,this.alpha),this.isInvalid=!1,this.invalidField=null,this.updateFormValue(),this.colorChange.emit(this.value),this.saveHistory(t)}toggleGradientMode=()=>{this.isGradientMode=!this.isGradientMode,this.emitChange()};async handleEyeDropper(){if(!("EyeDropper"in window))return void alert("EyeDropper API is not supported in this browser.");const t=new EyeDropper;try{const i=await t.open();this.handleSwatch(i.sRGBHex)}catch(t){}}getColorName(t){const i=t.toLowerCase();return this.colorNames[i]\|\|"Custom"}handleHexInput=t=>{this.updateColorFromInput(t.detail,"hex")};handleSwatch=t=>{const i=this.parseHex(t);i&&(this.syncParsedColor(i),this.value=this.getFormattedValue(),this.updateFormValue(),this.colorChange.emit(this.value),this.saveHistory(i.hex))};parseChannelValue(t){if(""===t\|\|null==t)return null;const i=Number(t);return Number.isFinite(i)?i:null}setChannelValidation(t){this.isInvalid=!!t,this.invalidField=t}applyRgbColor(t,i,s,e=this.alpha){const a=Math.round(this.clamp(t,0,255)),r=Math.round(this.clamp(i,0,255)),h=Math.round(this.clamp(s,0,255)),n=this.roundAlpha(e),o=this.rgbToHsl(a,r,h);this.syncParsedColor({hex:`#${this.componentToHex(a)}${this.componentToHex(r)}${this.componentToHex(h)}`,alpha:n,...o}),this.value=this.getFormattedValue(),this.updateFormValue(),this.colorChange.emit(this.value)}applyHslColor(t,i,s,e=this.alpha){const a=Math.round(this.clamp(t,0,360)),r=Math.round(this.clamp(i,0,100)),h=Math.round(this.clamp(s,0,100)),n=this.roundAlpha(e);this.syncParsedColor({hex:this.hslToHex(a,r,h),alpha:n,h:a,s:r,l:h}),this.value=this.getFormattedValue(),this.updateFormValue(),this.colorChange.emit(this.value)}handleRgbChannelChange=(t,i)=>{const s=this.parseChannelValue(i.detail);if(null===s\|\|s<0\|\|s>255)return void this.setChannelValidation("rgb-"+t);const e=this.getRgbValues();e[t]=Math.round(s),this.setChannelValidation(null),this.applyRgbColor(e.r,e.g,e.b)};handleRgbaChannelChange=(t,i)=>{const s=this.parseChannelValue(i.detail),e="rgba-"+t;if(null===s)return void this.setChannelValidation(e);const a=this.getRgbValues();let r=this.alpha;if("a"===t){if(s<0\|\|s>1)return void this.setChannelValidation(e);r=s}else{if(s<0\|\|s>255)return void this.setChannelValidation(e);a[t]=Math.round(s)}this.setChannelValidation(null),this.applyRgbColor(a.r,a.g,a.b,r)};handleHslChannelChange=(t,i)=>{const s=this.parseChannelValue(i.detail);if(null===s\|\|s<0\|\|s>{h:360,s:100,l:100}[t])return void this.setChannelValidation("hsl-"+t);const e={h:this.hue,s:this.saturation,l:this.lightness,[t]:Math.round(s)};this.setChannelValidation(null),this.applyHslColor(e.h,e.s,e.l)};handleHslaChannelChange=(t,i)=>{const s=this.parseChannelValue(i.detail),e="hsla-"+t;if(null===s)return void this.setChannelValidation(e);const a={h:this.hue,s:this.saturation,l:this.lightness};let r=this.alpha;if("a"===t){if(s<0\|\|s>1)return void this.setChannelValidation(e);r=s}else{if(s<0\|\|s>{h:360,s:100,l:100}[t])return void this.setChannelValidation(e);a[t]=Math.round(s)}this.setChannelValidation(null),this.applyHslColor(a.h,a.s,a.l,r)};isHueVariant(){return"hue"===this.variant}isInputVariant(){return"input"===this.variant}showGradientSurface(){return!this.isHueVariant()&&!this.isInputVariant()}showSliderSection(){return!this.isInputVariant()}showInputSection(){return this.showHex\|\|this.showRgb\|\|this.showRgba\|\|this.showHsl\|\|this.showHsla\|\|this.isInputVariant()}getPanelClasses(){return{"cp-panel":!0,"cp-panel-hue":this.isHueVariant(),"cp-panel-input":this.isInputVariant(),"cp-panel-multi-format":this.showInputSection()}}renderFormatInput(t,i,s,a){return e("div",{class:"cp-input-wrap cp-full cp-inline-row"},e("span",{class:"cp-sm-label"},t),e("ui-input",{class:{"cp-text-input":!0,"cp-input-error":this.isInvalid&&this.invalidField===a},type:"text",value:i,onInputChange:s,size:"sm"}))}renderChannelInput(t,i,s,a,r,h,n){return e("div",{class:"cp-channel-field"},e("span",{class:"cp-channel-label"},i),e("ui-input",{class:{"cp-text-input":!0,"cp-channel-input":!0,"cp-input-error":this.isInvalid&&this.invalidField===t},type:"number",min:a,max:r,step:h,value:s,onInputChange:n,size:"sm"}))}renderChannelGroup(t,i,s){return e("div",{class:"cp-input-wrap cp-full cp-channel-group cp-inline-row"},e("span",{class:"cp-sm-label"},t),e("div",{class:{"cp-channel-grid":!0,"cp-channel-grid-3":3===i,"cp-channel-grid-4":4===i}},s))}render(){const t=this.hslToHex(this.hue,this.saturation,this.lightness),i=this.getSwatches(),s=e("div",{key:"1e6a1eb368643f6e67d9804cce7bcfed32b1bd1d",class:this.getPanelClasses()},this.showGradientSurface()&&e("div",{key:"2970c7db9dde45a2f88ed3ede420df322c6556dc",class:"cp-gradient",role:"slider","aria-label":"Saturation and Lightness","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":this.saturation,"aria-valuetext":`Saturation ${this.saturation}%, Lightness ${this.lightness}%`,tabindex:"0",onKeyDown:t=>{const i=t.shiftKey?10:1;"ArrowLeft"===t.key&&(this.saturation=Math.max(0,this.saturation-i),this.emitChange()),"ArrowRight"===t.key&&(this.saturation=Math.min(100,this.saturation+i),this.emitChange()),"ArrowUp"===t.key&&(this.lightness=Math.min(100,this.lightness+i),this.emitChange()),"ArrowDown"===t.key&&(this.lightness=Math.max(0,this.lightness-i),this.emitChange())},style:{background:`linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, hsl(${this.hue}, 100%, 50%))`},onMouseDown:t=>{const i=t.currentTarget.getBoundingClientRect(),s=t=>{const s=Math.max(0,Math.min(1,(t.clientX-i.left)/i.width)),e=Math.max(0,Math.min(1,(t.clientY-i.top)/i.height));this.saturation=Math.round(100s),this.lightness=Math.round((1-e)(100-50s)),this.emitChange()},e=()=>{window.removeEventListener("mousemove",s),window.removeEventListener("mouseup",e)};window.addEventListener("mousemove",s),window.addEventListener("mouseup",e),s(t)}},e("div",{key:"4136b69d81619ce158f2988be19e3e866dfa4ae8",class:"cp-gradient-thumb",style:{left:this.saturation+"%",top:100-this.lightness+"%",background:t}})),this.showSliderSection()&&e("div",{key:"27572206380ad082b4c49a9652b171169d4d92c0",class:"cp-row"},e("div",{key:"c69c64ac7d1173add32d3c0541ac73fe70383d7e",class:"cp-preview",style:{background:t}}),e("div",{key:"54663ac5d49a43922b4a46587383b4ea3db54520",class:"cp-sliders"},e("ui-range-slider",{key:"058c8a3b800afafc80cb13c06cfb48462e8e8206",class:"cp-hue-slider",min:0,max:360,value:this.hue,onSliderChange:t=>{this.hue=Number(t.detail),this.emitChange()},"aria-label":"Hue",showTooltip:!1,showValue:!1,hideRange:!0,trackColor:"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"}),this.showAlpha&&e("ui-range-slider",{key:"ef3b5d6112c7040bb1910d8171c8dc84901b628b",class:"cp-alpha-slider",min:0,max:100,value:Math.round(100*this.alpha),onSliderChange:t=>{this.alpha=Number(t.detail)/100,this.emitChange()},"aria-label":"Alpha",showTooltip:!1,showValue:!1,hideRange:!0,trackColor:`linear-gradient(to right, transparent, ${this.hslToHex(this.hue,this.saturation,this.lightness)}), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='5' height='5' fill='%23ccc'/%3E%3Crect x='5' y='5' width='5' height='5' fill='%23ccc'/%3E%3C/svg%3E")`})),this.showEyeDropper&&"EyeDropper"in window&&e("ui-button",{key:"a3597f83c7b6e4293bd0975d07b8994e66580f87",variant:"ghost",onClick:()=>this.handleEyeDropper(),ariaLabel:"Sample color from screen",icon:"pipette",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:"Sample color from screen"})),this.showInputSection()&&e("div",{key:"d3473eb493f2fda3167c506e8ff2470beb17bab9",class:"cp-inputs-grid"},this.showHex&&this.renderFormatInput("HEX",this.hexInput\|\|this.getHexInputValue(),this.handleHexInput,"hex"),this.showRgb&&this.renderChannelGroup("RGB",3,[this.renderChannelInput("rgb-r","R",this.getRgbValues().r,0,255,1,(t=>this.handleRgbChannelChange("r",t))),this.renderChannelInput("rgb-g","G",this.getRgbValues().g,0,255,1,(t=>this.handleRgbChannelChange("g",t))),this.renderChannelInput("rgb-b","B",this.getRgbValues().b,0,255,1,(t=>this.handleRgbChannelChange("b",t)))]),this.showRgba&&this.renderChannelGroup("RGBA",4,[this.renderChannelInput("rgba-r","R",this.getRgbValues().r,0,255,1,(t=>this.handleRgbaChannelChange("r",t))),this.renderChannelInput("rgba-g","G",this.getRgbValues().g,0,255,1,(t=>this.handleRgbaChannelChange("g",t))),this.renderChannelInput("rgba-b","B",this.getRgbValues().b,0,255,1,(t=>this.handleRgbaChannelChange("b",t))),this.renderChannelInput("rgba-a","A",this.alpha,0,1,.01,(t=>this.handleRgbaChannelChange("a",t)))]),this.showHsl&&this.renderChannelGroup("HSL",3,[this.renderChannelInput("hsl-h","H",this.hue,0,360,1,(t=>this.handleHslChannelChange("h",t))),this.renderChannelInput("hsl-s","S",this.saturation,0,100,1,(t=>this.handleHslChannelChange("s",t))),this.renderChannelInput("hsl-l","L",this.lightness,0,100,1,(t=>this.handleHslChannelChange("l",t)))]),this.showHsla&&this.renderChannelGroup("HSLA",4,[this.renderChannelInput("hsla-h","H",this.hue,0,360,1,(t=>this.handleHslaChannelChange("h",t))),this.renderChannelInput("hsla-s","S",this.saturation,0,100,1,(t=>this.handleHslaChannelChange("s",t))),this.renderChannelInput("hsla-l","L",this.lightness,0,100,1,(t=>this.handleHslaChannelChange("l",t))),this.renderChannelInput("hsla-a","A",this.alpha,0,1,.01,(t=>this.handleHslaChannelChange("a",t)))]),this.showColorName&&e("div",{key:"e73f932f199ad98b6d0155e4f39fc6f731821e75",class:"cp-input-wrap cp-full"},e("span",{key:"c47ac8a26ae1f1db9cc2a6fa0888ed2568043b30",class:"cp-sm-label"},"NAME"),e("div",{key:"393f4e95fa277dc016f4c31291683973f4f0a48a",class:"cp-name-display"},this.getColorName(t))),this.showGradient&&e("div",{key:"9029146f00a030168b63ea55a9a1f9ec67ce7cfa",class:"cp-gradient-toggle-wrap cp-full"},e("ui-button",{key:"a6561f32b69e43b5651134b73a6ab195b721c2c9",variant:"outline",class:{"cp-gradient-toggle":!0,"cp-active":this.isGradientMode},onClick:this.toggleGradientMode,fullWidth:!0,label:this.isGradientMode?"Disable Gradient":"Enable Gradient",size:"sm"}),this.isGradientMode&&e("div",{key:"aabaa25bd9f75a7bec76e611b9d852b8918fd718",class:"cp-stop-selectors"},this.gradientStops.map(((t,i)=>e("button",{type:"button",class:{"cp-swatch":!0,"cp-swatch-active":this.activeStopIndex===i},style:{"background-color":t,"--swatch-color":t,"border-radius":"50%"},onClick:()=>this.activeStopIndex=i,"aria-label":"Gradient stop "+(i+1)})))))),!this.isInputVariant()&&(this.showSwatches\|\|this.showRecent&&this.recentColors.length>0)&&e("div",{key:"b928b33063877a58493f56aa01a37efac5fade30",class:"cp-swatches-section"},e("div",{key:"02b8efedfdad4aa7bbe93b63bd3075395bef8f37",class:"cp-swatches"},i.map((i=>e("ui-button",{type:"button",style:{"background-color":i,"--swatch-color":i},class:{"cp-swatch":!0,"cp-swatch-active":i.toLowerCase()===t.toLowerCase()},onClick:()=>this.handleSwatch(i),title:this.getColorName(i),"aria-label":"Color "+this.getColorName(i)})))),this.showRecent&&this.recentColors.length>0&&e("div",{key:"68a6692afc4ae42ac02c8835fb65f40d64572ffd",class:"cp-history",style:{marginTop:"16px"}},e("div",{key:"c14af759e7380d18fa8b046bd91d97e0d4bb7b43",class:"cp-sm-label",style:{marginBottom:"8px"}},"RECENT"),e("div",{key:"a405d48643d7b452cb90dcfd5d2756a91a37585c",class:"cp-swatches"},this.recentColors.map((i=>e("ui-button",{type:"button",style:{"background-color":i,"--swatch-color":i,"border-radius":"50%"},class:{"cp-swatch":!0,"cp-history-swatch":!0,"cp-swatch-active":i.toLowerCase()===t.toLowerCase()},onClick:()=>this.handleSwatch(i),title:this.getColorName(i),"aria-label":"Recent color "+this.getColorName(i)})))))));return e(a,{key:"437644b794e0abc1a9a37f77641ef9edf0bc47d7",class:`cp-size-${this.size} cp-variant-${this.variant}`},this.label&&e("label",{key:"ba2bb236655f6eab50c62cd18d3b07bbc0cf37b1",class:"cp-label"},this.label),this.inline?s:e("div",{class:"cp-trigger-wrapper"},e("ui-button",{variant:"outline",disabled:this.disabled,onClick:()=>!this.disabled&&(this.isOpen=!this.isOpen),fullWidth:!0},e("span",{class:"cp-trigger-swatch",style:{background:this.value}}),e("span",{class:"cp-trigger-value",style:{marginLeft:"8px",flex:"1",textAlign:"left"}},this.isGradientMode?this.value:this.getFormattedValue()),e("ui-icon",{name:this.isOpen?"chevron-up":"chevron-down",size:"18",library:"lucide"})),this.isOpen&&e("div",{class:"cp-dropdown"},s)))}static get formAssociated(){return!0}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit}.cp-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary, #374151);margin-bottom:6px}.cp-trigger-wrapper{position:relative;display:inline-block}.cp-trigger{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1.5px solid var(--border-strong, #d1d5db);border-radius:10px;background:var(--bg-primary, #ffffff);cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary, #374151);transition:border-color 0.2s, box-shadow 0.2s;min-width:140px}.cp-trigger:hover:not(.cp-disabled){border-color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.12)}.cp-trigger:hover:not(.cp-disabled).cp-disabled{opacity:0.5;cursor:not-allowed}.cp-trigger-swatch{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0, 0, 0, 0.1);flex-shrink:0}.cp-trigger-value{flex:1;font-family:monospace}.cp-trigger-arrow{font-size:10px;color:var(--text-muted, #9ca3af)}.cp-dropdown{position:absolute;top:calc(100% + 6px);left:0;z-index:1000;background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e5e7eb);border-radius:14px;box-shadow:0 20px 40px rgba(0, 0, 0, 0.15);overflow:hidden;animation:cp-drop-in 0.15s ease}@keyframes cp-drop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.cp-panel{width:460px;padding:14px}.cp-panel-hue{width:280px}.cp-panel-input{width:480px}.cp-panel-input .cp-inputs-grid{grid-template-columns:1fr;gap:16px}.cp-panel-input .cp-input-wrap.cp-full{grid-column:span 1}.cp-gradient{width:100%;height:140px;border-radius:8px;position:relative;cursor:crosshair;margin-bottom:12px;user-select:none}.cp-gradient-thumb{position:absolute;width:14px;height:14px;border-radius:50%;border:2.5px solid var(--border-subtle, #fff);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);transform:translate(-50%, -50%);pointer-events:none}.cp-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.cp-preview{width:32px;height:32px;border-radius:8px;border:2px solid rgba(0, 0, 0, 0.1);flex-shrink:0}.cp-sliders{flex:1;display:flex;flex-direction:column;gap:12px}.cp-hue-slider,.cp-alpha-slider{width:100%;--slider-track-height:12px;--slider-thumb-size:20px}.cp-hue-slider::part(track),.cp-alpha-slider::part(track){height:12px;border-radius:6px;box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.2)}.cp-hue-slider::part(thumb),.cp-alpha-slider::part(thumb){width:20px;height:20px;border:3px solid #fff;box-shadow:0 4px 10px rgba(0, 0, 0, 0.3);background:transparent}.cp-inputs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.cp-panel-multi-format .cp-inputs-grid{grid-template-columns:1fr}.cp-panel-multi-format .cp-input-wrap.cp-full{grid-column:span 1}.cp-input-wrap{display:flex;flex-direction:column;gap:8px}.cp-input-wrap.cp-full{grid-column:span 2}.cp-sm-label{font-size:11px;font-weight:800;color:var(--text-muted, #94a3b8);text-transform:uppercase;letter-spacing:0.05em}.cp-input-wrap.cp-inline-row{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:16px;background:rgba(var(--ui-input-bg-rgb, 248, 250, 252), 0.5);padding:12px 16px;border-radius:12px;border:1px solid var(--border-subtle, #f1f5f9);transition:all 0.2s ease}.cp-input-wrap.cp-inline-row:hover{background:#fff;border-color:var(--border-strong, #e2e8f0);box-shadow:0 4px 12px rgba(0, 0, 0, 0.03)}.cp-channel-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(64px, 1fr));gap:10px;width:100%}.cp-channel-field{display:flex;flex-direction:column;gap:6px;align-items:center}.cp-channel-field .cp-channel-label{font-size:10px;font-weight:700;color:var(--text-muted, #94a3b8);margin-bottom:2px}.cp-channel-field ui-input{width:100%;--ui-input-text-align:center}.cp-text-input{--ui-input-text-align:left}:host(.cp-variant-hue) .cp-panel{padding-block:12px}:host(.cp-variant-hue) .cp-row{margin-bottom:12px}:host(.cp-variant-input) .cp-panel{padding:12px}:host(.cp-variant-input) .cp-name-display,:host(.cp-variant-input) .cp-text-input{min-height:36px}.cp-name-display{width:100%;border:1.5px solid var(--border-subtle, #f3f4f6);background:var(--bg-primary, #f9fafb);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--text-secondary, #4b5563);box-sizing:border-box}.cp-swatches{display:flex;flex-wrap:wrap;gap:6px}.cp-swatch{width:22px;height:22px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:transform 0.1s, border-color 0.15s, box-shadow 0.15s;padding:0;margin:0;outline:none;box-sizing:border-box;flex-shrink:0}.cp-swatch:hover{transform:scale(1.15)}.cp-swatch.cp-swatch-active{border-color:var(--bg-primary, #ffffff);box-shadow:0 0 0 1px var(--bg-primary, #ffffff), 0 0 0 3px var(--swatch-color, var(--color-primary, #10b981))}"}},[577,"ui-color-picker",{value:[1025],label:[1],showHex:[4,"show-hex"],showRgb:[4,"show-rgb"],showRgba:[4,"show-rgba"],showHsl:[4,"show-hsl"],showHsla:[4,"show-hsla"],showAlpha:[4,"show-alpha"],showSwatches:[4,"show-swatches"],swatches:[1],format:[1],disabled:[4],inline:[4],size:[1],name:[1],required:[4],showRecent:[4,"show-recent"],showEyeDropper:[4,"show-eye-dropper"],showColorName:[4,"show-color-name"],showGradient:[4,"show-gradient"],variant:[1],isOpen:[32],hue:[32],saturation:[32],lightness:[32],alpha:[32],hexInput:[32],isInvalid:[32],invalidField:[32],recentColors:[32],isGradientMode:[32],gradientStops:[32],activeStopIndex:[32]},void 0,{value:[{valueChanged:0}]}]),d=p,u=function(){"undefined"!=typeof customElements&&["ui-color-picker","ui-badge","ui-button","ui-icon","ui-input","ui-range-slider"].forEach((t=>{switch(t){case"ui-color-picker":customElements.get(r(t))\|\|customElements.define(r(t),p);break;case"ui-badge":customElements.get(r(t))\|\|n();break;case"ui-button":customElements.get(r(t))\|\|h();break;case"ui-icon":customElements.get(r(t))\|\|o();break;case"ui-input":customElements.get(r(t))\|\|l();break;case"ui-range-slider":customElements.get(r(t))\|\|c()}}))};export{d as UiColorPicker,u as defineCustomElement}
1	+ import{proxyCustomElement as t,HTMLElement as i,createEvent as s,h as e,Host as a,transformTag as r}from"@stencil/core/internal/client";import{d as h,a as n}from"./badge.js";import{d as o}from"./icon.js";import{d as l}from"./input.js";import{d as c}from"./loader.js";import{d as p}from"./range-slider.js";const d=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.colorChange=s(this,"colorChange",7)}value="#3bf673";label="";showHex=!0;showRgb=!0;showRgba=!0;showHsl=!0;showHsla=!0;showAlpha=!1;showSwatches=!0;swatches=[];format="hex";disabled=!1;inline=!1;size="md";name="";required=!1;showRecent=!0;showEyeDropper=!0;showColorName=!0;showGradient=!1;variant="default";get el(){return this}internals;isOpen=!1;hue=220;saturation=80;lightness=60;alpha=1;hexInput="#3bf673";isInvalid=!1;invalidField=null;recentColors=[];isGradientMode=!1;gradientStops=["#3bf673","#10b981"];activeStopIndex=0;colorChange;handleDocumentPointerDown=t=>{this.isOpen&&!this.inline&&(("function"==typeof t.composedPath?t.composedPath():[]).includes(this.el)\|\|this.el.contains(t.target)\|\|(this.isOpen=!1))};defaultSwatches=["#ef4444","#f97316","#f59e0b","#eab308","#84cc16","#22c55e","#10b981","#06b6d4","#3bf673","#8b5cf6","#ec4899","#f43f5e","#6b7280","#1f2937","#ffffff"];colorNames={"#ff0000":"Red","#00ff00":"Lime","#0000ff":"Blue","#ffffff":"White","#000000":"Black","#808080":"Gray","#ffff00":"Yellow","#00ffff":"Cyan","#ff00ff":"Magenta","#3bf673":"Royal Blue","#10b981":"Emerald","#ef4444":"Red Orange","#f59e0b":"Amber","#8b5cf6":"Violet","#6b7280":"Slate"};initializeInternals(){if(!this.internals&&"function"==typeof this.el?.attachInternals)try{this.internals=this.el.attachInternals()}catch(t){if(!(t instanceof DOMException)\|\|"NotSupportedError"!==t.name)throw t}}componentWillLoad(){this.initializeInternals(),this.syncValueToState(this.value),this.value=this.getFormattedValue(),this.updateFormValue(),this.loadHistory()}connectedCallback(){document.addEventListener("pointerdown",this.handleDocumentPointerDown,!0)}disconnectedCallback(){document.removeEventListener("pointerdown",this.handleDocumentPointerDown,!0)}loadHistory(){if(this.showRecent)try{const t=localStorage.getItem("ui-color-history");t&&(this.recentColors=JSON.parse(t))}catch(t){console.error("Failed to load color history",t)}}saveHistory(t){if(!this.showRecent)return;const i=[t,...this.recentColors.filter((i=>i!==t))].slice(0,10);this.recentColors=i,localStorage.setItem("ui-color-history",JSON.stringify(i))}updateFormValue(){this.internals&&this.internals?.setFormValue(this.value)}valueChanged(t){this.syncValueToState(t)}getSwatches(){if("string"==typeof this.swatches)try{return JSON.parse(this.swatches)}catch{return this.defaultSwatches}return this.swatches.length>0?this.swatches:this.defaultSwatches}clamp(t,i,s){return Math.min(s,Math.max(i,t))}roundAlpha(t){return Math.round(100this.clamp(t,0,1))/100}componentToHex(t){return Math.round(this.clamp(t,0,255)).toString(16).padStart(2,"0")}rgbToHsl(t,i,s){const e=this.clamp(t,0,255)/255,a=this.clamp(i,0,255)/255,r=this.clamp(s,0,255)/255,h=Math.max(e,a,r),n=Math.min(e,a,r),o=(h+n)/2;let l=0,c=0;if(h!==n){const t=h-n;switch(c=o>.5?t/(2-h-n):t/(h+n),h){case e:l=((a-r)/t+(a<r?6:0))/6;break;case a:l=((r-e)/t+2)/6;break;default:l=((e-a)/t+4)/6}}return{h:Math.round(360l),s:Math.round(100c),l:Math.round(100o)}}parseHex(t){const i=t.trim().match(/^#([0-9a-f]{3}\|[0-9a-f]{4}\|[0-9a-f]{6}\|[0-9a-f]{8})$/i);if(!i)return null;let s=i[1];3!==s.length&&4!==s.length\|\|(s=s.split("").map((t=>`${t}${t}`)).join(""));const e=8===s.length,a=parseInt(s.slice(0,2),16),r=parseInt(s.slice(2,4),16),h=parseInt(s.slice(4,6),16),n=e?parseInt(s.slice(6,8),16)/255:this.alpha,o=this.rgbToHsl(a,r,h);return{hex:`#${this.componentToHex(a)}${this.componentToHex(r)}${this.componentToHex(h)}`,alpha:this.roundAlpha(n),...o}}parseRgbColor(t){const i=t.trim().match(/^rgba?$([^)]+)$$/i);if(!i)return null;const s=i[1].split(",").map((t=>t.trim()));if(3!==s.length&&4!==s.length)return null;const e=s.slice(0,3).map((t=>Number(t)));if(e.some((t=>Number.isNaN(t))))return null;const[a,r,h]=e.map((t=>this.clamp(t,0,255))),n=void 0!==s[3]?this.roundAlpha(Number(s[3])):this.alpha;if(Number.isNaN(n))return null;const o=this.rgbToHsl(a,r,h);return{hex:`#${this.componentToHex(a)}${this.componentToHex(r)}${this.componentToHex(h)}`,alpha:n,...o}}parseHslColor(t){const i=t.trim().match(/^hsla?$([^)]+)$$/i);if(!i)return null;const s=i[1].split(",").map((t=>t.trim()));if(3!==s.length&&4!==s.length)return null;const e=Number(s[0]),a=Number(s[1].replace("%","")),r=Number(s[2].replace("%","")),h=void 0!==s[3]?this.roundAlpha(Number(s[3])):this.alpha;if([e,a,r,h].some((t=>Number.isNaN(t))))return null;const n=(e%360+360)%360,o=this.clamp(a,0,100),l=this.clamp(r,0,100);return{hex:this.hslToHex(n,o,l),alpha:h,h:Math.round(n),s:Math.round(o),l:Math.round(l)}}parseColorValue(t){return!t\|\|t.startsWith("linear-gradient")?null:this.parseHex(t)\|\|this.parseRgbColor(t)\|\|this.parseHslColor(t)}syncParsedColor(t){this.hue=t.h,this.saturation=t.s,this.lightness=t.l,this.alpha=this.roundAlpha(t.alpha),this.hexInput=this.getHexInputValue(t.hex,t.alpha),this.isInvalid=!1,this.invalidField=null}syncValueToState(t){const i=this.parseColorValue(t);i&&this.syncParsedColor(i)}hslToHex(t,i,s){const e=t/360,a=i/100,r=s/100;let h,n,o;if(0===a)h=n=o=r;else{const t=(t,i,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<1/6?t+6(i-t)s:s<.5?i:s<2/3?t+(i-t)(2/3-s)6:t),i=r<.5?r(1+a):r+a-ra,s=2r-i;h=t(s,i,e+1/3),n=t(s,i,e),o=t(s,i,e-1/3)}const l=t=>Math.round(255t).toString(16).padStart(2,"0");return`#${l(h)}${l(n)}${l(o)}`}getRgbValues(){const t=this.hslToHex(this.hue,this.saturation,this.lightness).replace("#","");return{r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16)}}getHexValue(t=this.hslToHex(this.hue,this.saturation,this.lightness),i=this.alpha){return i<1?`${t}${this.componentToHex(255i)}`:t}getHexInputValue(t=this.hslToHex(this.hue,this.saturation,this.lightness),i=this.alpha){return this.getHexValue(t,i).replace(/^#/,"")}getRgbString(t=!1){const{r:i,g:s,b:e}=this.getRgbValues();return t?`rgba(${i}, ${s}, ${e}, ${this.roundAlpha(this.alpha)})`:`rgb(${i}, ${s}, ${e})`}getHslString(t=!1){return t?`hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, ${this.roundAlpha(this.alpha)})`:`hsl(${this.hue}, ${this.saturation}%, ${this.lightness}%)`}getFormattedValue(){switch(this.format){case"rgb":return this.getRgbString(!1);case"rgba":return this.getRgbString(!0);case"hsl":return this.getHslString(!1);case"hsla":return this.getHslString(!0);default:return this.getHexValue()}}updateColorFromInput(t,i){"hex"===i&&(this.hexInput=t.replace(/^#/,""));const s="hex"===i?"#"+t.replace(/^#/,""):t,e=this.parseColorValue(s);if(!e)return this.isInvalid=!0,void(this.invalidField=i);this.syncParsedColor(e);const a=this.getFormattedValue();this.value=a,this.updateFormValue(),this.colorChange.emit(a)}emitChange(){const t=this.hslToHex(this.hue,this.saturation,this.lightness);if(this.isGradientMode){this.gradientStops[this.activeStopIndex]=t,this.gradientStops=[...this.gradientStops];const i=`linear-gradient(90deg, ${this.gradientStops[0]}, ${this.gradientStops[1]})`;this.value=i,this.colorChange.emit(i)}else this.value=this.getFormattedValue(),this.hexInput=this.getHexInputValue(t,this.alpha),this.isInvalid=!1,this.invalidField=null,this.updateFormValue(),this.colorChange.emit(this.value),this.saveHistory(t)}toggleGradientMode=()=>{this.isGradientMode=!this.isGradientMode,this.emitChange()};async handleEyeDropper(){if(!("EyeDropper"in window))return void alert("EyeDropper API is not supported in this browser.");const t=new EyeDropper;try{const i=await t.open();this.handleSwatch(i.sRGBHex)}catch(t){}}getColorName(t){const i=t.toLowerCase();return this.colorNames[i]\|\|"Custom"}handleHexInput=t=>{this.updateColorFromInput(t.detail,"hex")};handleSwatch=t=>{const i=this.parseHex(t);i&&(this.syncParsedColor(i),this.value=this.getFormattedValue(),this.updateFormValue(),this.colorChange.emit(this.value),this.saveHistory(i.hex))};parseChannelValue(t){if(""===t\|\|null==t)return null;const i=Number(t);return Number.isFinite(i)?i:null}setChannelValidation(t){this.isInvalid=!!t,this.invalidField=t}applyRgbColor(t,i,s,e=this.alpha){const a=Math.round(this.clamp(t,0,255)),r=Math.round(this.clamp(i,0,255)),h=Math.round(this.clamp(s,0,255)),n=this.roundAlpha(e),o=this.rgbToHsl(a,r,h);this.syncParsedColor({hex:`#${this.componentToHex(a)}${this.componentToHex(r)}${this.componentToHex(h)}`,alpha:n,...o}),this.value=this.getFormattedValue(),this.updateFormValue(),this.colorChange.emit(this.value)}applyHslColor(t,i,s,e=this.alpha){const a=Math.round(this.clamp(t,0,360)),r=Math.round(this.clamp(i,0,100)),h=Math.round(this.clamp(s,0,100)),n=this.roundAlpha(e);this.syncParsedColor({hex:this.hslToHex(a,r,h),alpha:n,h:a,s:r,l:h}),this.value=this.getFormattedValue(),this.updateFormValue(),this.colorChange.emit(this.value)}handleRgbChannelChange=(t,i)=>{const s=this.parseChannelValue(i.detail);if(null===s\|\|s<0\|\|s>255)return void this.setChannelValidation("rgb-"+t);const e=this.getRgbValues();e[t]=Math.round(s),this.setChannelValidation(null),this.applyRgbColor(e.r,e.g,e.b)};handleRgbaChannelChange=(t,i)=>{const s=this.parseChannelValue(i.detail),e="rgba-"+t;if(null===s)return void this.setChannelValidation(e);const a=this.getRgbValues();let r=this.alpha;if("a"===t){if(s<0\|\|s>1)return void this.setChannelValidation(e);r=s}else{if(s<0\|\|s>255)return void this.setChannelValidation(e);a[t]=Math.round(s)}this.setChannelValidation(null),this.applyRgbColor(a.r,a.g,a.b,r)};handleHslChannelChange=(t,i)=>{const s=this.parseChannelValue(i.detail);if(null===s\|\|s<0\|\|s>{h:360,s:100,l:100}[t])return void this.setChannelValidation("hsl-"+t);const e={h:this.hue,s:this.saturation,l:this.lightness,[t]:Math.round(s)};this.setChannelValidation(null),this.applyHslColor(e.h,e.s,e.l)};handleHslaChannelChange=(t,i)=>{const s=this.parseChannelValue(i.detail),e="hsla-"+t;if(null===s)return void this.setChannelValidation(e);const a={h:this.hue,s:this.saturation,l:this.lightness};let r=this.alpha;if("a"===t){if(s<0\|\|s>1)return void this.setChannelValidation(e);r=s}else{if(s<0\|\|s>{h:360,s:100,l:100}[t])return void this.setChannelValidation(e);a[t]=Math.round(s)}this.setChannelValidation(null),this.applyHslColor(a.h,a.s,a.l,r)};isHueVariant(){return"hue"===this.variant}isInputVariant(){return"input"===this.variant}showGradientSurface(){return!this.isHueVariant()&&!this.isInputVariant()}showSliderSection(){return!this.isInputVariant()}showInputSection(){return this.showHex\|\|this.showRgb\|\|this.showRgba\|\|this.showHsl\|\|this.showHsla\|\|this.isInputVariant()}getPanelClasses(){return{"cp-panel":!0,"cp-panel-hue":this.isHueVariant(),"cp-panel-input":this.isInputVariant(),"cp-panel-multi-format":this.showInputSection()}}renderFormatInput(t,i,s,a){return e("div",{class:"cp-input-wrap cp-full cp-inline-row"},e("span",{class:"cp-sm-label"},t),e("ui-input",{class:{"cp-text-input":!0,"cp-input-error":this.isInvalid&&this.invalidField===a},type:"text",value:i,onInputChange:s,size:"sm"}))}renderChannelInput(t,i,s,a,r,h,n){return e("div",{class:"cp-channel-field"},e("span",{class:"cp-channel-label"},i),e("ui-input",{class:{"cp-text-input":!0,"cp-channel-input":!0,"cp-input-error":this.isInvalid&&this.invalidField===t},type:"number",min:a,max:r,step:h,value:s,onInputChange:n,size:"sm"}))}renderChannelGroup(t,i,s){return e("div",{class:"cp-input-wrap cp-full cp-channel-group cp-inline-row"},e("span",{class:"cp-sm-label"},t),e("div",{class:{"cp-channel-grid":!0,"cp-channel-grid-3":3===i,"cp-channel-grid-4":4===i}},s))}render(){const t=this.hslToHex(this.hue,this.saturation,this.lightness),i=this.getSwatches(),s=e("div",{key:"1e6a1eb368643f6e67d9804cce7bcfed32b1bd1d",class:this.getPanelClasses()},this.showGradientSurface()&&e("div",{key:"2970c7db9dde45a2f88ed3ede420df322c6556dc",class:"cp-gradient",role:"slider","aria-label":"Saturation and Lightness","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":this.saturation,"aria-valuetext":`Saturation ${this.saturation}%, Lightness ${this.lightness}%`,tabindex:"0",onKeyDown:t=>{const i=t.shiftKey?10:1;"ArrowLeft"===t.key&&(this.saturation=Math.max(0,this.saturation-i),this.emitChange()),"ArrowRight"===t.key&&(this.saturation=Math.min(100,this.saturation+i),this.emitChange()),"ArrowUp"===t.key&&(this.lightness=Math.min(100,this.lightness+i),this.emitChange()),"ArrowDown"===t.key&&(this.lightness=Math.max(0,this.lightness-i),this.emitChange())},style:{background:`linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, hsl(${this.hue}, 100%, 50%))`},onMouseDown:t=>{const i=t.currentTarget.getBoundingClientRect(),s=t=>{const s=Math.max(0,Math.min(1,(t.clientX-i.left)/i.width)),e=Math.max(0,Math.min(1,(t.clientY-i.top)/i.height));this.saturation=Math.round(100s),this.lightness=Math.round((1-e)(100-50s)),this.emitChange()},e=()=>{window.removeEventListener("mousemove",s),window.removeEventListener("mouseup",e)};window.addEventListener("mousemove",s),window.addEventListener("mouseup",e),s(t)}},e("div",{key:"4136b69d81619ce158f2988be19e3e866dfa4ae8",class:"cp-gradient-thumb",style:{left:this.saturation+"%",top:100-this.lightness+"%",background:t}})),this.showSliderSection()&&e("div",{key:"27572206380ad082b4c49a9652b171169d4d92c0",class:"cp-row"},e("div",{key:"c69c64ac7d1173add32d3c0541ac73fe70383d7e",class:"cp-preview",style:{background:t}}),e("div",{key:"54663ac5d49a43922b4a46587383b4ea3db54520",class:"cp-sliders"},e("ui-range-slider",{key:"058c8a3b800afafc80cb13c06cfb48462e8e8206",class:"cp-hue-slider",min:0,max:360,value:this.hue,onSliderChange:t=>{this.hue=Number(t.detail),this.emitChange()},"aria-label":"Hue",showTooltip:!1,showValue:!1,hideRange:!0,trackColor:"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"}),this.showAlpha&&e("ui-range-slider",{key:"ef3b5d6112c7040bb1910d8171c8dc84901b628b",class:"cp-alpha-slider",min:0,max:100,value:Math.round(100*this.alpha),onSliderChange:t=>{this.alpha=Number(t.detail)/100,this.emitChange()},"aria-label":"Alpha",showTooltip:!1,showValue:!1,hideRange:!0,trackColor:`linear-gradient(to right, transparent, ${this.hslToHex(this.hue,this.saturation,this.lightness)}), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='5' height='5' fill='%23ccc'/%3E%3Crect x='5' y='5' width='5' height='5' fill='%23ccc'/%3E%3C/svg%3E")`})),this.showEyeDropper&&"EyeDropper"in window&&e("ui-button",{key:"a3597f83c7b6e4293bd0975d07b8994e66580f87",variant:"ghost",onClick:()=>this.handleEyeDropper(),ariaLabel:"Sample color from screen",icon:"pipette",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:"Sample color from screen"})),this.showInputSection()&&e("div",{key:"d3473eb493f2fda3167c506e8ff2470beb17bab9",class:"cp-inputs-grid"},this.showHex&&this.renderFormatInput("HEX",this.hexInput\|\|this.getHexInputValue(),this.handleHexInput,"hex"),this.showRgb&&this.renderChannelGroup("RGB",3,[this.renderChannelInput("rgb-r","R",this.getRgbValues().r,0,255,1,(t=>this.handleRgbChannelChange("r",t))),this.renderChannelInput("rgb-g","G",this.getRgbValues().g,0,255,1,(t=>this.handleRgbChannelChange("g",t))),this.renderChannelInput("rgb-b","B",this.getRgbValues().b,0,255,1,(t=>this.handleRgbChannelChange("b",t)))]),this.showRgba&&this.renderChannelGroup("RGBA",4,[this.renderChannelInput("rgba-r","R",this.getRgbValues().r,0,255,1,(t=>this.handleRgbaChannelChange("r",t))),this.renderChannelInput("rgba-g","G",this.getRgbValues().g,0,255,1,(t=>this.handleRgbaChannelChange("g",t))),this.renderChannelInput("rgba-b","B",this.getRgbValues().b,0,255,1,(t=>this.handleRgbaChannelChange("b",t))),this.renderChannelInput("rgba-a","A",this.alpha,0,1,.01,(t=>this.handleRgbaChannelChange("a",t)))]),this.showHsl&&this.renderChannelGroup("HSL",3,[this.renderChannelInput("hsl-h","H",this.hue,0,360,1,(t=>this.handleHslChannelChange("h",t))),this.renderChannelInput("hsl-s","S",this.saturation,0,100,1,(t=>this.handleHslChannelChange("s",t))),this.renderChannelInput("hsl-l","L",this.lightness,0,100,1,(t=>this.handleHslChannelChange("l",t)))]),this.showHsla&&this.renderChannelGroup("HSLA",4,[this.renderChannelInput("hsla-h","H",this.hue,0,360,1,(t=>this.handleHslaChannelChange("h",t))),this.renderChannelInput("hsla-s","S",this.saturation,0,100,1,(t=>this.handleHslaChannelChange("s",t))),this.renderChannelInput("hsla-l","L",this.lightness,0,100,1,(t=>this.handleHslaChannelChange("l",t))),this.renderChannelInput("hsla-a","A",this.alpha,0,1,.01,(t=>this.handleHslaChannelChange("a",t)))]),this.showColorName&&e("div",{key:"e73f932f199ad98b6d0155e4f39fc6f731821e75",class:"cp-input-wrap cp-full"},e("span",{key:"c47ac8a26ae1f1db9cc2a6fa0888ed2568043b30",class:"cp-sm-label"},"NAME"),e("div",{key:"393f4e95fa277dc016f4c31291683973f4f0a48a",class:"cp-name-display"},this.getColorName(t))),this.showGradient&&e("div",{key:"9029146f00a030168b63ea55a9a1f9ec67ce7cfa",class:"cp-gradient-toggle-wrap cp-full"},e("ui-button",{key:"a6561f32b69e43b5651134b73a6ab195b721c2c9",variant:"outline",class:{"cp-gradient-toggle":!0,"cp-active":this.isGradientMode},onClick:this.toggleGradientMode,fullWidth:!0,label:this.isGradientMode?"Disable Gradient":"Enable Gradient",size:"sm"}),this.isGradientMode&&e("div",{key:"aabaa25bd9f75a7bec76e611b9d852b8918fd718",class:"cp-stop-selectors"},this.gradientStops.map(((t,i)=>e("button",{type:"button",class:{"cp-swatch":!0,"cp-swatch-active":this.activeStopIndex===i},style:{"background-color":t,"--swatch-color":t,"border-radius":"50%"},onClick:()=>this.activeStopIndex=i,"aria-label":"Gradient stop "+(i+1)})))))),!this.isInputVariant()&&(this.showSwatches\|\|this.showRecent&&this.recentColors.length>0)&&e("div",{key:"b928b33063877a58493f56aa01a37efac5fade30",class:"cp-swatches-section"},e("div",{key:"02b8efedfdad4aa7bbe93b63bd3075395bef8f37",class:"cp-swatches"},i.map((i=>e("ui-button",{type:"button",style:{"background-color":i,"--swatch-color":i},class:{"cp-swatch":!0,"cp-swatch-active":i.toLowerCase()===t.toLowerCase()},onClick:()=>this.handleSwatch(i),title:this.getColorName(i),"aria-label":"Color "+this.getColorName(i)})))),this.showRecent&&this.recentColors.length>0&&e("div",{key:"68a6692afc4ae42ac02c8835fb65f40d64572ffd",class:"cp-history",style:{marginTop:"16px"}},e("div",{key:"c14af759e7380d18fa8b046bd91d97e0d4bb7b43",class:"cp-sm-label",style:{marginBottom:"8px"}},"RECENT"),e("div",{key:"a405d48643d7b452cb90dcfd5d2756a91a37585c",class:"cp-swatches"},this.recentColors.map((i=>e("ui-button",{type:"button",style:{"background-color":i,"--swatch-color":i,"border-radius":"50%"},class:{"cp-swatch":!0,"cp-history-swatch":!0,"cp-swatch-active":i.toLowerCase()===t.toLowerCase()},onClick:()=>this.handleSwatch(i),title:this.getColorName(i),"aria-label":"Recent color "+this.getColorName(i)})))))));return e(a,{key:"437644b794e0abc1a9a37f77641ef9edf0bc47d7",class:`cp-size-${this.size} cp-variant-${this.variant}`},this.label&&e("label",{key:"ba2bb236655f6eab50c62cd18d3b07bbc0cf37b1",class:"cp-label"},this.label),this.inline?s:e("div",{class:"cp-trigger-wrapper"},e("ui-button",{variant:"outline",disabled:this.disabled,onClick:()=>!this.disabled&&(this.isOpen=!this.isOpen),fullWidth:!0},e("span",{class:"cp-trigger-swatch",style:{background:this.value}}),e("span",{class:"cp-trigger-value",style:{marginLeft:"8px",flex:"1",textAlign:"left"}},this.isGradientMode?this.value:this.getFormattedValue()),e("ui-icon",{name:this.isOpen?"chevron-up":"chevron-down",size:"18",library:"lucide"})),this.isOpen&&e("div",{class:"cp-dropdown"},s)))}static get formAssociated(){return!0}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit}.cp-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary, #374151);margin-bottom:6px}.cp-trigger-wrapper{position:relative;display:inline-block}.cp-trigger{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1.5px solid var(--border-strong, #d1d5db);border-radius:10px;background:var(--bg-primary, #ffffff);cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary, #374151);transition:border-color 0.2s, box-shadow 0.2s;min-width:140px}.cp-trigger:hover:not(.cp-disabled){border-color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.12)}.cp-trigger:hover:not(.cp-disabled).cp-disabled{opacity:0.5;cursor:not-allowed}.cp-trigger-swatch{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0, 0, 0, 0.1);flex-shrink:0}.cp-trigger-value{flex:1;font-family:monospace}.cp-trigger-arrow{font-size:10px;color:var(--text-muted, #9ca3af)}.cp-dropdown{position:absolute;top:calc(100% + 6px);left:0;z-index:1000;background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e5e7eb);border-radius:14px;box-shadow:0 20px 40px rgba(0, 0, 0, 0.15);overflow:hidden;animation:cp-drop-in 0.15s ease}@keyframes cp-drop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.cp-panel{width:460px;padding:14px}.cp-panel-hue{width:280px}.cp-panel-input{width:480px}.cp-panel-input .cp-inputs-grid{grid-template-columns:1fr;gap:16px}.cp-panel-input .cp-input-wrap.cp-full{grid-column:span 1}.cp-gradient{width:100%;height:140px;border-radius:8px;position:relative;cursor:crosshair;margin-bottom:12px;user-select:none}.cp-gradient-thumb{position:absolute;width:14px;height:14px;border-radius:50%;border:2.5px solid var(--border-subtle, #fff);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);transform:translate(-50%, -50%);pointer-events:none}.cp-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.cp-preview{width:32px;height:32px;border-radius:8px;border:2px solid rgba(0, 0, 0, 0.1);flex-shrink:0}.cp-sliders{flex:1;display:flex;flex-direction:column;gap:12px}.cp-hue-slider,.cp-alpha-slider{width:100%;--slider-track-height:12px;--slider-thumb-size:20px}.cp-hue-slider::part(track),.cp-alpha-slider::part(track){height:12px;border-radius:6px;box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.2)}.cp-hue-slider::part(thumb),.cp-alpha-slider::part(thumb){width:20px;height:20px;border:3px solid #fff;box-shadow:0 4px 10px rgba(0, 0, 0, 0.3);background:transparent}.cp-inputs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.cp-panel-multi-format .cp-inputs-grid{grid-template-columns:1fr}.cp-panel-multi-format .cp-input-wrap.cp-full{grid-column:span 1}.cp-input-wrap{display:flex;flex-direction:column;gap:8px}.cp-input-wrap.cp-full{grid-column:span 2}.cp-sm-label{font-size:11px;font-weight:800;color:var(--text-muted, #94a3b8);text-transform:uppercase;letter-spacing:0.05em}.cp-input-wrap.cp-inline-row{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:16px;background:rgba(var(--ui-input-bg-rgb, 248, 250, 252), 0.5);padding:12px 16px;border-radius:12px;border:1px solid var(--border-subtle, #f1f5f9);transition:all 0.2s ease}.cp-input-wrap.cp-inline-row:hover{background:#fff;border-color:var(--border-strong, #e2e8f0);box-shadow:0 4px 12px rgba(0, 0, 0, 0.03)}.cp-channel-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(64px, 1fr));gap:10px;width:100%}.cp-channel-field{display:flex;flex-direction:column;gap:6px;align-items:center}.cp-channel-field .cp-channel-label{font-size:10px;font-weight:700;color:var(--text-muted, #94a3b8);margin-bottom:2px}.cp-channel-field ui-input{width:100%;--ui-input-text-align:center}.cp-text-input{--ui-input-text-align:left}:host(.cp-variant-hue) .cp-panel{padding-block:12px}:host(.cp-variant-hue) .cp-row{margin-bottom:12px}:host(.cp-variant-input) .cp-panel{padding:12px}:host(.cp-variant-input) .cp-name-display,:host(.cp-variant-input) .cp-text-input{min-height:36px}.cp-name-display{width:100%;border:1.5px solid var(--border-subtle, #f3f4f6);background:var(--bg-primary, #f9fafb);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--text-secondary, #4b5563);box-sizing:border-box}.cp-swatches{display:flex;flex-wrap:wrap;gap:6px}.cp-swatch{width:22px;height:22px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:transform 0.1s, border-color 0.15s, box-shadow 0.15s;padding:0;margin:0;outline:none;box-sizing:border-box;flex-shrink:0}.cp-swatch:hover{transform:scale(1.15)}.cp-swatch.cp-swatch-active{border-color:var(--bg-primary, #ffffff);box-shadow:0 0 0 1px var(--bg-primary, #ffffff), 0 0 0 3px var(--swatch-color, var(--color-primary, #10b981))}"}},[577,"ui-color-picker",{value:[1025],label:[1],showHex:[4,"show-hex"],showRgb:[4,"show-rgb"],showRgba:[4,"show-rgba"],showHsl:[4,"show-hsl"],showHsla:[4,"show-hsla"],showAlpha:[4,"show-alpha"],showSwatches:[4,"show-swatches"],swatches:[1],format:[1],disabled:[4],inline:[4],size:[1],name:[1],required:[4],showRecent:[4,"show-recent"],showEyeDropper:[4,"show-eye-dropper"],showColorName:[4,"show-color-name"],showGradient:[4,"show-gradient"],variant:[1],isOpen:[32],hue:[32],saturation:[32],lightness:[32],alpha:[32],hexInput:[32],isInvalid:[32],invalidField:[32],recentColors:[32],isGradientMode:[32],gradientStops:[32],activeStopIndex:[32]},void 0,{value:[{valueChanged:0}]}]),u=d,b=function(){"undefined"!=typeof customElements&&["ui-color-picker","ui-badge","ui-button","ui-icon","ui-input","ui-loader","ui-range-slider"].forEach((t=>{switch(t){case"ui-color-picker":customElements.get(r(t))\|\|customElements.define(r(t),d);break;case"ui-badge":customElements.get(r(t))\|\|n();break;case"ui-button":customElements.get(r(t))\|\|h();break;case"ui-icon":customElements.get(r(t))\|\|o();break;case"ui-input":customElements.get(r(t))\|\|l();break;case"ui-loader":customElements.get(r(t))\|\|c();break;case"ui-range-slider":customElements.get(r(t))\|\|p()}}))};export{u as UiColorPicker,b as defineCustomElement}