@stacksjs/stx 0.2.94 → 0.2.96

package/dist/dev-server/types.js

@@ -1,2 +1,43 @@
-// @bun
-import{co as a,do as b,eo as c}from"../chunk-ca6qd1dx.js";import"../chunk-3jm3snz8.js";export{b as getMimeType,a as MIME_TYPES,c as DEFAULT_DEV_OPTIONS};
+export const MIME_TYPES = {
+  ".html": "text/html",
+  ".css": "text/css",
+  ".js": "application/javascript",
+  ".mjs": "application/javascript",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon",
+  ".webp": "image/webp",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".ttf": "font/ttf",
+  ".eot": "application/vnd.ms-fontobject",
+  ".otf": "font/otf",
+  ".mp4": "video/mp4",
+  ".webm": "video/webm",
+  ".mp3": "audio/mpeg",
+  ".wav": "audio/wav",
+  ".pdf": "application/pdf",
+  ".zip": "application/zip",
+  ".xml": "application/xml",
+  ".txt": "text/plain",
+  ".md": "text/markdown",
+  ".stx": "text/html"
+};
+export function getMimeType(ext) {
+  return MIME_TYPES[ext.toLowerCase()] || "application/octet-stream";
+}
+export const DEFAULT_DEV_OPTIONS = {
+  port: 3000,
+  watch: !0,
+  native: !1,
+  cache: !1,
+  hotReload: !0,
+  hmrPort: 3001,
+  profile: !1,
+  debugDirectives: !1,
+  titlebarHidden: !1
+};

package/dist/dev-server.js

@@ -1,2 +1,4 @@
-// @bun
-import{$n as c,Zn as a,_n as b,ao as d,bo as e}from"./chunk-qwyd9a1d.js";import"./chunk-3jm3snz8.js";export{b as serveStxFile,c as serveMultipleStxFiles,a as serveMarkdownFile,e as serveApp,d as findCommonDir};
+export { serveMarkdownFile } from "./dev-server/serve-markdown.js";
+export { serveStxFile } from "./dev-server/serve-file.js";
+export { serveMultipleStxFiles, findCommonDir } from "./dev-server/serve-multi.js";
+export { serveApp } from "./dev-server/serve-app.js";

package/dist/devtools.js

