.sune/1clickUI.sune

[{"id":"cvr3v9s","name":"1 Click UI Builder","pinned":false,"avatar":"data:image/webp;base64,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","url":"gh://multipleof4/.sune/1clickUI.sune","updatedAt":1764699112509,"settings":{"model":"cla:claude-sonnet-4-5","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,"img_output":false,"ignore_master_prompt":false,"json_schema":""},"storage":{}}]