store/1clickUI.sune

[{"id":"cvr3v9s","name":"1 Click UI Builder","pinned":false,"avatar":"","url":"gh://sune-org/store/1clickUI.sune","updatedAt":1757800132759,"settings":{"model":"g:gemini-2.5-pro","temperature":"","top_p":"","top_k":"","frequency_penalty":"","repetition_penalty":"","min_p":"","top_a":"","verbosity":"","reasoning_effort":"default","system_prompt":"You are Modular UI Builder. You deliver production-ready code. Basically a modular piece of HTML that gets injected into already existing HTML. it can contain scripts and use tailwind. Assume tailwind, lucide, alpinejs(use lightly) CDN already exists. UI should be mobile-first. Apply little code golfing practices. Visually pleasing.","html":"<!--\nSune: HTML Renderer\nVersion: 3.1\n-->\n<div id=\"sune_html_renderer\" data-version=\"3.1\" class=\"hidden\"></div>\n<script>\n(()=>{\n  const SUNE_ID='sune_html_renderer';\n  const suneEl=document.getElementById(SUNE_ID);\n  if(!suneEl){console.error(\"Sune container not found.\");return}\n  \n  const SUNE_NAME='[Sune: HTML Renderer]', SUNE_V=suneEl.dataset.version;\n  console.log(`${SUNE_NAME} Initializing v${SUNE_V}`);\n\n  const drawToSune=code=>{\n    const target=window.el?.suneHtml;\n    if(!target)return;\n    target.innerHTML=code;\n    target.classList.remove('hidden');\n    window.Alpine?.initTree(target);\n    window.lucide?.createIcons();\n    window.el.chat.scrollTo({top:0,behavior:'smooth'});\n  };\n\n  const processBubble=bubble=>{\n    if(!bubble?.querySelectorAll)return;\n    bubble.querySelectorAll('pre > code.language-html').forEach(codeEl=>{\n      const preEl=codeEl.parentElement;\n      if(!preEl||preEl.querySelector('.render-btn'))return;\n\n      const btn=document.createElement('button');\n      btn.className='render-btn absolute top-2 left-2 z-10 inline-flex items-center gap-1.5 rounded-lg bg-slate-800 px-2 py-1 text-xs font-medium text-white opacity-85 transition-opacity hover:opacity-100';\n      btn.dataset.suneManaged=SUNE_ID; // Tag the button for specific cleanup\n      btn.innerHTML='<i data-lucide=\"layout-template\" class=\"h-3.5 w-3.5\"></i>Render';\n      btn.title='Render to suneHTML';\n      btn.onclick=e=>{e.stopPropagation();drawToSune(codeEl.innerText)};\n      \n      preEl.classList.add('relative');\n      preEl.appendChild(btn);\n      window.lucide?.createIcons();\n    });\n  };\n\n  const scanExisting=()=>document.querySelectorAll('#messages .msg-bubble').forEach(processBubble);\n  \n  const observer=new MutationObserver(mutations=>{\n    for(const m of mutations)for(const node of m.addedNodes)if(node.nodeType===1){\n      const bubbles=node.matches?.('.msg-bubble')?[node]:node.querySelectorAll?.('.msg-bubble');\n      bubbles?.forEach(processBubble);\n    }\n  });\n  \n  const onNewResponse=e=>{\n    const id=e?.detail?.message?.id;\n    if(id)setTimeout(()=>processBubble(window.getBubbleById(id)),150);\n  };\n\n  const composerEl=window.el?.composer, messagesEl=window.el?.messages;\n  if(messagesEl&&composerEl){\n    observer.observe(messagesEl,{childList:true,subtree:true});\n    composerEl.addEventListener('sune:newSuneResponse',onNewResponse);\n    scanExisting();\n    console.log(`${SUNE_NAME} Ready.`);\n  }\n\n  suneEl.addEventListener('sune:unmount',()=>{\n    observer.disconnect();\n    if(composerEl)composerEl.removeEventListener('sune:newSuneResponse',onNewResponse);\n    // Use the specific data attribute for a precise and guaranteed cleanup\n    document.querySelectorAll(`[data-sune-managed=\"${SUNE_ID}\"]`).forEach(b=>b.remove());\n    console.log(`${SUNE_NAME} Unmounted.`);\n  });\n})();\n</script>\n","extension_html":"<sune src='https://raw.githubusercontent.com/sune-org/store/refs/heads/main/sync.sune' private></sune>","hide_composer":false,"include_thoughts":false,"json_output":false,"ignore_master_prompt":false,"json_schema":""},"storage":{}}]