@akashjs/runtime 0.2.1 → 0.2.6

package/dist/devtools-overlay-CJWKBTP4.js

@@ -0,0 +1,57 @@
+import {d as d$1}from'./chunk-TKFJGLUO.js';import'./chunk-H2HNKYN2.js';import {n}from'./chunk-3GRR4VW2.js';var e="__akash-devtools-panel",c="__akash-devtools-badge",h=`
+#${e} {
+  position: fixed; bottom: 0; right: 0; width: 420px; height: 360px;
+  background: #1e1e2e; color: #cdd6f4; font-family: 'SF Mono', Consolas, monospace;
+  font-size: 12px; border-top: 2px solid #7c3aed; border-left: 2px solid #7c3aed;
+  z-index: 999999; display: flex; flex-direction: column; overflow: hidden;
+  border-radius: 8px 0 0 0; box-shadow: -4px -4px 20px rgba(0,0,0,0.4);
+}
+#${e} .dt-header {
+  display: flex; align-items: center; padding: 6px 10px;
+  background: #181825; border-bottom: 1px solid #313244; user-select: none;
+}
+#${e} .dt-header span { font-weight: 600; color: #7c3aed; flex: 1; }
+#${e} .dt-tabs { display: flex; gap: 2px; }
+#${e} .dt-tab {
+  padding: 3px 8px; border-radius: 4px; cursor: pointer; color: #6c7086;
+  background: transparent; border: none; font-size: 11px; font-family: inherit;
+}
+#${e} .dt-tab:hover { color: #cdd6f4; background: #313244; }
+#${e} .dt-tab.active { color: #cdd6f4; background: #7c3aed; }
+#${e} .dt-close {
+  background: none; border: none; color: #6c7086; cursor: pointer;
+  font-size: 14px; padding: 2px 6px; margin-left: 4px;
+}
+#${e} .dt-close:hover { color: #f38ba8; }
+#${e} .dt-body { flex: 1; overflow: auto; padding: 8px 10px; }
+#${e} .dt-store-list { display: flex; flex-direction: column; gap: 6px; }
+#${e} .dt-store {
+  background: #313244; border-radius: 4px; padding: 6px 8px; cursor: pointer;
+}
+#${e} .dt-store:hover { background: #45475a; }
+#${e} .dt-store-id { color: #89b4fa; font-weight: 600; margin-bottom: 4px; }
+#${e} .dt-kv { display: flex; gap: 6px; padding: 1px 0; }
+#${e} .dt-key { color: #a6adc8; }
+#${e} .dt-val { color: #a6e3a1; }
+#${e} .dt-val.str { color: #f9e2af; }
+#${e} .dt-val.bool { color: #fab387; }
+#${e} .dt-val.null { color: #6c7086; font-style: italic; }
+#${e} .dt-section { color: #6c7086; font-size: 10px; text-transform: uppercase; margin: 8px 0 4px; }
+#${e} .dt-empty { color: #6c7086; font-style: italic; padding: 20px; text-align: center; }
+#${c} {
+  position: fixed; bottom: 12px; right: 12px; width: 36px; height: 36px;
+  background: #7c3aed; color: white; border-radius: 50%; display: flex;
+  align-items: center; justify-content: center; cursor: pointer;
+  z-index: 999998; font-size: 16px; box-shadow: 0 2px 8px rgba(124,58,237,0.4);
+  border: none; font-family: inherit;
+}
+#${c}:hover { background: #6d28d9; transform: scale(1.1); }
+`;function $(t){if(t===null)return {text:"null",cls:"null"};if(t===void 0)return {text:"undefined",cls:"null"};if(typeof t=="boolean")return {text:String(t),cls:"bool"};if(typeof t=="string")return {text:`"${t.length>40?t.slice(0,40)+"...":t}"`,cls:"str"};if(typeof t=="number")return {text:String(t),cls:""};if(Array.isArray(t))return {text:`Array(${t.length})`,cls:""};if(typeof t=="object")try{let o=Object.keys(t);return {text:`{${o.slice(0,3).join(", ")}${o.length>3?", ...":""}}`,cls:""}}catch{return {text:"[Object]",cls:""}}return {text:String(t),cls:""}}var s=null,l=null,i=false,p="stores",d=null;function k(t,o){let{text:r,cls:n}=$(o);return `<div class="dt-kv"><span class="dt-key">${t}:</span><span class="dt-val ${n}">${r}</span></div>`}function E(){let t=d$1(),o=Object.keys(t);if(o.length===0)return '<div class="dt-empty">No stores registered</div>';let r='<div class="dt-store-list">';for(let n of o){let y=t[n].$snapshot();r+=`<div class="dt-store"><div class="dt-store-id">${n}</div>`;for(let[m,v]of Object.entries(y))r+=k(m,v);r+="</div>";}return r+="</div>",r}function S(){return globalThis.__AKASH_DEVTOOLS__?'<div class="dt-empty">Route info available via __AKASH_DEVTOOLS__</div>':'<div class="dt-empty">DevTools API not installed</div>'}function b(){switch(p){case "stores":return E();case "routes":return S();default:return '<div class="dt-empty">Tab not implemented</div>'}}function g(){if(!s||!i)return;let t=s.querySelector(".dt-body");t&&(t.innerHTML=b());}function T(){let t=document.createElement("div");t.id=e;let r=["stores","routes"].map(n=>`<button class="dt-tab ${n===p?"active":""}" data-tab="${n}">${n}</button>`).join("");return t.innerHTML=`
+    <div class="dt-header">
+      <span>AkashJS DevTools</span>
+      <div class="dt-tabs">${r}</div>
+      <button class="dt-close" title="Close">&times;</button>
+    </div>
+    <div class="dt-body">${b()}</div>
+  `,t.querySelectorAll(".dt-tab").forEach(n=>{n.addEventListener("click",()=>{p=n.dataset.tab??"stores",t.querySelectorAll(".dt-tab").forEach(f=>f.classList.remove("active")),n.classList.add("active"),g();});}),t.querySelector(".dt-close")?.addEventListener("click",()=>u()),t}function _(){let t=document.createElement("button");return t.id=c,t.textContent="\u{1F527}",t.title="AkashJS DevTools (Ctrl+Shift+D)",t.addEventListener("click",()=>u()),t}function u(){i?(s?.remove(),s=null,d&&(d(),d=null),l.style.display="",i=false):(s=T(),document.body.appendChild(s),l.style.display="none",i=true,d=n(()=>{let t=d$1();for(let o of Object.values(t))try{o.$snapshot();}catch{}g();}));}function w(){if(typeof document>"u"||!document.head||!document.body)return;let t=document.createElement("style");t.textContent=h,document.head.appendChild(t),l=_(),document.body.appendChild(l),document.addEventListener("keydown",o=>{o.ctrlKey&&o.shiftKey&&o.key==="D"&&(o.preventDefault(),u());});}export{w as mountDevtoolsOverlay};//# sourceMappingURL=devtools-overlay-CJWKBTP4.js.map
+//# sourceMappingURL=devtools-overlay-CJWKBTP4.js.map