@@ -1,12 +1,281 @@
-// @bun
-import"./chunk-3jm3snz8.js";var A={enabled:!1,components:new Map,stores:new Map,events:[],performance:[],selectedComponent:null,selectedStore:null,maxEvents:1000,maxPerformance:500};function b(q={}){if(typeof window>"u")return;A.enabled=!0,A.maxEvents=q.maxEvents||1000,A.maxPerformance=q.maxPerformance||500,window.__STX_DEVTOOLS__={getState:()=>A,getComponents:()=>Array.from(A.components.values()),getComponent:(k)=>A.components.get(k),getStores:()=>Array.from(A.stores.values()),getStore:(k)=>A.stores.get(k),getEvents:()=>A.events,getPerformance:()=>A.performance,selectComponent:(k)=>M(k),selectStore:(k)=>$(k),inspectElement:(k)=>j(k),highlightComponent:(k)=>X(k),clearHighlight:()=>Y(),logComponentTree:()=>O(),logStoreState:(k)=>D(k),timeTravel:(k,z)=>H(k,z)},w(),P(),console.log("%c[STX DevTools] Enabled","color: #10b981; font-weight: bold;")}function C(){A.enabled=!1,delete window.__STX_DEVTOOLS__;let q=document.getElementById("stx-devtools-panel");if(q)q.remove();console.log("%c[STX DevTools] Disabled","color: #ef4444;")}var _=0;function y(q,k,z={},B={},F){if(!A.enabled)return"";let G=`stx-${++_}`;k.setAttribute("data-stx-component-id",G);let J,L=k.parentElement;while(L){let N=L.getAttribute("data-stx-component-id");if(N){J=N;let Q=A.components.get(J);if(Q)Q.children.push(G);break}L=L.parentElement}let Z={id:G,name:q,file:F,parentId:J,children:[],props:z,state:B,exposed:[],element:k,renderCount:1,lastRenderTime:0,createdAt:Date.now()};return A.components.set(G,Z),K({timestamp:Date.now(),type:"component:mounted",componentId:G,payload:{name:q,props:z}}),G}function g(q,k){if(!A.enabled)return;let z=A.components.get(q);if(z)z.state={...z.state,...k},z.renderCount++,K({timestamp:Date.now(),type:"component:updated",componentId:q,payload:{state:k}})}function h(q,k){if(!A.enabled)return;let z=A.components.get(q);if(z){let B={...z.props};z.props={...z.props,...k},K({timestamp:Date.now(),type:"component:props-changed",componentId:q,payload:{oldProps:B,newProps:k}})}}function R(q){if(!A.enabled)return;let k=A.components.get(q);if(k){if(k.parentId){let z=A.components.get(k.parentId);if(z)z.children=z.children.filter((B)=>B!==q)}A.components.delete(q),K({timestamp:Date.now(),type:"component:unmounted",componentId:q,payload:{name:k.name}})}}function u(q,k,z={},B=[]){if(!A.enabled)return;let F={id:q,state:k,getters:z,actions:B,history:[{timestamp:Date.now(),type:"state",name:"__init__",newValue:k}]};A.stores.set(q,F),K({timestamp:Date.now(),type:"store:registered",payload:{id:q,state:k}})}function I(q,k,z,B,F="state"){if(!A.enabled)return;let G=A.stores.get(q);if(G){let J={timestamp:Date.now(),type:F,name:k,oldValue:z,newValue:B,stack:Error().stack};if(G.history.push(J),G.history.length>100)G.history=G.history.slice(-100);if(F==="state")G.state={...G.state,[k]:B};K({timestamp:Date.now(),type:`store:${F}`,payload:{storeId:q,name:k,oldValue:z,newValue:B}})}}function m(q,k){if(!A.enabled)return;let z=A.stores.get(q);if(z)z.getters=k}function K(q){if(!A.enabled)return;if(A.events.push(q),A.events.length>A.maxEvents)A.events=A.events.slice(-A.maxEvents);if(typeof window<"u")window.dispatchEvent(new CustomEvent("stx:devtools:event",{detail:q}))}function W(q){if(!A.enabled)return;if(A.performance.push(q),A.performance.length>A.maxPerformance)A.performance=A.performance.slice(-A.maxPerformance)}function f(q,k,z){if(!A.enabled)return k();let B=performance.now(),F=k(),G=performance.now()-B;return W({name:q,duration:G,timestamp:Date.now(),componentId:z}),F}async function T(q,k,z){if(!A.enabled)return k();let B=performance.now(),F=await k(),G=performance.now()-B;return W({name:q,duration:G,timestamp:Date.now(),componentId:z}),F}function M(q){A.selectedComponent=q;let k=A.components.get(q);if(k)X(q),console.log("%c[STX DevTools] Selected component:","color: #3b82f6;",k);return k}function $(q){A.selectedStore=q;let k=A.stores.get(q);if(k)console.log("%c[STX DevTools] Selected store:","color: #8b5cf6;",k);return k}function j(q){let k=q;while(k){let z=k.getAttribute("data-stx-component-id");if(z)return M(z);k=k.parentElement}console.log("%c[STX DevTools] No component found for element","color: #f59e0b;");return}function X(q){Y();let k=A.components.get(q);if(k?.element){let z=document.createElement("div");z.id="stx-devtools-highlight",z.style.cssText=`
+const devToolsState = {
+  enabled: !1,
+  components: new Map,
+  stores: new Map,
+  events: [],
+  performance: [],
+  selectedComponent: null,
+  selectedStore: null,
+  maxEvents: 1000,
+  maxPerformance: 500
+};
+export function enableDevTools(options = {}) {
+  if (typeof window > "u")
+    return;
+  devToolsState.enabled = !0;
+  devToolsState.maxEvents = options.maxEvents || 1000;
+  devToolsState.maxPerformance = options.maxPerformance || 500;
+  window.__STX_DEVTOOLS__ = {
+    getState: () => devToolsState,
+    getComponents: () => Array.from(devToolsState.components.values()),
+    getComponent: (id) => devToolsState.components.get(id),
+    getStores: () => Array.from(devToolsState.stores.values()),
+    getStore: (id) => devToolsState.stores.get(id),
+    getEvents: () => devToolsState.events,
+    getPerformance: () => devToolsState.performance,
+    selectComponent: (id) => selectComponent(id),
+    selectStore: (id) => selectStore(id),
+    inspectElement: (element) => inspectElement(element),
+    highlightComponent: (id) => highlightComponent(id),
+    clearHighlight: () => clearHighlight(),
+    logComponentTree: () => logComponentTree(),
+    logStoreState: (id) => logStoreState(id),
+    timeTravel: (index, storeId) => timeTravel(index, storeId)
+  };
+  injectDevToolsPanel();
+  setupComponentObserver();
+  console.log("%c[STX DevTools] Enabled", "color: #10b981; font-weight: bold;");
+}
+export function disableDevTools() {
+  devToolsState.enabled = !1;
+  delete window.__STX_DEVTOOLS__;
+  const panel = document.getElementById("stx-devtools-panel");
+  if (panel)
+    panel.remove();
+  console.log("%c[STX DevTools] Disabled", "color: #ef4444;");
+}
+let componentIdCounter = 0;
+export function registerComponent(name, element, props = {}, state = {}, file) {
+  if (!devToolsState.enabled)
+    return "";
+  const id = `stx-${++componentIdCounter}`;
+  element.setAttribute("data-stx-component-id", id);
+  let parentId, parent = element.parentElement;
+  while (parent) {
+    const parentComponentId = parent.getAttribute("data-stx-component-id");
+    if (parentComponentId) {
+      parentId = parentComponentId;
+      const parentInfo = devToolsState.components.get(parentId);
+      if (parentInfo)
+        parentInfo.children.push(id);
+      break;
+    }
+    parent = parent.parentElement;
+  }
+  const info = {
+    id,
+    name,
+    file,
+    parentId,
+    children: [],
+    props,
+    state,
+    exposed: [],
+    element,
+    renderCount: 1,
+    lastRenderTime: 0,
+    createdAt: Date.now()
+  };
+  devToolsState.components.set(id, info);
+  recordEvent({
+    timestamp: Date.now(),
+    type: "component:mounted",
+    componentId: id,
+    payload: { name, props }
+  });
+  return id;
+}
+export function updateComponentState(id, state) {
+  if (!devToolsState.enabled)
+    return;
+  const info = devToolsState.components.get(id);
+  if (info) {
+    info.state = { ...info.state, ...state };
+    info.renderCount++;
+    recordEvent({
+      timestamp: Date.now(),
+      type: "component:updated",
+      componentId: id,
+      payload: { state }
+    });
+  }
+}
+export function updateComponentProps(id, props) {
+  if (!devToolsState.enabled)
+    return;
+  const info = devToolsState.components.get(id);
+  if (info) {
+    const oldProps = { ...info.props };
+    info.props = { ...info.props, ...props };
+    recordEvent({
+      timestamp: Date.now(),
+      type: "component:props-changed",
+      componentId: id,
+      payload: { oldProps, newProps: props }
+    });
+  }
+}
+export function unregisterComponent(id) {
+  if (!devToolsState.enabled)
+    return;
+  const info = devToolsState.components.get(id);
+  if (info) {
+    if (info.parentId) {
+      const parent = devToolsState.components.get(info.parentId);
+      if (parent)
+        parent.children = parent.children.filter((c) => c !== id);
+    }
+    devToolsState.components.delete(id);
+    recordEvent({
+      timestamp: Date.now(),
+      type: "component:unmounted",
+      componentId: id,
+      payload: { name: info.name }
+    });
+  }
+}
+export function registerStore(id, initialState, getters = {}, actions = []) {
+  if (!devToolsState.enabled)
+    return;
+  const info = {
+    id,
+    state: initialState,
+    getters,
+    actions,
+    history: [{
+      timestamp: Date.now(),
+      type: "state",
+      name: "__init__",
+      newValue: initialState
+    }]
+  };
+  devToolsState.stores.set(id, info);
+  recordEvent({
+    timestamp: Date.now(),
+    type: "store:registered",
+    payload: { id, state: initialState }
+  });
+}
+export function recordStoreMutation(storeId, name, oldValue, newValue, type = "state") {
+  if (!devToolsState.enabled)
+    return;
+  const store = devToolsState.stores.get(storeId);
+  if (store) {
+    const record = {
+      timestamp: Date.now(),
+      type,
+      name,
+      oldValue,
+      newValue,
+      stack: Error().stack
+    };
+    store.history.push(record);
+    if (store.history.length > 100)
+      store.history = store.history.slice(-100);
+    if (type === "state")
+      store.state = { ...store.state, [name]: newValue };
+    recordEvent({
+      timestamp: Date.now(),
+      type: `store:${type}`,
+      payload: { storeId, name, oldValue, newValue }
+    });
+  }
+}
+export function updateStoreGetters(storeId, getters) {
+  if (!devToolsState.enabled)
+    return;
+  const store = devToolsState.stores.get(storeId);
+  if (store)
+    store.getters = getters;
+}
+export function recordEvent(event) {
+  if (!devToolsState.enabled)
+    return;
+  devToolsState.events.push(event);
+  if (devToolsState.events.length > devToolsState.maxEvents)
+    devToolsState.events = devToolsState.events.slice(-devToolsState.maxEvents);
+  if (typeof window < "u")
+    window.dispatchEvent(new CustomEvent("stx:devtools:event", { detail: event }));
+}
+export function recordPerformance(metric) {
+  if (!devToolsState.enabled)
+    return;
+  devToolsState.performance.push(metric);
+  if (devToolsState.performance.length > devToolsState.maxPerformance)
+    devToolsState.performance = devToolsState.performance.slice(-devToolsState.maxPerformance);
+}
+export function measurePerformance(name, fn, componentId) {
+  if (!devToolsState.enabled)
+    return fn();
+  const start = performance.now(), result = fn(), duration = performance.now() - start;
+  recordPerformance({
+    name,
+    duration,
+    timestamp: Date.now(),
+    componentId
+  });
+  return result;
+}
+export async function measurePerformanceAsync(name, fn, componentId) {
+  if (!devToolsState.enabled)
+    return fn();
+  const start = performance.now(), result = await fn(), duration = performance.now() - start;
+  recordPerformance({
+    name,
+    duration,
+    timestamp: Date.now(),
+    componentId
+  });
+  return result;
+}
+function selectComponent(id) {
+  devToolsState.selectedComponent = id;
+  const info = devToolsState.components.get(id);
+  if (info) {
+    highlightComponent(id);
+    console.log("%c[STX DevTools] Selected component:", "color: #3b82f6;", info);
+  }
+  return info;
+}
+function selectStore(id) {
+  devToolsState.selectedStore = id;
+  const info = devToolsState.stores.get(id);
+  if (info)
+    console.log("%c[STX DevTools] Selected store:", "color: #8b5cf6;", info);
+  return info;
+}
+function inspectElement(element) {
+  let current = element;
+  while (current) {
+    const id = current.getAttribute("data-stx-component-id");
+    if (id)
+      return selectComponent(id);
+    current = current.parentElement;
+  }
+  console.log("%c[STX DevTools] No component found for element", "color: #f59e0b;");
+  return;
+}
+function highlightComponent(id) {
+  clearHighlight();
+  const info = devToolsState.components.get(id);
+  if (info?.element) {
+    const overlay = document.createElement("div");
+    overlay.id = "stx-devtools-highlight";
+    overlay.style.cssText = `
       position: absolute;
       background: rgba(59, 130, 246, 0.2);
       border: 2px solid #3b82f6;
       pointer-events: none;
       z-index: 999999;
       transition: all 0.15s ease;
-    `;let B=k.element.getBoundingClientRect();z.style.top=`${B.top+window.scrollY}px`,z.style.left=`${B.left+window.scrollX}px`,z.style.width=`${B.width}px`,z.style.height=`${B.height}px`;let F=document.createElement("div");F.style.cssText=`
+    `;
+    const rect = info.element.getBoundingClientRect();
+    overlay.style.top = `${rect.top + window.scrollY}px`;
+    overlay.style.left = `${rect.left + window.scrollX}px`;
+    overlay.style.width = `${rect.width}px`;
+    overlay.style.height = `${rect.height}px`;
+    const label = document.createElement("div");
+    label.style.cssText = `
       position: absolute;
       top: -24px;
       left: 0;
@@ -17,7 +286,104 @@ import"./chunk-3jm3snz8.js";var A={enabled:!1,components:new Map,stores:new Map,
       font-family: monospace;
       border-radius: 4px;
       white-space: nowrap;
-    `,F.textContent=`<${k.name}>`,z.appendChild(F),document.body.appendChild(z)}}function Y(){let q=document.getElementById("stx-devtools-highlight");if(q)q.remove()}function O(){console.group("%c[STX DevTools] Component Tree","color: #10b981; font-weight: bold;");let q=Array.from(A.components.values()).filter((z)=>!z.parentId);function k(z,B){let F="  ".repeat(B);if(console.log(`${F}%c<${z.name}>%c id=${z.id} renders=${z.renderCount}`,"color: #3b82f6;","color: #6b7280;"),Object.keys(z.props).length>0)console.log(`${F}  props:`,z.props);if(Object.keys(z.state).length>0)console.log(`${F}  state:`,z.state);for(let G of z.children){let J=A.components.get(G);if(J)k(J,B+1)}}for(let z of q)k(z,0);console.groupEnd()}function D(q){console.group("%c[STX DevTools] Store State","color: #8b5cf6; font-weight: bold;");let k=q?[A.stores.get(q)].filter(Boolean):Array.from(A.stores.values());for(let z of k)if(z)console.group(`Store: ${z.id}`),console.log("State:",z.state),console.log("Getters:",z.getters),console.log("Actions:",z.actions),console.log("History:",z.history),console.groupEnd();console.groupEnd()}function H(q,k){let z=A.stores.get(k);if(!z)return;if(q<0||q>=z.history.length){console.warn("[STX DevTools] Invalid history index");return}let B={};for(let F=0;F<=q;F++){let G=z.history[F];if(G.type==="state"&&G.name!=="__init__")B[G.name]=G.newValue;else if(G.name==="__init__")Object.assign(B,G.newValue)}if(console.log(`%c[STX DevTools] Time traveled to index ${q}`,"color: #f59e0b;",B),typeof window<"u"&&window.__STX_STORES__){let G=window.__STX_STORES__[k];if(G&&typeof G.$patch==="function")G.$patch(B)}}function P(){if(typeof MutationObserver>"u")return;new MutationObserver((k)=>{for(let z of k)z.removedNodes.forEach((B)=>{if(B instanceof HTMLElement){let F=B.getAttribute("data-stx-component-id");if(F)R(F);B.querySelectorAll("[data-stx-component-id]").forEach((G)=>{let J=G.getAttribute("data-stx-component-id");if(J)R(J)})}})}).observe(document.body,{childList:!0,subtree:!0})}function w(){if(typeof document>"u")return;if(document.getElementById("stx-devtools-panel"))return;let q=document.createElement("div");q.id="stx-devtools-panel",q.innerHTML=`
+    `;
+    label.textContent = `<${info.name}>`;
+    overlay.appendChild(label);
+    document.body.appendChild(overlay);
+  }
+}
+function clearHighlight() {
+  const existing = document.getElementById("stx-devtools-highlight");
+  if (existing)
+    existing.remove();
+}
+function logComponentTree() {
+  console.group("%c[STX DevTools] Component Tree", "color: #10b981; font-weight: bold;");
+  const roots = Array.from(devToolsState.components.values()).filter((c) => !c.parentId);
+  function logComponent(info, indent) {
+    const prefix = "  ".repeat(indent);
+    console.log(`${prefix}%c<${info.name}>%c id=${info.id} renders=${info.renderCount}`, "color: #3b82f6;", "color: #6b7280;");
+    if (Object.keys(info.props).length > 0)
+      console.log(`${prefix}  props:`, info.props);
+    if (Object.keys(info.state).length > 0)
+      console.log(`${prefix}  state:`, info.state);
+    for (const childId of info.children) {
+      const child = devToolsState.components.get(childId);
+      if (child)
+        logComponent(child, indent + 1);
+    }
+  }
+  for (const root of roots)
+    logComponent(root, 0);
+  console.groupEnd();
+}
+function logStoreState(storeId) {
+  console.group("%c[STX DevTools] Store State", "color: #8b5cf6; font-weight: bold;");
+  const stores = storeId ? [devToolsState.stores.get(storeId)].filter(Boolean) : Array.from(devToolsState.stores.values());
+  for (const store of stores)
+    if (store) {
+      console.group(`Store: ${store.id}`);
+      console.log("State:", store.state);
+      console.log("Getters:", store.getters);
+      console.log("Actions:", store.actions);
+      console.log("History:", store.history);
+      console.groupEnd();
+    }
+  console.groupEnd();
+}
+function timeTravel(historyIndex, storeId) {
+  const store = devToolsState.stores.get(storeId);
+  if (!store)
+    return;
+  if (historyIndex < 0 || historyIndex >= store.history.length) {
+    console.warn("[STX DevTools] Invalid history index");
+    return;
+  }
+  const reconstructed = {};
+  for (let i = 0;i <= historyIndex; i++) {
+    const record = store.history[i];
+    if (record.type === "state" && record.name !== "__init__")
+      reconstructed[record.name] = record.newValue;
+    else if (record.name === "__init__")
+      Object.assign(reconstructed, record.newValue);
+  }
+  console.log(`%c[STX DevTools] Time traveled to index ${historyIndex}`, "color: #f59e0b;", reconstructed);
+  if (typeof window < "u" && window.__STX_STORES__) {
+    const actualStore = window.__STX_STORES__[storeId];
+    if (actualStore && typeof actualStore.$patch === "function")
+      actualStore.$patch(reconstructed);
+  }
+}
+function setupComponentObserver() {
+  if (typeof MutationObserver > "u")
+    return;
+  new MutationObserver((mutations) => {
+    for (const mutation of mutations)
+      mutation.removedNodes.forEach((node) => {
+        if (node instanceof HTMLElement) {
+          const id = node.getAttribute("data-stx-component-id");
+          if (id)
+            unregisterComponent(id);
+          node.querySelectorAll("[data-stx-component-id]").forEach((child) => {
+            const childId = child.getAttribute("data-stx-component-id");
+            if (childId)
+              unregisterComponent(childId);
+          });
+        }
+      });
+  }).observe(document.body, {
+    childList: !0,
+    subtree: !0
+  });
+}
+function injectDevToolsPanel() {
+  if (typeof document > "u")
+    return;
+  if (document.getElementById("stx-devtools-panel"))
+    return;
+  const panel = document.createElement("div");
+  panel.id = "stx-devtools-panel";
+  panel.innerHTML = `
     <style>
       #stx-devtools-panel {
         position: fixed;
@@ -126,24 +492,102 @@ import"./chunk-3jm3snz8.js";var A={enabled:!1,components:new Map,stores:new Map,
     <div id="stx-devtools-content">
       <div id="stx-devtools-components-tab"></div>
     </div>
-  `,document.body.appendChild(q);let k=q.querySelector("#stx-devtools-header"),z=q.querySelector("#stx-devtools-toggle");k?.addEventListener("click",()=>{if(q.classList.toggle("open"),z)z.textContent=q.classList.contains("open")?"\u25BC":"\u25B2"});let B=q.querySelectorAll(".stx-devtools-tab");B.forEach((F)=>{F.addEventListener("click",()=>{B.forEach((G)=>G.classList.remove("active")),F.classList.add("active"),U(F.getAttribute("data-tab")||"components")})}),setInterval(()=>{let F=q.querySelector(".stx-devtools-tab.active");if(F&&q.classList.contains("open"))U(F.getAttribute("data-tab")||"components")},1000)}function U(q){let k=document.getElementById("stx-devtools-content");if(!k)return;switch(q){case"components":k.innerHTML=E();break;case"stores":k.innerHTML=V();break;case"events":k.innerHTML=x();break}k.querySelectorAll(".stx-devtools-component").forEach((z)=>{z.addEventListener("click",()=>{let B=z.getAttribute("data-id");if(B)M(B)})})}function E(){let k=Array.from(A.components.values()).filter((B)=>!B.parentId);function z(B,F){let G=B.children.map((J)=>A.components.get(J)).filter(Boolean).map((J)=>z(J,F+1)).join("");return`
-      <div class="stx-devtools-component ${A.selectedComponent===B.id?"selected":""}"
-           data-id="${B.id}"
-           style="padding-left: ${F*16+8}px">
-        <span class="stx-devtools-component-name">&lt;${B.name}&gt;</span>
-        <span class="stx-devtools-component-id">${B.id}</span>
+  `;
+  document.body.appendChild(panel);
+  const header = panel.querySelector("#stx-devtools-header"), toggle = panel.querySelector("#stx-devtools-toggle");
+  header?.addEventListener("click", () => {
+    panel.classList.toggle("open");
+    if (toggle)
+      toggle.textContent = panel.classList.contains("open") ? "\u25BC" : "\u25B2";
+  });
+  const tabs = panel.querySelectorAll(".stx-devtools-tab");
+  tabs.forEach((tab) => {
+    tab.addEventListener("click", () => {
+      tabs.forEach((t) => t.classList.remove("active"));
+      tab.classList.add("active");
+      updateDevToolsContent(tab.getAttribute("data-tab") || "components");
+    });
+  });
+  setInterval(() => {
+    const activeTab = panel.querySelector(".stx-devtools-tab.active");
+    if (activeTab && panel.classList.contains("open"))
+      updateDevToolsContent(activeTab.getAttribute("data-tab") || "components");
+  }, 1000);
+}
+function updateDevToolsContent(tab) {
+  const content = document.getElementById("stx-devtools-content");
+  if (!content)
+    return;
+  switch (tab) {
+    case "components":
+      content.innerHTML = renderComponentsTab();
+      break;
+    case "stores":
+      content.innerHTML = renderStoresTab();
+      break;
+    case "events":
+      content.innerHTML = renderEventsTab();
+      break;
+  }
+  content.querySelectorAll(".stx-devtools-component").forEach((el) => {
+    el.addEventListener("click", () => {
+      const id = el.getAttribute("data-id");
+      if (id)
+        selectComponent(id);
+    });
+  });
+}
+function renderComponentsTab() {
+  const roots = Array.from(devToolsState.components.values()).filter((c) => !c.parentId);
+  function renderTree(info, indent) {
+    const children = info.children.map((id) => devToolsState.components.get(id)).filter(Boolean).map((c) => renderTree(c, indent + 1)).join("");
+    return `
+      <div class="stx-devtools-component ${devToolsState.selectedComponent === info.id ? "selected" : ""}"
+           data-id="${info.id}"
+           style="padding-left: ${indent * 16 + 8}px">
+        <span class="stx-devtools-component-name">&lt;${info.name}&gt;</span>
+        <span class="stx-devtools-component-id">${info.id}</span>
       </div>
-      ${G}
-    `}if(k.length===0)return'<div style="color: #6b7280; padding: 8px;">No components registered</div>';return k.map((B)=>z(B,0)).join("")}function V(){let q=Array.from(A.stores.values());if(q.length===0)return'<div style="color: #6b7280; padding: 8px;">No stores registered</div>';return q.map((k)=>`
+      ${children}
+    `;
+  }
+  if (roots.length === 0)
+    return '<div style="color: #6b7280; padding: 8px;">No components registered</div>';
+  return roots.map((r) => renderTree(r, 0)).join("");
+}
+function renderStoresTab() {
+  const stores = Array.from(devToolsState.stores.values());
+  if (stores.length === 0)
+    return '<div style="color: #6b7280; padding: 8px;">No stores registered</div>';
+  return stores.map((store) => `
     <div class="stx-devtools-section">
-      <div class="stx-devtools-section-title">${k.id}</div>
-      <div class="stx-devtools-json">${JSON.stringify(k.state,null,2)}</div>
+      <div class="stx-devtools-section-title">${store.id}</div>
+      <div class="stx-devtools-json">${JSON.stringify(store.state, null, 2)}</div>
     </div>
-  `).join("")}function x(){let q=A.events.slice(-20).reverse();if(q.length===0)return'<div style="color: #6b7280; padding: 8px;">No events recorded</div>';return q.map((k)=>`
+  `).join("");
+}
+function renderEventsTab() {
+  const events = devToolsState.events.slice(-20).reverse();
+  if (events.length === 0)
+    return '<div style="color: #6b7280; padding: 8px;">No events recorded</div>';
+  return events.map((event) => `
     <div style="padding: 4px 0; border-bottom: 1px solid #374151;">
-      <span style="color: #60a5fa;">${k.type}</span>
+      <span style="color: #60a5fa;">${event.type}</span>
       <span style="color: #6b7280; font-size: 10px; margin-left: 8px;">
-        ${new Date(k.timestamp).toLocaleTimeString()}
+        ${new Date(event.timestamp).toLocaleTimeString()}
       </span>
     </div>
-  `).join("")}export{m as updateStoreGetters,g as updateComponentState,h as updateComponentProps,R as unregisterComponent,H as timeTravel,$ as selectStore,M as selectComponent,u as registerStore,y as registerComponent,I as recordStoreMutation,W as recordPerformance,K as recordEvent,T as measurePerformanceAsync,f as measurePerformance,D as logStoreState,O as logComponentTree,j as inspectElement,X as highlightComponent,b as enableDevTools,C as disableDevTools,A as devToolsState,Y as clearHighlight};
+  `).join("");
+}
+
+export {
+  devToolsState,
+  selectComponent,
+  selectStore,
+  inspectElement,
+  highlightComponent,
+  clearHighlight,
+  logComponentTree,
+  logStoreState,
+  timeTravel
+};