package/dist/devtools-overlay-CJWKBTP4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/devtools-overlay.ts"],"names":["PANEL_ID","BADGE_ID","STYLES","formatValue","val","keys","panelEl","badgeEl","isOpen","activeTab","disposeUpdate","renderKV","key","text","cls","renderStoresTab","instances","__getStoreInstances","ids","html","id","snap","renderRoutesTab","renderBody","updatePanel","body","createPanel","el","tabHtml","t","btn","b","togglePanel","createBadge","effect","store","mountDevtoolsOverlay","style","e"],"mappings":"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","file":"devtools-overlay-CJWKBTP4.js","sourcesContent":["/**\n * DevTools visual overlay panel.\n *\n * Toggled with Ctrl+Shift+D. Self-contained DOM — no .akash components.\n * Reads store state via __getStoreInstances(), live-updates via effects.\n *\n * Dev-only: tree-shaken in production builds.\n */\n\nimport { effect } from './signals.js';\nimport { __getStoreInstances } from './store.js';\n\nconst PANEL_ID = '__akash-devtools-panel';\nconst BADGE_ID = '__akash-devtools-badge';\n\n// --- Styles ---\n\nconst STYLES = `\n#${PANEL_ID} {\n  position: fixed; bottom: 0; right: 0; width: 420px; height: 360px;\n  background: #1e1e2e; color: #cdd6f4; font-family: 'SF Mono', Consolas, monospace;\n  font-size: 12px; border-top: 2px solid #7c3aed; border-left: 2px solid #7c3aed;\n  z-index: 999999; display: flex; flex-direction: column; overflow: hidden;\n  border-radius: 8px 0 0 0; box-shadow: -4px -4px 20px rgba(0,0,0,0.4);\n}\n#${PANEL_ID} .dt-header {\n  display: flex; align-items: center; padding: 6px 10px;\n  background: #181825; border-bottom: 1px solid #313244; user-select: none;\n}\n#${PANEL_ID} .dt-header span { font-weight: 600; color: #7c3aed; flex: 1; }\n#${PANEL_ID} .dt-tabs { display: flex; gap: 2px; }\n#${PANEL_ID} .dt-tab {\n  padding: 3px 8px; border-radius: 4px; cursor: pointer; color: #6c7086;\n  background: transparent; border: none; font-size: 11px; font-family: inherit;\n}\n#${PANEL_ID} .dt-tab:hover { color: #cdd6f4; background: #313244; }\n#${PANEL_ID} .dt-tab.active { color: #cdd6f4; background: #7c3aed; }\n#${PANEL_ID} .dt-close {\n  background: none; border: none; color: #6c7086; cursor: pointer;\n  font-size: 14px; padding: 2px 6px; margin-left: 4px;\n}\n#${PANEL_ID} .dt-close:hover { color: #f38ba8; }\n#${PANEL_ID} .dt-body { flex: 1; overflow: auto; padding: 8px 10px; }\n#${PANEL_ID} .dt-store-list { display: flex; flex-direction: column; gap: 6px; }\n#${PANEL_ID} .dt-store {\n  background: #313244; border-radius: 4px; padding: 6px 8px; cursor: pointer;\n}\n#${PANEL_ID} .dt-store:hover { background: #45475a; }\n#${PANEL_ID} .dt-store-id { color: #89b4fa; font-weight: 600; margin-bottom: 4px; }\n#${PANEL_ID} .dt-kv { display: flex; gap: 6px; padding: 1px 0; }\n#${PANEL_ID} .dt-key { color: #a6adc8; }\n#${PANEL_ID} .dt-val { color: #a6e3a1; }\n#${PANEL_ID} .dt-val.str { color: #f9e2af; }\n#${PANEL_ID} .dt-val.bool { color: #fab387; }\n#${PANEL_ID} .dt-val.null { color: #6c7086; font-style: italic; }\n#${PANEL_ID} .dt-section { color: #6c7086; font-size: 10px; text-transform: uppercase; margin: 8px 0 4px; }\n#${PANEL_ID} .dt-empty { color: #6c7086; font-style: italic; padding: 20px; text-align: center; }\n#${BADGE_ID} {\n  position: fixed; bottom: 12px; right: 12px; width: 36px; height: 36px;\n  background: #7c3aed; color: white; border-radius: 50%; display: flex;\n  align-items: center; justify-content: center; cursor: pointer;\n  z-index: 999998; font-size: 16px; box-shadow: 0 2px 8px rgba(124,58,237,0.4);\n  border: none; font-family: inherit;\n}\n#${BADGE_ID}:hover { background: #6d28d9; transform: scale(1.1); }\n`;\n\n// --- Value formatting ---\n\nfunction formatValue(val: unknown): { text: string; cls: string } {\n  if (val === null) return { text: 'null', cls: 'null' };\n  if (val === undefined) return { text: 'undefined', cls: 'null' };\n  if (typeof val === 'boolean') return { text: String(val), cls: 'bool' };\n  if (typeof val === 'string') return { text: `\"${val.length > 40 ? val.slice(0, 40) + '...' : val}\"`, cls: 'str' };\n  if (typeof val === 'number') return { text: String(val), cls: '' };\n  if (Array.isArray(val)) return { text: `Array(${val.length})`, cls: '' };\n  if (typeof val === 'object') {\n    try {\n      const keys = Object.keys(val);\n      return { text: `{${keys.slice(0, 3).join(', ')}${keys.length > 3 ? ', ...' : ''}}`, cls: '' };\n    } catch { return { text: '[Object]', cls: '' }; }\n  }\n  return { text: String(val), cls: '' };\n}\n\n// --- Panel rendering ---\n\nlet panelEl: HTMLElement | null = null;\nlet badgeEl: HTMLElement | null = null;\nlet isOpen = false;\nlet activeTab = 'stores';\nlet disposeUpdate: (() => void) | null = null;\n\nfunction renderKV(key: string, val: unknown): string {\n  const { text, cls } = formatValue(val);\n  return `<div class=\"dt-kv\"><span class=\"dt-key\">${key}:</span><span class=\"dt-val ${cls}\">${text}</span></div>`;\n}\n\nfunction renderStoresTab(): string {\n  const instances = __getStoreInstances();\n  const ids = Object.keys(instances);\n  if (ids.length === 0) return '<div class=\"dt-empty\">No stores registered</div>';\n\n  let html = '<div class=\"dt-store-list\">';\n  for (const id of ids) {\n    const store = instances[id];\n    const snap = store.$snapshot();\n    html += `<div class=\"dt-store\"><div class=\"dt-store-id\">${id}</div>`;\n    for (const [key, val] of Object.entries(snap)) {\n      html += renderKV(key, val);\n    }\n    html += '</div>';\n  }\n  html += '</div>';\n  return html;\n}\n\nfunction renderRoutesTab(): string {\n  const devtools = (globalThis as any).__AKASH_DEVTOOLS__;\n  if (!devtools) return '<div class=\"dt-empty\">DevTools API not installed</div>';\n  // Route info not directly available here — show what we can\n  return '<div class=\"dt-empty\">Route info available via __AKASH_DEVTOOLS__</div>';\n}\n\nfunction renderBody(): string {\n  switch (activeTab) {\n    case 'stores': return renderStoresTab();\n    case 'routes': return renderRoutesTab();\n    default: return '<div class=\"dt-empty\">Tab not implemented</div>';\n  }\n}\n\nfunction updatePanel(): void {\n  if (!panelEl || !isOpen) return;\n  const body = panelEl.querySelector('.dt-body');\n  if (body) body.innerHTML = renderBody();\n}\n\nfunction createPanel(): HTMLElement {\n  const el = document.createElement('div');\n  el.id = PANEL_ID;\n\n  const tabs = ['stores', 'routes'];\n  const tabHtml = tabs.map(t =>\n    `<button class=\"dt-tab ${t === activeTab ? 'active' : ''}\" data-tab=\"${t}\">${t}</button>`\n  ).join('');\n\n  el.innerHTML = `\n    <div class=\"dt-header\">\n      <span>AkashJS DevTools</span>\n      <div class=\"dt-tabs\">${tabHtml}</div>\n      <button class=\"dt-close\" title=\"Close\">&times;</button>\n    </div>\n    <div class=\"dt-body\">${renderBody()}</div>\n  `;\n\n  // Tab switching\n  el.querySelectorAll('.dt-tab').forEach(btn => {\n    btn.addEventListener('click', () => {\n      activeTab = (btn as HTMLElement).dataset.tab ?? 'stores';\n      el.querySelectorAll('.dt-tab').forEach(b => b.classList.remove('active'));\n      btn.classList.add('active');\n      updatePanel();\n    });\n  });\n\n  // Close button\n  el.querySelector('.dt-close')?.addEventListener('click', () => togglePanel());\n\n  return el;\n}\n\nfunction createBadge(): HTMLElement {\n  const el = document.createElement('button');\n  el.id = BADGE_ID;\n  el.textContent = '\\u{1f527}';\n  el.title = 'AkashJS DevTools (Ctrl+Shift+D)';\n  el.addEventListener('click', () => togglePanel());\n  return el;\n}\n\nfunction togglePanel(): void {\n  if (isOpen) {\n    panelEl?.remove();\n    panelEl = null;\n    if (disposeUpdate) { disposeUpdate(); disposeUpdate = null; }\n    badgeEl!.style.display = '';\n    isOpen = false;\n  } else {\n    panelEl = createPanel();\n    document.body.appendChild(panelEl);\n    badgeEl!.style.display = 'none';\n    isOpen = true;\n\n    // Live update every time any store signal changes\n    disposeUpdate = effect(() => {\n      // Read all store signals to track them\n      const instances = __getStoreInstances();\n      for (const store of Object.values(instances)) {\n        try { store.$snapshot(); } catch { /* ignore */ }\n      }\n      // Update DOM\n      updatePanel();\n    });\n  }\n}\n\n// --- Public API ---\n\nexport function mountDevtoolsOverlay(): void {\n  if (typeof document === 'undefined' || !document.head || !document.body) return;\n\n  // Inject styles\n  const style = document.createElement('style');\n  style.textContent = STYLES;\n  document.head.appendChild(style);\n\n  // Create badge\n  badgeEl = createBadge();\n  document.body.appendChild(badgeEl);\n\n  // Keyboard shortcut: Ctrl+Shift+D\n  document.addEventListener('keydown', (e) => {\n    if (e.ctrlKey && e.shiftKey && e.key === 'D') {\n      e.preventDefault();\n      togglePanel();\n    }\n  });\n}\n"]}

package/dist/devtools-overlay-EQ3G755P.cjs

@@ -0,0 +1,57 @@
+'use strict';var chunkAVVJKYT3_cjs=require('./chunk-AVVJKYT3.cjs');require('./chunk-35DJOBEO.cjs');var chunkEEILP4OL_cjs=require('./chunk-EEILP4OL.cjs');var e="__akash-devtools-panel",c="__akash-devtools-badge",h=`
+#${e} {
+  position: fixed; bottom: 0; right: 0; width: 420px; height: 360px;
+  background: #1e1e2e; color: #cdd6f4; font-family: 'SF Mono', Consolas, monospace;
+  font-size: 12px; border-top: 2px solid #7c3aed; border-left: 2px solid #7c3aed;
+  z-index: 999999; display: flex; flex-direction: column; overflow: hidden;
+  border-radius: 8px 0 0 0; box-shadow: -4px -4px 20px rgba(0,0,0,0.4);
+}
+#${e} .dt-header {
+  display: flex; align-items: center; padding: 6px 10px;
+  background: #181825; border-bottom: 1px solid #313244; user-select: none;
+}
+#${e} .dt-header span { font-weight: 600; color: #7c3aed; flex: 1; }
+#${e} .dt-tabs { display: flex; gap: 2px; }
+#${e} .dt-tab {
+  padding: 3px 8px; border-radius: 4px; cursor: pointer; color: #6c7086;
+  background: transparent; border: none; font-size: 11px; font-family: inherit;
+}
+#${e} .dt-tab:hover { color: #cdd6f4; background: #313244; }
+#${e} .dt-tab.active { color: #cdd6f4; background: #7c3aed; }
+#${e} .dt-close {
+  background: none; border: none; color: #6c7086; cursor: pointer;
+  font-size: 14px; padding: 2px 6px; margin-left: 4px;
+}
+#${e} .dt-close:hover { color: #f38ba8; }
+#${e} .dt-body { flex: 1; overflow: auto; padding: 8px 10px; }
+#${e} .dt-store-list { display: flex; flex-direction: column; gap: 6px; }
+#${e} .dt-store {
+  background: #313244; border-radius: 4px; padding: 6px 8px; cursor: pointer;
+}
+#${e} .dt-store:hover { background: #45475a; }
+#${e} .dt-store-id { color: #89b4fa; font-weight: 600; margin-bottom: 4px; }
+#${e} .dt-kv { display: flex; gap: 6px; padding: 1px 0; }
+#${e} .dt-key { color: #a6adc8; }
+#${e} .dt-val { color: #a6e3a1; }
+#${e} .dt-val.str { color: #f9e2af; }
+#${e} .dt-val.bool { color: #fab387; }
+#${e} .dt-val.null { color: #6c7086; font-style: italic; }
+#${e} .dt-section { color: #6c7086; font-size: 10px; text-transform: uppercase; margin: 8px 0 4px; }
+#${e} .dt-empty { color: #6c7086; font-style: italic; padding: 20px; text-align: center; }
+#${c} {
+  position: fixed; bottom: 12px; right: 12px; width: 36px; height: 36px;
+  background: #7c3aed; color: white; border-radius: 50%; display: flex;
+  align-items: center; justify-content: center; cursor: pointer;
+  z-index: 999998; font-size: 16px; box-shadow: 0 2px 8px rgba(124,58,237,0.4);
+  border: none; font-family: inherit;
+}
+#${c}:hover { background: #6d28d9; transform: scale(1.1); }
+`;function $(t){if(t===null)return {text:"null",cls:"null"};if(t===void 0)return {text:"undefined",cls:"null"};if(typeof t=="boolean")return {text:String(t),cls:"bool"};if(typeof t=="string")return {text:`"${t.length>40?t.slice(0,40)+"...":t}"`,cls:"str"};if(typeof t=="number")return {text:String(t),cls:""};if(Array.isArray(t))return {text:`Array(${t.length})`,cls:""};if(typeof t=="object")try{let o=Object.keys(t);return {text:`{${o.slice(0,3).join(", ")}${o.length>3?", ...":""}}`,cls:""}}catch{return {text:"[Object]",cls:""}}return {text:String(t),cls:""}}var s=null,l=null,i=false,p="stores",d=null;function k(t,o){let{text:r,cls:n}=$(o);return `<div class="dt-kv"><span class="dt-key">${t}:</span><span class="dt-val ${n}">${r}</span></div>`}function E(){let t=chunkAVVJKYT3_cjs.d(),o=Object.keys(t);if(o.length===0)return '<div class="dt-empty">No stores registered</div>';let r='<div class="dt-store-list">';for(let n of o){let y=t[n].$snapshot();r+=`<div class="dt-store"><div class="dt-store-id">${n}</div>`;for(let[m,v]of Object.entries(y))r+=k(m,v);r+="</div>";}return r+="</div>",r}function S(){return globalThis.__AKASH_DEVTOOLS__?'<div class="dt-empty">Route info available via __AKASH_DEVTOOLS__</div>':'<div class="dt-empty">DevTools API not installed</div>'}function b(){switch(p){case "stores":return E();case "routes":return S();default:return '<div class="dt-empty">Tab not implemented</div>'}}function g(){if(!s||!i)return;let t=s.querySelector(".dt-body");t&&(t.innerHTML=b());}function T(){let t=document.createElement("div");t.id=e;let r=["stores","routes"].map(n=>`<button class="dt-tab ${n===p?"active":""}" data-tab="${n}">${n}</button>`).join("");return t.innerHTML=`
+    <div class="dt-header">
+      <span>AkashJS DevTools</span>
+      <div class="dt-tabs">${r}</div>
+      <button class="dt-close" title="Close">&times;</button>
+    </div>
+    <div class="dt-body">${b()}</div>
+  `,t.querySelectorAll(".dt-tab").forEach(n=>{n.addEventListener("click",()=>{p=n.dataset.tab??"stores",t.querySelectorAll(".dt-tab").forEach(f=>f.classList.remove("active")),n.classList.add("active"),g();});}),t.querySelector(".dt-close")?.addEventListener("click",()=>u()),t}function _(){let t=document.createElement("button");return t.id=c,t.textContent="\u{1F527}",t.title="AkashJS DevTools (Ctrl+Shift+D)",t.addEventListener("click",()=>u()),t}function u(){i?(s?.remove(),s=null,d&&(d(),d=null),l.style.display="",i=false):(s=T(),document.body.appendChild(s),l.style.display="none",i=true,d=chunkEEILP4OL_cjs.n(()=>{let t=chunkAVVJKYT3_cjs.d();for(let o of Object.values(t))try{o.$snapshot();}catch{}g();}));}function w(){if(typeof document>"u"||!document.head||!document.body)return;let t=document.createElement("style");t.textContent=h,document.head.appendChild(t),l=_(),document.body.appendChild(l),document.addEventListener("keydown",o=>{o.ctrlKey&&o.shiftKey&&o.key==="D"&&(o.preventDefault(),u());});}exports.mountDevtoolsOverlay=w;//# sourceMappingURL=devtools-overlay-EQ3G755P.cjs.map
+//# sourceMappingURL=devtools-overlay-EQ3G755P.cjs.map

package/dist/devtools-overlay-EQ3G755P.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/devtools-overlay.ts"],"names":["PANEL_ID","BADGE_ID","STYLES","formatValue","val","keys","panelEl","badgeEl","isOpen","activeTab","disposeUpdate","renderKV","key","text","cls","renderStoresTab","instances","__getStoreInstances","ids","html","id","snap","renderRoutesTab","renderBody","updatePanel","body","createPanel","el","tabHtml","t","btn","b","togglePanel","createBadge","effect","store","mountDevtoolsOverlay","style","e"],"mappings":"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","file":"devtools-overlay-EQ3G755P.cjs","sourcesContent":["/**\n * DevTools visual overlay panel.\n *\n * Toggled with Ctrl+Shift+D. Self-contained DOM — no .akash components.\n * Reads store state via __getStoreInstances(), live-updates via effects.\n *\n * Dev-only: tree-shaken in production builds.\n */\n\nimport { effect } from './signals.js';\nimport { __getStoreInstances } from './store.js';\n\nconst PANEL_ID = '__akash-devtools-panel';\nconst BADGE_ID = '__akash-devtools-badge';\n\n// --- Styles ---\n\nconst STYLES = `\n#${PANEL_ID} {\n  position: fixed; bottom: 0; right: 0; width: 420px; height: 360px;\n  background: #1e1e2e; color: #cdd6f4; font-family: 'SF Mono', Consolas, monospace;\n  font-size: 12px; border-top: 2px solid #7c3aed; border-left: 2px solid #7c3aed;\n  z-index: 999999; display: flex; flex-direction: column; overflow: hidden;\n  border-radius: 8px 0 0 0; box-shadow: -4px -4px 20px rgba(0,0,0,0.4);\n}\n#${PANEL_ID} .dt-header {\n  display: flex; align-items: center; padding: 6px 10px;\n  background: #181825; border-bottom: 1px solid #313244; user-select: none;\n}\n#${PANEL_ID} .dt-header span { font-weight: 600; color: #7c3aed; flex: 1; }\n#${PANEL_ID} .dt-tabs { display: flex; gap: 2px; }\n#${PANEL_ID} .dt-tab {\n  padding: 3px 8px; border-radius: 4px; cursor: pointer; color: #6c7086;\n  background: transparent; border: none; font-size: 11px; font-family: inherit;\n}\n#${PANEL_ID} .dt-tab:hover { color: #cdd6f4; background: #313244; }\n#${PANEL_ID} .dt-tab.active { color: #cdd6f4; background: #7c3aed; }\n#${PANEL_ID} .dt-close {\n  background: none; border: none; color: #6c7086; cursor: pointer;\n  font-size: 14px; padding: 2px 6px; margin-left: 4px;\n}\n#${PANEL_ID} .dt-close:hover { color: #f38ba8; }\n#${PANEL_ID} .dt-body { flex: 1; overflow: auto; padding: 8px 10px; }\n#${PANEL_ID} .dt-store-list { display: flex; flex-direction: column; gap: 6px; }\n#${PANEL_ID} .dt-store {\n  background: #313244; border-radius: 4px; padding: 6px 8px; cursor: pointer;\n}\n#${PANEL_ID} .dt-store:hover { background: #45475a; }\n#${PANEL_ID} .dt-store-id { color: #89b4fa; font-weight: 600; margin-bottom: 4px; }\n#${PANEL_ID} .dt-kv { display: flex; gap: 6px; padding: 1px 0; }\n#${PANEL_ID} .dt-key { color: #a6adc8; }\n#${PANEL_ID} .dt-val { color: #a6e3a1; }\n#${PANEL_ID} .dt-val.str { color: #f9e2af; }\n#${PANEL_ID} .dt-val.bool { color: #fab387; }\n#${PANEL_ID} .dt-val.null { color: #6c7086; font-style: italic; }\n#${PANEL_ID} .dt-section { color: #6c7086; font-size: 10px; text-transform: uppercase; margin: 8px 0 4px; }\n#${PANEL_ID} .dt-empty { color: #6c7086; font-style: italic; padding: 20px; text-align: center; }\n#${BADGE_ID} {\n  position: fixed; bottom: 12px; right: 12px; width: 36px; height: 36px;\n  background: #7c3aed; color: white; border-radius: 50%; display: flex;\n  align-items: center; justify-content: center; cursor: pointer;\n  z-index: 999998; font-size: 16px; box-shadow: 0 2px 8px rgba(124,58,237,0.4);\n  border: none; font-family: inherit;\n}\n#${BADGE_ID}:hover { background: #6d28d9; transform: scale(1.1); }\n`;\n\n// --- Value formatting ---\n\nfunction formatValue(val: unknown): { text: string; cls: string } {\n  if (val === null) return { text: 'null', cls: 'null' };\n  if (val === undefined) return { text: 'undefined', cls: 'null' };\n  if (typeof val === 'boolean') return { text: String(val), cls: 'bool' };\n  if (typeof val === 'string') return { text: `\"${val.length > 40 ? val.slice(0, 40) + '...' : val}\"`, cls: 'str' };\n  if (typeof val === 'number') return { text: String(val), cls: '' };\n  if (Array.isArray(val)) return { text: `Array(${val.length})`, cls: '' };\n  if (typeof val === 'object') {\n    try {\n      const keys = Object.keys(val);\n      return { text: `{${keys.slice(0, 3).join(', ')}${keys.length > 3 ? ', ...' : ''}}`, cls: '' };\n    } catch { return { text: '[Object]', cls: '' }; }\n  }\n  return { text: String(val), cls: '' };\n}\n\n// --- Panel rendering ---\n\nlet panelEl: HTMLElement | null = null;\nlet badgeEl: HTMLElement | null = null;\nlet isOpen = false;\nlet activeTab = 'stores';\nlet disposeUpdate: (() => void) | null = null;\n\nfunction renderKV(key: string, val: unknown): string {\n  const { text, cls } = formatValue(val);\n  return `<div class=\"dt-kv\"><span class=\"dt-key\">${key}:</span><span class=\"dt-val ${cls}\">${text}</span></div>`;\n}\n\nfunction renderStoresTab(): string {\n  const instances = __getStoreInstances();\n  const ids = Object.keys(instances);\n  if (ids.length === 0) return '<div class=\"dt-empty\">No stores registered</div>';\n\n  let html = '<div class=\"dt-store-list\">';\n  for (const id of ids) {\n    const store = instances[id];\n    const snap = store.$snapshot();\n    html += `<div class=\"dt-store\"><div class=\"dt-store-id\">${id}</div>`;\n    for (const [key, val] of Object.entries(snap)) {\n      html += renderKV(key, val);\n    }\n    html += '</div>';\n  }\n  html += '</div>';\n  return html;\n}\n\nfunction renderRoutesTab(): string {\n  const devtools = (globalThis as any).__AKASH_DEVTOOLS__;\n  if (!devtools) return '<div class=\"dt-empty\">DevTools API not installed</div>';\n  // Route info not directly available here — show what we can\n  return '<div class=\"dt-empty\">Route info available via __AKASH_DEVTOOLS__</div>';\n}\n\nfunction renderBody(): string {\n  switch (activeTab) {\n    case 'stores': return renderStoresTab();\n    case 'routes': return renderRoutesTab();\n    default: return '<div class=\"dt-empty\">Tab not implemented</div>';\n  }\n}\n\nfunction updatePanel(): void {\n  if (!panelEl || !isOpen) return;\n  const body = panelEl.querySelector('.dt-body');\n  if (body) body.innerHTML = renderBody();\n}\n\nfunction createPanel(): HTMLElement {\n  const el = document.createElement('div');\n  el.id = PANEL_ID;\n\n  const tabs = ['stores', 'routes'];\n  const tabHtml = tabs.map(t =>\n    `<button class=\"dt-tab ${t === activeTab ? 'active' : ''}\" data-tab=\"${t}\">${t}</button>`\n  ).join('');\n\n  el.innerHTML = `\n    <div class=\"dt-header\">\n      <span>AkashJS DevTools</span>\n      <div class=\"dt-tabs\">${tabHtml}</div>\n      <button class=\"dt-close\" title=\"Close\">&times;</button>\n    </div>\n    <div class=\"dt-body\">${renderBody()}</div>\n  `;\n\n  // Tab switching\n  el.querySelectorAll('.dt-tab').forEach(btn => {\n    btn.addEventListener('click', () => {\n      activeTab = (btn as HTMLElement).dataset.tab ?? 'stores';\n      el.querySelectorAll('.dt-tab').forEach(b => b.classList.remove('active'));\n      btn.classList.add('active');\n      updatePanel();\n    });\n  });\n\n  // Close button\n  el.querySelector('.dt-close')?.addEventListener('click', () => togglePanel());\n\n  return el;\n}\n\nfunction createBadge(): HTMLElement {\n  const el = document.createElement('button');\n  el.id = BADGE_ID;\n  el.textContent = '\\u{1f527}';\n  el.title = 'AkashJS DevTools (Ctrl+Shift+D)';\n  el.addEventListener('click', () => togglePanel());\n  return el;\n}\n\nfunction togglePanel(): void {\n  if (isOpen) {\n    panelEl?.remove();\n    panelEl = null;\n    if (disposeUpdate) { disposeUpdate(); disposeUpdate = null; }\n    badgeEl!.style.display = '';\n    isOpen = false;\n  } else {\n    panelEl = createPanel();\n    document.body.appendChild(panelEl);\n    badgeEl!.style.display = 'none';\n    isOpen = true;\n\n    // Live update every time any store signal changes\n    disposeUpdate = effect(() => {\n      // Read all store signals to track them\n      const instances = __getStoreInstances();\n      for (const store of Object.values(instances)) {\n        try { store.$snapshot(); } catch { /* ignore */ }\n      }\n      // Update DOM\n      updatePanel();\n    });\n  }\n}\n\n// --- Public API ---\n\nexport function mountDevtoolsOverlay(): void {\n  if (typeof document === 'undefined' || !document.head || !document.body) return;\n\n  // Inject styles\n  const style = document.createElement('style');\n  style.textContent = STYLES;\n  document.head.appendChild(style);\n\n  // Create badge\n  badgeEl = createBadge();\n  document.body.appendChild(badgeEl);\n\n  // Keyboard shortcut: Ctrl+Shift+D\n  document.addEventListener('keydown', (e) => {\n    if (e.ctrlKey && e.shiftKey && e.key === 'D') {\n      e.preventDefault();\n      togglePanel();\n    }\n  });\n}\n"]}