@walkeros/explorer 0.0.7 → 0.3.0

package/dist/index.cjs

@@ -1,2528 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
-var __export = (target, all) => {
-  for (var name2 in all)
-    __defProp(target, name2, { get: all[name2], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-
-// src/core/css-theme-system.ts
-function setElementTheme(element, theme) {
-  const htmlTheme = document.documentElement.getAttribute("data-theme");
-  if (htmlTheme && (htmlTheme === "light" || htmlTheme === "dark")) {
-    if (element instanceof HTMLElement) {
-      element.classList.add("explorer-component");
-    }
-    return;
-  }
-  if (element instanceof HTMLElement) {
-    element.setAttribute("data-theme", theme);
-  } else if (element instanceof ShadowRoot) {
-    if (element.host instanceof HTMLElement) {
-      element.host.setAttribute("data-theme", theme);
-    }
-  } else if (element instanceof DocumentFragment) {
-  }
-}
-function getElementTheme(element) {
-  const htmlTheme = document.documentElement.getAttribute("data-theme");
-  if (htmlTheme === "light" || htmlTheme === "dark") {
-    return htmlTheme;
-  }
-  const elementTheme = element.getAttribute("data-theme");
-  if (elementTheme) {
-    return elementTheme;
-  }
-  return "light";
-}
-function detectTheme() {
-  const htmlTheme = document.documentElement.getAttribute("data-theme");
-  if (htmlTheme === "light" || htmlTheme === "dark") {
-    return htmlTheme;
-  }
-  if (document.documentElement.classList.contains("dark")) {
-    return "dark";
-  }
-  if (typeof window !== "undefined" && window.matchMedia) {
-    const prefersDark = window.matchMedia(
-      "(prefers-color-scheme: dark)"
-    ).matches;
-    if (prefersDark) {
-      return "dark";
-    }
-  }
-  return "light";
-}
-function toggleElementTheme(element) {
-  const currentTheme = getElementTheme(element);
-  const newTheme = currentTheme === "light" ? "dark" : "light";
-  setElementTheme(element, newTheme);
-  return newTheme;
-}
-var CSS_THEME_VARIABLES, CSS_SYNTAX_HIGHLIGHTING;
-var init_css_theme_system = __esm({
-  "src/core/css-theme-system.ts"() {
-    "use strict";
-    CSS_THEME_VARIABLES = `
-  :root,
-  [data-theme="light"],
-  html[data-theme="light"] .explorer-component,
-  html[data-theme="light"] [class*="explorer-"] {
-    /* Base colors - transparent by default for website integration */
-    --explorer-bg-primary: transparent;
-    --explorer-bg-primary-opaque: #ffffff;
-    --explorer-bg-secondary: rgba(248, 250, 252, 0.8);
-    --explorer-bg-tertiary: rgba(241, 245, 249, 0.9);
-    --explorer-bg-input: #fafafa;
-    
-    /* Text colors */
-    --explorer-text-primary: #1f2937;
-    --explorer-text-secondary: #6b7280;
-    --explorer-text-muted: #9ca3af;
-    --explorer-text-inverse: #ffffff;
-    
-    /* Border colors */
-    --explorer-border-primary: #d1d5db;
-    --explorer-border-secondary: #e5e7eb;
-    --explorer-border-focus: #3b82f6;
-    
-    /* Action colors */
-    --explorer-primary: #3b82f6;
-    --explorer-primary-hover: #2563eb;
-    --explorer-primary-active: #1d4ed8;
-    
-    --explorer-success: #10b981;
-    --explorer-success-hover: #059669;
-    --explorer-success-active: #047857;
-    
-    --explorer-warning: #f59e0b;
-    --explorer-warning-hover: #d97706;
-    --explorer-warning-active: #b45309;
-    
-    --explorer-danger: #ef4444;
-    --explorer-danger-hover: #dc2626;
-    --explorer-danger-active: #b91c1c;
-    
-    /* Surface colors */
-    --explorer-surface-hover: #f1f5f9;
-    --explorer-surface-active: #e2e8f0;
-    --explorer-surface-selected: #dbeafe;
-    
-    /* Shadow colors */
-    --explorer-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --explorer-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    --explorer-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    
-    /* Scrollbar colors */
-    --explorer-scrollbar-track: #f1f5f9;
-    --explorer-scrollbar-thumb: #cbd5e1;
-    --explorer-scrollbar-thumb-hover: #94a3b8;
-  }
-
-  [data-theme="dark"],
-  html[data-theme="dark"] .explorer-component,
-  html[data-theme="dark"] [class*="explorer-"] {
-    /* Base colors - transparent by default for website integration */
-    --explorer-bg-primary: transparent;
-    --explorer-bg-primary-opaque: #1f2937;
-    --explorer-bg-secondary: rgba(55, 65, 81, 0.8);
-    --explorer-bg-tertiary: rgba(75, 85, 99, 0.9);
-    --explorer-bg-input: #111827;
-    
-    /* Text colors */
-    --explorer-text-primary: #f3f4f6;
-    --explorer-text-secondary: #d1d5db;
-    --explorer-text-muted: #9ca3af;
-    --explorer-text-inverse: #1f2937;
-    
-    /* Border colors */
-    --explorer-border-primary: #374151;
-    --explorer-border-secondary: #4b5563;
-    --explorer-border-focus: #3b82f6;
-    
-    /* Action colors remain the same for consistency */
-    --explorer-primary: #3b82f6;
-    --explorer-primary-hover: #2563eb;
-    --explorer-primary-active: #1d4ed8;
-    
-    --explorer-success: #10b981;
-    --explorer-success-hover: #059669;
-    --explorer-success-active: #047857;
-    
-    --explorer-warning: #f59e0b;
-    --explorer-warning-hover: #d97706;
-    --explorer-warning-active: #b45309;
-    
-    --explorer-danger: #ef4444;
-    --explorer-danger-hover: #dc2626;
-    --explorer-danger-active: #b91c1c;
-    
-    /* Surface colors */
-    --explorer-surface-hover: #374151;
-    --explorer-surface-active: #4b5563;
-    --explorer-surface-selected: #1e3a8a;
-    
-    /* Shadow colors */
-    --explorer-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-    --explorer-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
-    --explorer-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
-    
-    /* Scrollbar colors */
-    --explorer-scrollbar-track: #374151;
-    --explorer-scrollbar-thumb: #6b7280;
-    --explorer-scrollbar-thumb-hover: #9ca3af;
-  }
-`;
-    CSS_SYNTAX_HIGHLIGHTING = `
-/* Light mode - Palenight-inspired colors adapted for light backgrounds */
-.explorer-component .syntax-keyword,
-.explorer-shadow-container .syntax-keyword,
-:host .syntax-keyword { 
-  color: #ab47bc !important; 
-  font-weight: 600 !important; 
-}
-
-.explorer-component .syntax-string,
-.explorer-shadow-container .syntax-string,
-:host .syntax-string { 
-  color: #689f38 !important; 
-}
-
-.explorer-component .syntax-number,
-.explorer-shadow-container .syntax-number,
-:host .syntax-number { 
-  color: #f57c00 !important; 
-}
-
-.explorer-component .syntax-comment,
-.explorer-shadow-container .syntax-comment,
-:host .syntax-comment { 
-  color: #757575 !important; 
-  font-style: italic !important; 
-}
-
-.explorer-component .syntax-function,
-.explorer-shadow-container .syntax-function,
-:host .syntax-function {
-  color: #3f51b5 !important;
-  font-weight: 500 !important;
-}
-
-.explorer-component .syntax-tag,
-.explorer-shadow-container .syntax-tag,
-:host .syntax-tag { 
-  color: #e91e63 !important; 
-  font-weight: 600 !important; 
-}
-
-.explorer-component .syntax-attribute,
-.explorer-shadow-container .syntax-attribute,
-:host .syntax-attribute { 
-  color: #6f42c1 !important; 
-}
-
-.explorer-component .syntax-value,
-.explorer-shadow-container .syntax-value,
-:host .syntax-value { 
-  color: #032f62 !important; 
-}
-
-.explorer-component .syntax-operator,
-.explorer-shadow-container .syntax-operator,
-:host .syntax-operator { 
-  color: #d73a49 !important; 
-}
-
-.explorer-component .syntax-type,
-.explorer-shadow-container .syntax-type,
-:host .syntax-type { 
-  color: #005cc5 !important; 
-  font-weight: 500 !important; 
-}
-
-.explorer-component .syntax-property,
-.explorer-shadow-container .syntax-property,
-:host .syntax-property { 
-  color: #6f42c1 !important; 
-}
-
-/* JSON-specific styling for better readability */
-.explorer-component[data-language="json"] .syntax-string,
-.explorer-shadow-container[data-language="json"] .syntax-string,
-:host([data-language="json"]) .syntax-string { 
-  color: #22863a !important; /* GitHub green for JSON strings */
-}
-
-.explorer-component[data-language="json"] .syntax-number,
-.explorer-shadow-container[data-language="json"] .syntax-number,
-:host([data-language="json"]) .syntax-number { 
-  color: #005cc5 !important; /* GitHub blue for JSON numbers */
-}
-
-.explorer-component[data-language="json"] .syntax-property,
-.explorer-shadow-container[data-language="json"] .syntax-property,
-:host([data-language="json"]) .syntax-property { 
-  color: #032f62 !important; /* GitHub dark blue for JSON keys */
-  font-weight: 500 !important;
-}
-
-.explorer-component[data-language="json"] .syntax-keyword,
-.explorer-shadow-container[data-language="json"] .syntax-keyword,
-:host([data-language="json"]) .syntax-keyword { 
-  color: #d73a49 !important; /* GitHub red for true/false/null */
-  font-weight: 600 !important;
-}
-
-/* JSON-specific dark mode styling */
-[data-theme='dark'] .explorer-component[data-language="json"] .syntax-string,
-[data-theme='dark'] .explorer-shadow-container[data-language="json"] .syntax-string,
-:host([data-theme='dark'][data-language="json"]) .syntax-string { 
-  color: #98d982 !important; /* Softer green for dark mode JSON strings */
-}
-
-[data-theme='dark'] .explorer-component[data-language="json"] .syntax-number,
-[data-theme='dark'] .explorer-shadow-container[data-language="json"] .syntax-number,
-:host([data-theme='dark'][data-language="json"]) .syntax-number { 
-  color: #79b8ff !important; /* Softer blue for dark mode JSON numbers */
-}
-
-[data-theme='dark'] .explorer-component[data-language="json"] .syntax-property,
-[data-theme='dark'] .explorer-shadow-container[data-language="json"] .syntax-property,
-:host([data-theme='dark'][data-language="json"]) .syntax-property { 
-  color: #b392f0 !important; /* Light purple for dark mode JSON keys */
-  font-weight: 500 !important;
-}
-
-[data-theme='dark'] .explorer-component[data-language="json"] .syntax-keyword,
-[data-theme='dark'] .explorer-shadow-container[data-language="json"] .syntax-keyword,
-:host([data-theme='dark'][data-language="json"]) .syntax-keyword { 
-  color: #f97583 !important; /* Soft red for dark mode true/false/null */
-  font-weight: 600 !important;
-}
-
-/* Special highlighting for elb attributes */
-.explorer-component .syntax-elb-attribute,
-.explorer-shadow-container .syntax-elb-attribute,
-:host .syntax-elb-attribute { 
-  color: #28a745 !important; 
-  font-weight: 700 !important; 
-}
-
-.explorer-component .syntax-elb-value,
-.explorer-shadow-container .syntax-elb-value,
-:host .syntax-elb-value { 
-  color: #28a745 !important; 
-  font-weight: 500 !important; 
-}
-
-/* Dark mode - Palenight theme with higher specificity */
-[data-theme='dark'] .explorer-component .syntax-keyword,
-[data-theme='dark'] .explorer-shadow-container .syntax-keyword,
-:host([data-theme='dark']) .syntax-keyword { 
-  color: #c792ea !important; 
-}
-
-[data-theme='dark'] .explorer-component .syntax-string,
-[data-theme='dark'] .explorer-shadow-container .syntax-string,
-:host([data-theme='dark']) .syntax-string { 
-  color: #c3e88d !important; 
-}
-
-[data-theme='dark'] .explorer-component .syntax-number,
-[data-theme='dark'] .explorer-shadow-container .syntax-number,
-:host([data-theme='dark']) .syntax-number { 
-  color: #f78c6c !important; 
-}
-
-[data-theme='dark'] .explorer-component .syntax-comment,
-[data-theme='dark'] .explorer-shadow-container .syntax-comment,
-:host([data-theme='dark']) .syntax-comment { 
-  color: #676e95 !important; 
-}
-
-[data-theme='dark'] .explorer-component .syntax-function,
-[data-theme='dark'] .explorer-shadow-container .syntax-function,
-:host([data-theme='dark']) .syntax-function {
-  color: #82aaff !important;
-}
-
-[data-theme='dark'] .explorer-component .syntax-tag,
-[data-theme='dark'] .explorer-shadow-container .syntax-tag,
-:host([data-theme='dark']) .syntax-tag { 
-  color: #f07178 !important; 
-}
-
-[data-theme='dark'] .explorer-component .syntax-attribute,
-[data-theme='dark'] .explorer-shadow-container .syntax-attribute,
-:host([data-theme='dark']) .syntax-attribute { 
-  color: #ffcb6b !important; 
-}
-
-[data-theme='dark'] .explorer-component .syntax-value,
-[data-theme='dark'] .explorer-shadow-container .syntax-value,
-:host([data-theme='dark']) .syntax-value { 
-  color: #c3e88d !important; 
-}
-
-[data-theme='dark'] .explorer-component .syntax-operator,
-[data-theme='dark'] .explorer-shadow-container .syntax-operator,
-:host([data-theme='dark']) .syntax-operator { 
-  color: #89ddff !important; 
-}
-
-[data-theme='dark'] .explorer-component .syntax-type,
-[data-theme='dark'] .explorer-shadow-container .syntax-type,
-:host([data-theme='dark']) .syntax-type { 
-  color: #ffcb6b !important; 
-}
-
-[data-theme='dark'] .explorer-component .syntax-property,
-[data-theme='dark'] .explorer-shadow-container .syntax-property,
-:host([data-theme='dark']) .syntax-property { 
-  color: #82aaff !important; 
-}
-
-[data-theme='dark'] .explorer-component .syntax-elb-attribute,
-[data-theme='dark'] .explorer-shadow-container .syntax-elb-attribute,
-:host([data-theme='dark']) .syntax-elb-attribute { 
-  color: #c3e88d !important; 
-}
-
-[data-theme='dark'] .explorer-component .syntax-elb-value,
-[data-theme='dark'] .explorer-shadow-container .syntax-elb-value,
-:host([data-theme='dark']) .syntax-elb-value { 
-  color: #c3e88d !important; 
-}
-`;
-  }
-});
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  createCodeEditor: () => createCodeEditor,
-  createDestination: () => createDestination,
-  createLiveCodeJS: () => createLiveCodeJS,
-  createResultDisplay: () => createResultDisplay,
-  createSafeContext: () => createSafeContext,
-  evaluateJavaScript: () => evaluateJavaScript,
-  formatEvaluationResult: () => formatEvaluationResult,
-  name: () => name,
-  version: () => version
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/core/Component.ts
-init_css_theme_system();
-var componentRegistry = /* @__PURE__ */ new Map();
-function generateUniqueId(prefix = "explorer") {
-  const timestamp = Date.now().toString(36);
-  const random = Math.random().toString(36).substring(2, 8);
-  return `${prefix}-${timestamp}-${random}`;
-}
-function getElement(elementOrSelector) {
-  if (typeof elementOrSelector === "string") {
-    const element = document.querySelector(elementOrSelector);
-    if (!element) {
-      throw new Error(`Element not found: ${elementOrSelector}`);
-    }
-    return element;
-  }
-  return elementOrSelector;
-}
-function createComponent(elementOrSelector, options = {}) {
-  const element = getElement(elementOrSelector);
-  const existingId = element.getAttribute("data-explorer-component");
-  if (existingId && componentRegistry.has(existingId)) {
-    console.warn(
-      `Component already exists on element, destroying existing instance: ${existingId}`
-    );
-    const existingComponent = componentRegistry.get(existingId);
-    existingComponent == null ? void 0 : existingComponent.destroy();
-  }
-  const id = generateUniqueId();
-  let mounted = false;
-  let destroyed = false;
-  const eventListeners = /* @__PURE__ */ new Map();
-  const cleanupFunctions = [];
-  let shadowRoot = null;
-  if (!element.id) {
-    element.id = id;
-  }
-  element.setAttribute("data-explorer-component", id);
-  if (options.useShadowDOM && element.attachShadow) {
-    try {
-      shadowRoot = element.attachShadow({ mode: "open" });
-      const shadowContainer = document.createElement("div");
-      shadowContainer.className = "explorer-shadow-container";
-      shadowContainer.setAttribute("data-explorer-component", id);
-      shadowRoot.appendChild(shadowContainer);
-    } catch (error) {
-      console.warn(
-        "Failed to create shadow DOM, falling back to light DOM:",
-        error
-      );
-      shadowRoot = null;
-    }
-  }
-  const setupComponent = () => {
-    const targetElement = (shadowRoot == null ? void 0 : shadowRoot.firstElementChild) || element;
-    targetElement.classList.add("explorer-component");
-  };
-  const api = {
-    id,
-    mount() {
-      if (mounted || destroyed) return;
-      mounted = true;
-      setupComponent();
-      if (options.className) {
-        element.classList.add(options.className);
-      }
-      if (options.theme) {
-        if (options.theme === "auto") {
-          const detectedTheme = detectTheme();
-          setElementTheme(element, detectedTheme);
-        } else {
-          setElementTheme(element, options.theme);
-        }
-      }
-      api.emit("mount");
-    },
-    unmount() {
-      if (!mounted || destroyed) return;
-      mounted = false;
-      api.emit("unmount");
-    },
-    destroy() {
-      if (destroyed) return;
-      destroyed = true;
-      if (mounted) {
-        api.unmount();
-      }
-      api.emit("destroy");
-      eventListeners.clear();
-      cleanupFunctions.forEach((cleanup) => cleanup());
-      cleanupFunctions.length = 0;
-      element.removeAttribute("data-explorer-component");
-      element.classList.remove("explorer-component");
-      if (shadowRoot) {
-        shadowRoot.innerHTML = "";
-        shadowRoot = null;
-      }
-      componentRegistry.delete(id);
-    },
-    on(event, handler) {
-      if (!eventListeners.has(event)) {
-        eventListeners.set(event, /* @__PURE__ */ new Set());
-      }
-      const handlers = eventListeners.get(event);
-      handlers.add(handler);
-      return () => {
-        handlers.delete(handler);
-        if (handlers.size === 0) {
-          eventListeners.delete(event);
-        }
-      };
-    },
-    emit(event, data) {
-      const handlers = eventListeners.get(event);
-      if (!handlers) return;
-      handlers.forEach((handler) => {
-        try {
-          handler(data, api);
-        } catch (error) {
-          console.error(`Error in event handler for '${event}':`, error);
-        }
-      });
-    },
-    getElement() {
-      return destroyed ? null : element;
-    },
-    getShadowRoot() {
-      return destroyed ? null : shadowRoot;
-    },
-    getContentRoot() {
-      if (destroyed) return element;
-      return (shadowRoot == null ? void 0 : shadowRoot.firstElementChild) || element;
-    },
-    injectCSS(css, id2) {
-      if (destroyed) return;
-      const targetRoot = shadowRoot || document.head;
-      const styleId = id2 || `explorer-css-${api.id}`;
-      const existingStyle = targetRoot.querySelector(`#${styleId}`);
-      if (existingStyle) {
-        existingStyle.remove();
-      }
-      const style = document.createElement("style");
-      style.id = styleId;
-      style.textContent = css;
-      if (shadowRoot) {
-        shadowRoot.appendChild(style);
-      } else {
-        document.head.appendChild(style);
-      }
-    }
-  };
-  componentRegistry.set(id, api);
-  if (options.autoMount !== false) {
-    api.mount();
-  }
-  return api;
-}
-
-// src/utils/dom.ts
-function createElement(tagName, attributes = {}, styles = {}) {
-  const element = document.createElement(tagName);
-  Object.entries(attributes).forEach(([key, value]) => {
-    if (key === "className") {
-      element.className = value;
-    } else if (key === "textContent") {
-      element.textContent = value;
-    } else if (key === "innerHTML") {
-      element.innerHTML = value;
-    } else {
-      element.setAttribute(key, value);
-    }
-  });
-  Object.entries(styles).forEach(([property, value]) => {
-    element.style[property] = value;
-  });
-  return element;
-}
-function addEventListener(element, event, handler, options) {
-  element.addEventListener(event, handler, options);
-  return () => {
-    element.removeEventListener(
-      event,
-      handler,
-      options
-    );
-  };
-}
-function injectCSS(css, id, target) {
-  const targetDocument = target || document;
-  const targetHead = target instanceof ShadowRoot ? target : target instanceof HTMLElement ? target : document.head;
-  if (id) {
-    const existing = targetDocument.querySelector ? targetDocument.querySelector(`#${id}`) : document.getElementById(id);
-    if (existing) {
-      existing.remove();
-    }
-  }
-  const style = createElement("style", __spreadValues({
-    type: "text/css"
-  }, id && { id }));
-  style.textContent = css;
-  targetHead.appendChild(style);
-  return style;
-}
-function injectComponentCSS(css, id, shadowRoot, scopePrefix) {
-  let scopedCSS = css;
-  if (!shadowRoot && scopePrefix) {
-    scopedCSS = css.replace(/(\.explorer-[\w-]+)/g, `${scopePrefix} $1`);
-  }
-  const target = shadowRoot || document;
-  return injectCSS(scopedCSS, id, target);
-}
-
-// src/core/UnifiedHeader.ts
-function createUnifiedHeader(options) {
-  let currentTitle = options.title;
-  let headerElement;
-  let titleElement;
-  let actionsElement;
-  const cleanupFunctions = [];
-  const shadowRoot = options.shadowRoot || null;
-  function injectStyles() {
-    const css = `
-/* UnifiedHeader Component Styles */
-.explorer-unified-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  background: var(--explorer-bg-tertiary, #f9fafb);
-  border-bottom: 1px solid var(--explorer-border-primary, #e5e7eb);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--explorer-text-secondary, #6b7280);
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.explorer-unified-header__title {
-  flex: 1;
-  color: var(--explorer-text-secondary, #6b7280);
-  font-weight: 600;
-  font-size: 12px;
-  margin: 0;
-  padding: 0;
-}
-
-.explorer-unified-header__actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: auto;
-}
-
-.explorer-unified-header__btn {
-  background: none;
-  border: 1px solid var(--explorer-border-primary, #e5e7eb);
-  color: var(--explorer-text-secondary, #6b7280);
-  cursor: pointer;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 10px;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  line-height: 1.2;
-  min-width: auto;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.explorer-unified-header__btn:hover {
-  background: var(--explorer-interactive-hover, #f3f4f6);
-  color: var(--explorer-text-primary, #111827);
-  border-color: var(--explorer-border-secondary, #d1d5db);
-}
-
-.explorer-unified-header__btn:active {
-  background: var(--explorer-interactive-active, #e5e7eb);
-}
-
-.explorer-unified-header__btn--clear {
-  /* Specific styling for clear button if needed */
-}
-
-.explorer-unified-header__btn--copy {
-  /* Specific styling for copy button if needed */
-}
-
-.explorer-unified-header__btn--refresh {
-  /* Specific styling for refresh button if needed */
-}
-
-.explorer-unified-header__btn--theme {
-  /* Specific styling for theme toggle button */
-  font-size: 12px;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .explorer-unified-header {
-    padding: 6px 10px;
-    min-height: 28px;
-  }
-  
-  .explorer-unified-header__btn {
-    padding: 1px 4px;
-    font-size: 9px;
-    height: 18px;
-  }
-}
-`;
-    injectComponentCSS(
-      css,
-      "explorer-unified-header-styles",
-      shadowRoot,
-      ".explorer-unified-header"
-    );
-  }
-  function createButtons(opts) {
-    const buttons = [];
-    if (opts.onClear) {
-      const clearBtn = createElement("button", {
-        className: "explorer-unified-header__btn explorer-unified-header__btn--clear",
-        textContent: "Clear",
-        title: "Clear content"
-      });
-      cleanupFunctions.push(addEventListener(clearBtn, "click", opts.onClear));
-      buttons.push(clearBtn);
-    }
-    if (opts.onCopy) {
-      const copyBtn = createElement("button", {
-        className: "explorer-unified-header__btn explorer-unified-header__btn--copy",
-        textContent: "\u{1F4CB}",
-        title: "Copy content"
-      });
-      cleanupFunctions.push(addEventListener(copyBtn, "click", opts.onCopy));
-      buttons.push(copyBtn);
-    }
-    if (opts.onRefresh) {
-      const refreshBtn = createElement("button", {
-        className: "explorer-unified-header__btn explorer-unified-header__btn--refresh",
-        textContent: "\u{1F504}",
-        title: "Refresh"
-      });
-      cleanupFunctions.push(
-        addEventListener(refreshBtn, "click", opts.onRefresh)
-      );
-      buttons.push(refreshBtn);
-    }
-    if (opts.onThemeToggle) {
-      const themeBtn = createElement("button", {
-        className: "explorer-unified-header__btn explorer-unified-header__btn--theme",
-        textContent: "\u{1F319}",
-        title: "Toggle theme"
-      });
-      cleanupFunctions.push(
-        addEventListener(themeBtn, "click", opts.onThemeToggle)
-      );
-      buttons.push(themeBtn);
-    }
-    if (opts.customButtons) {
-      opts.customButtons.forEach((buttonConfig) => {
-        const customBtn = createElement("button", {
-          className: `explorer-unified-header__btn ${buttonConfig.className || ""}`,
-          textContent: buttonConfig.text,
-          title: buttonConfig.title || buttonConfig.text
-        });
-        cleanupFunctions.push(
-          addEventListener(customBtn, "click", buttonConfig.callback)
-        );
-        buttons.push(customBtn);
-      });
-    }
-    return buttons;
-  }
-  function createDOM() {
-    headerElement = createElement("div", {
-      className: `explorer-unified-header ${options.className || ""}`
-    });
-    titleElement = createElement("div", {
-      className: "explorer-unified-header__title",
-      textContent: currentTitle
-    });
-    actionsElement = createElement("div", {
-      className: "explorer-unified-header__actions"
-    });
-    const buttons = createButtons(options);
-    buttons.forEach((button) => actionsElement.appendChild(button));
-    headerElement.appendChild(titleElement);
-    headerElement.appendChild(actionsElement);
-    return headerElement;
-  }
-  function updateButtons(newOptions) {
-    actionsElement.innerHTML = "";
-    cleanupFunctions.forEach((cleanup) => cleanup());
-    cleanupFunctions.length = 0;
-    const mergedOptions = __spreadValues(__spreadValues({}, options), newOptions);
-    const buttons = createButtons(mergedOptions);
-    buttons.forEach((button) => actionsElement.appendChild(button));
-    Object.assign(options, newOptions);
-  }
-  const api = {
-    getElement() {
-      return headerElement;
-    },
-    setTitle(title) {
-      currentTitle = title;
-      titleElement.textContent = title;
-    },
-    updateButtons(newOptions) {
-      updateButtons(newOptions);
-    },
-    destroy() {
-      cleanupFunctions.forEach((cleanup) => cleanup());
-      cleanupFunctions.length = 0;
-      headerElement == null ? void 0 : headerElement.remove();
-    }
-  };
-  injectStyles();
-  createDOM();
-  return api;
-}
-
-// src/core/UnifiedContainer.ts
-function createUnifiedContainer(options = {}) {
-  let containerElement;
-  let contentElement;
-  let headerAPI = null;
-  const shadowRoot = options.shadowRoot || null;
-  function injectStyles() {
-    const css = `
-/* UnifiedContainer Component Styles */
-.explorer-unified-container {
-  display: flex;
-  flex-direction: column;
-  background: var(--explorer-bg-primary);
-  border: 1px solid var(--explorer-border-primary, #e5e7eb);
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  transition: all 0.2s ease;
-}
-
-
-.explorer-unified-container:focus-within {
-  border-color: var(--explorer-interactive-primary, #2563eb);
-  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-}
-
-.explorer-unified-container__content {
-  flex: 1;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  background: transparent;
-}
-
-/* Specific container variants */
-.explorer-unified-container--code-editor {
-  /* Specific styling for code editor containers */
-}
-
-.explorer-unified-container--result-display {
-  /* Specific styling for result display containers */
-}
-
-.explorer-unified-container--preview {
-  /* Specific styling for preview containers */
-}
-
-.explorer-unified-container--destination {
-  /* Specific styling for destination containers */
-}
-
-/* Height management */
-.explorer-unified-container--fixed-height {
-  height: var(--container-height);
-}
-
-.explorer-unified-container--flex-height {
-  flex: 1;
-  min-height: 0;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .explorer-unified-container {
-    border-radius: 6px;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  }
-}
-`;
-    injectComponentCSS(
-      css,
-      "explorer-unified-container-styles",
-      shadowRoot,
-      ".explorer-unified-container"
-    );
-  }
-  function createDOM() {
-    containerElement = createElement("div", {
-      className: `explorer-unified-container ${options.className || ""}`
-    });
-    if (options.height) {
-      containerElement.style.setProperty("--container-height", options.height);
-      containerElement.classList.add(
-        "explorer-unified-container--fixed-height"
-      );
-    } else {
-      containerElement.classList.add("explorer-unified-container--flex-height");
-    }
-    if (options.showHeader && options.headerOptions) {
-      const headerOptions = __spreadProps(__spreadValues({}, options.headerOptions), { shadowRoot });
-      headerAPI = createUnifiedHeader(headerOptions);
-      containerElement.appendChild(headerAPI.getElement());
-    }
-    contentElement = createElement("div", {
-      className: `explorer-unified-container__content ${options.contentClassName || ""}`
-    });
-    containerElement.appendChild(contentElement);
-    return containerElement;
-  }
-  const api = {
-    getElement() {
-      return containerElement;
-    },
-    getContentElement() {
-      return contentElement;
-    },
-    getHeader() {
-      return headerAPI;
-    },
-    setHeight(height) {
-      containerElement.style.setProperty("--container-height", height);
-      if (!containerElement.classList.contains(
-        "explorer-unified-container--fixed-height"
-      )) {
-        containerElement.classList.remove(
-          "explorer-unified-container--flex-height"
-        );
-        containerElement.classList.add(
-          "explorer-unified-container--fixed-height"
-        );
-      }
-    },
-    destroy() {
-      headerAPI == null ? void 0 : headerAPI.destroy();
-      containerElement == null ? void 0 : containerElement.remove();
-    }
-  };
-  injectStyles();
-  createDOM();
-  return api;
-}
-
-// src/core/MultiColumnLayout.ts
-init_css_theme_system();
-
-// src/utils/syntax.ts
-var languageDefinitions = {
-  javascript: [
-    {
-      type: "comment",
-      pattern: /\/\*[\s\S]*?\*\/|\/\/.*$/gm,
-      className: "syntax-comment"
-    },
-    {
-      type: "string",
-      pattern: /"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`/g,
-      className: "syntax-string"
-    },
-    {
-      type: "keyword",
-      pattern: /\b(?:async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|export|extends|finally|for|function|if|import|in|instanceof|let|new|return|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/g,
-      className: "syntax-keyword"
-    },
-    {
-      type: "boolean",
-      pattern: /\b(?:true|false|null|undefined)\b/g,
-      className: "syntax-keyword"
-    },
-    {
-      type: "number",
-      pattern: /\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/g,
-      className: "syntax-number"
-    },
-    {
-      type: "function",
-      pattern: /\b[a-zA-Z_$][a-zA-Z0-9_$]*(?=\s*\()/g,
-      className: "syntax-function"
-    },
-    {
-      type: "operator",
-      pattern: /[+\-*/%=!<>?:&|^~]+|===|!==|==|!=|<=|>=|\|\||&&|\+\+|--|=>|\.\.\./g,
-      className: "syntax-operator"
-    }
-  ],
-  typescript: [
-    {
-      type: "comment",
-      pattern: /\/\*[\s\S]*?\*\/|\/\/.*$/gm,
-      className: "syntax-comment"
-    },
-    {
-      type: "string",
-      pattern: /"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`/g,
-      className: "syntax-string"
-    },
-    {
-      type: "keyword",
-      pattern: /\b(?:abstract|any|as|async|await|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|namespace|new|private|protected|public|readonly|return|set|static|string|super|switch|this|throw|try|type|typeof|var|void|while|with|yield)\b/g,
-      className: "syntax-keyword"
-    },
-    {
-      type: "boolean",
-      pattern: /\b(?:true|false|null|undefined)\b/g,
-      className: "syntax-keyword"
-    },
-    {
-      type: "number",
-      pattern: /\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/g,
-      className: "syntax-number"
-    },
-    {
-      type: "function",
-      pattern: /\b[a-zA-Z_$][a-zA-Z0-9_$]*(?=\s*\()/g,
-      className: "syntax-function"
-    },
-    {
-      type: "type",
-      pattern: /\b[A-Z][a-zA-Z0-9]*\b/g,
-      className: "syntax-type"
-    },
-    {
-      type: "operator",
-      pattern: /[+\-*/%=!<>?:&|^~]+|===|!==|==|!=|<=|>=|\|\||&&|\+\+|--|=>|\.\.\./g,
-      className: "syntax-operator"
-    }
-  ],
-  html: [
-    {
-      type: "comment",
-      pattern: /<!--[\s\S]*?-->/g,
-      className: "syntax-comment"
-    },
-    {
-      type: "tag",
-      pattern: /<\/?[a-zA-Z][a-zA-Z0-9-]*\b/g,
-      className: "syntax-tag"
-    },
-    {
-      type: "elb-attribute",
-      pattern: /\bdata-elb[a-zA-Z-]*(?==)/g,
-      className: "syntax-elb-attribute"
-    },
-    {
-      type: "elb-value",
-      pattern: new RegExp(`(?<=data-elb[a-zA-Z-]*=)"[^"]*"|(?<=data-elb[a-zA-Z-]*=)'[^']*'`, "g"),
-      className: "syntax-elb-value"
-    },
-    {
-      type: "attribute",
-      pattern: /\b[a-zA-Z-]+(?==)/g,
-      className: "syntax-attribute"
-    },
-    { type: "value", pattern: /"[^"]*"|'[^']*'/g, className: "syntax-value" }
-  ],
-  json: [
-    {
-      type: "key",
-      pattern: /"(?:\\.|[^"\\])*"(?=\s*:)/g,
-      className: "syntax-attribute"
-    },
-    {
-      type: "string",
-      pattern: /"(?:\\.|[^"\\])*"/g,
-      className: "syntax-string"
-    },
-    {
-      type: "number",
-      pattern: /-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/g,
-      className: "syntax-number"
-    },
-    {
-      type: "boolean",
-      pattern: /\b(true|false|null)\b/g,
-      className: "syntax-keyword"
-    }
-  ],
-  css: [
-    {
-      type: "comment",
-      pattern: /\/\*[\s\S]*?\*\//g,
-      className: "syntax-comment"
-    },
-    {
-      type: "selector",
-      pattern: /[.#]?[a-zA-Z][\w-]*(?=\s*\{)/g,
-      className: "syntax-tag"
-    },
-    {
-      type: "property",
-      pattern: new RegExp("(?<=\\{|\\;)\\s*[a-zA-Z-]+(?=\\s*:)", "g"),
-      className: "syntax-property"
-    },
-    {
-      type: "value",
-      pattern: new RegExp("(?<=:\\s*)[^;}]+", "g"),
-      className: "syntax-string"
-    },
-    {
-      type: "unit",
-      pattern: /\b\d+(?:px|em|rem|%|vh|vw|pt|pc|in|cm|mm|ex|ch|fr)\b/g,
-      className: "syntax-number"
-    },
-    {
-      type: "color",
-      pattern: /#[0-9a-fA-F]{3,6}\b|rgb\([^)]+\)|rgba\([^)]+\)|hsl\([^)]+\)|hsla\([^)]+\)/g,
-      className: "syntax-number"
-    }
-  ],
-  text: []
-};
-function highlightSyntax(code, language = "text") {
-  if (language === "text" || !code.trim()) {
-    return escapeHtml(code);
-  }
-  const definition = languageDefinitions[language];
-  if (!definition) {
-    return escapeHtml(code);
-  }
-  const matches = [];
-  definition.forEach(({ type, pattern, className }) => {
-    let match;
-    while ((match = pattern.exec(code)) !== null) {
-      matches.push({
-        start: match.index,
-        end: match.index + match[0].length,
-        type,
-        className,
-        content: match[0]
-      });
-    }
-  });
-  matches.sort((a, b) => a.start - b.start);
-  const filteredMatches = [];
-  let lastEnd = 0;
-  for (const match of matches) {
-    if (match.start >= lastEnd) {
-      filteredMatches.push(match);
-      lastEnd = match.end;
-    }
-  }
-  let result = "";
-  let currentPos = 0;
-  for (const match of filteredMatches) {
-    if (match.start > currentPos) {
-      result += escapeHtml(code.slice(currentPos, match.start));
-    }
-    result += `<span class="${match.className}">${escapeHtml(match.content)}</span>`;
-    currentPos = match.end;
-  }
-  if (currentPos < code.length) {
-    result += escapeHtml(code.slice(currentPos));
-  }
-  return result;
-}
-function escapeHtml(text) {
-  const map = {
-    "&": "&amp;",
-    "<": "&lt;",
-    ">": "&gt;",
-    '"': "&quot;",
-    "'": "&#39;"
-  };
-  return text.replace(/[&<>"']/g, (char) => map[char]);
-}
-
-// src/utils/debounce.ts
-function debounce(func, delay, immediate = false) {
-  let timeoutId;
-  let lastArgs;
-  let lastResult;
-  const debounced = (...args) => {
-    lastArgs = args;
-    const callNow = immediate && !timeoutId;
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      timeoutId = void 0;
-      if (!immediate) {
-        lastResult = func(...args);
-      }
-    }, delay);
-    if (callNow) {
-      lastResult = func(...args);
-    }
-  };
-  debounced.cancel = () => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-      timeoutId = void 0;
-    }
-  };
-  debounced.flush = () => {
-    if (timeoutId && lastArgs) {
-      debounced.cancel();
-      lastResult = func(...lastArgs);
-    }
-    return lastResult;
-  };
-  return debounced;
-}
-
-// src/components/CodeEditor.ts
-var CODE_EDITOR_CSS = `
-/* CodeEditor Component Styles */
-.explorer-code-editor {
-  position: relative;
-  background: var(--explorer-bg-primary);
-  overflow: hidden;
-  font-family: 'Fira Code', 'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-}
-
-.explorer-code-editor * {
-  box-sizing: border-box;
-}
-
-.explorer-code-editor:focus-within {
-  border-color: var(--explorer-primary);
-  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-}
-
-.explorer-code-editor--readonly {
-  background: var(--explorer-bg-tertiary);
-}
-
-.explorer-code-editor__content {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.explorer-code-editor__textarea {
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  padding: 4px !important;
-  margin: 0 !important;
-  border: none !important;
-  outline: none !important;
-  background: transparent !important;
-  color: transparent !important;
-  font-family: 'Fira Code', 'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace !important;
-  font-size: 14px !important;
-  line-height: 1.6 !important;
-  resize: none !important;
-  z-index: 2 !important;
-  white-space: pre !important;
-  overflow-wrap: normal !important;
-  word-break: normal !important;
-  caret-color: var(--explorer-text-primary) !important;
-  box-sizing: border-box !important;
-  /* Force cursor visibility and animation */
-  cursor: text !important;
-}
-
-.explorer-code-editor__textarea::placeholder {
-  color: var(--explorer-text-muted);
-  font-style: italic;
-}
-
-/* Ensure cursor animation is enabled */
-.explorer-code-editor__textarea:focus {
-  caret-color: var(--explorer-text-primary) !important;
-  animation: none !important; /* Remove any conflicting animations */
-}
-
-/* Force caret visibility across browsers */
-@supports (caret-color: var(--explorer-text-primary)) {
-  .explorer-code-editor__textarea {
-    caret-color: var(--explorer-text-primary) !important;
-  }
-}
-
-/* Fallback for browsers that don't support caret-color */
-@supports not (caret-color: var(--explorer-text-primary)) {
-  .explorer-code-editor__textarea {
-    color: var(--explorer-text-primary) !important;
-    text-shadow: none !important;
-    background: transparent !important;
-  }
-  .explorer-code-editor__highlight {
-    display: none !important;
-  }
-}
-
-.explorer-code-editor__highlight {
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  padding: 4px !important;
-  margin: 0 !important;
-  border: none !important;
-  background: transparent !important;
-  color: var(--explorer-text-primary) !important;
-  font-family: 'Fira Code', 'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace !important;
-  font-size: 14px !important;
-  line-height: 1.6 !important;
-  white-space: pre !important;
-  overflow-wrap: normal !important;
-  word-break: normal !important;
-  z-index: 1 !important;
-  pointer-events: none !important;
-  overflow: auto !important;
-  box-sizing: border-box !important;
-}
-
-.explorer-code-editor__highlight pre {
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  color: var(--explorer-text-primary);
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .explorer-code-editor__textarea,
-  .explorer-code-editor__highlight {
-    font-size: 13px;
-    padding: 4px;
-  }
-}
-`;
-function createCodeEditor(elementOrSelector, options = {}) {
-  const baseComponent = createComponent(elementOrSelector, {
-    autoMount: false,
-    useShadowDOM: false
-    // No shadow DOM - parent layout provides CSS isolation
-  });
-  const element = baseComponent.getElement();
-  const shadowRoot = baseComponent.getShadowRoot();
-  const contentRoot = baseComponent.getContentRoot();
-  element.classList.add("explorer-code-editor");
-  contentRoot.classList.add("explorer-code-editor");
-  let currentValue = options.value || "";
-  let currentLanguage = options.language || "text";
-  let textArea;
-  let highlightLayer;
-  let isHighlighting = false;
-  let lastHighlightedValue = "";
-  const cleanupFunctions = [];
-  const debouncedHighlight = debounce(() => {
-    updateHighlighting();
-  }, 20);
-  const debouncedChange = debounce((value) => {
-    var _a;
-    (_a = options.onChange) == null ? void 0 : _a.call(options, value, currentLanguage);
-  }, 200);
-  function injectStyles() {
-  }
-  function createDOM() {
-    contentRoot.innerHTML = "";
-    const content = createElement("div", {
-      className: "explorer-code-editor__content"
-    });
-    if (options.height) {
-      content.style.height = options.height;
-    } else if (options.maxHeight) {
-      content.style.maxHeight = options.maxHeight;
-      content.style.overflow = "auto";
-    } else {
-      content.style.height = "100%";
-    }
-    textArea = createElement("textarea", {
-      className: "explorer-code-editor__textarea",
-      placeholder: options.placeholder || `Enter ${currentLanguage} code...`,
-      spellcheck: "false",
-      autocomplete: "off",
-      autocorrect: "off",
-      autocapitalize: "off"
-    });
-    if (options.readOnly) {
-      textArea.readOnly = true;
-      element.classList.add("explorer-code-editor--readonly");
-    }
-    if (options.tabSize) {
-      textArea.style.tabSize = options.tabSize.toString();
-    }
-    if (options.fontSize) {
-      textArea.style.fontSize = options.fontSize;
-    }
-    textArea.value = currentValue;
-    highlightLayer = createElement("div", {
-      className: "explorer-code-editor__highlight"
-    });
-    content.appendChild(highlightLayer);
-    content.appendChild(textArea);
-    contentRoot.appendChild(content);
-  }
-  function updateHighlighting() {
-    if (isHighlighting || currentValue === lastHighlightedValue) return;
-    isHighlighting = true;
-    requestAnimationFrame(() => {
-      const highlighted = highlightSyntax(currentValue, currentLanguage);
-      highlightLayer.innerHTML = `<pre>${highlighted}</pre>`;
-      lastHighlightedValue = currentValue;
-      isHighlighting = false;
-    });
-  }
-  function setupEventListeners() {
-    const onInput = () => {
-      const newValue = textArea.value;
-      if (newValue !== currentValue) {
-        currentValue = newValue;
-        debouncedHighlight();
-        debouncedChange(newValue);
-      }
-    };
-    const onKeyDown = (e) => {
-      if (e.key === "Tab") {
-        e.preventDefault();
-        const start = textArea.selectionStart;
-        const end = textArea.selectionEnd;
-        const tabChar = " ".repeat(options.tabSize || 2);
-        textArea.value = currentValue.substring(0, start) + tabChar + currentValue.substring(end);
-        textArea.selectionStart = textArea.selectionEnd = start + tabChar.length;
-        onInput();
-      }
-    };
-    const onScroll = () => {
-      highlightLayer.scrollTop = textArea.scrollTop;
-      highlightLayer.scrollLeft = textArea.scrollLeft;
-    };
-    const onClick = () => {
-      textArea.focus();
-    };
-    cleanupFunctions.push(addEventListener(textArea, "input", onInput));
-    cleanupFunctions.push(addEventListener(textArea, "keydown", onKeyDown));
-    cleanupFunctions.push(addEventListener(textArea, "scroll", onScroll));
-    cleanupFunctions.push(addEventListener(contentRoot, "click", onClick));
-    cleanupFunctions.push(addEventListener(highlightLayer, "click", onClick));
-  }
-  const api = __spreadProps(__spreadValues({}, baseComponent), {
-    getValue() {
-      return currentValue;
-    },
-    setValue(value) {
-      currentValue = value;
-      textArea.value = value;
-      updateHighlighting();
-    },
-    getLanguage() {
-      return currentLanguage;
-    },
-    setLanguage(language) {
-      var _a;
-      currentLanguage = language;
-      textArea.placeholder = options.placeholder || `Enter ${language} code...`;
-      updateHighlighting();
-      (_a = options.onLanguageChange) == null ? void 0 : _a.call(options, language);
-    },
-    focus() {
-      textArea.focus();
-    },
-    selectAll() {
-      textArea.select();
-    },
-    insertText(text) {
-      var _a;
-      const start = textArea.selectionStart;
-      const end = textArea.selectionEnd;
-      const newValue = currentValue.substring(0, start) + text + currentValue.substring(end);
-      this.setValue(newValue);
-      textArea.selectionStart = textArea.selectionEnd = start + text.length;
-      textArea.focus();
-      (_a = options.onChange) == null ? void 0 : _a.call(options, newValue, currentLanguage);
-    },
-    getSelection() {
-      const start = textArea.selectionStart;
-      const end = textArea.selectionEnd;
-      return {
-        start,
-        end,
-        text: currentValue.substring(start, end)
-      };
-    },
-    destroy() {
-      cleanupFunctions.forEach((cleanup) => cleanup());
-      cleanupFunctions.length = 0;
-      baseComponent.destroy();
-    }
-  });
-  injectStyles();
-  createDOM();
-  setupEventListeners();
-  updateHighlighting();
-  api.mount();
-  setTimeout(() => {
-    if (!options.readOnly) {
-      textArea.focus();
-    }
-  }, 100);
-  return api;
-}
-
-// src/components/ResultDisplay.ts
-var RESULT_DISPLAY_CSS = `
-/* ResultDisplay Component Styles */
-.explorer-result-display {
-  background: var(--explorer-bg-primary);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.explorer-result-display * {
-  box-sizing: border-box;
-}
-
-.explorer-result-display__content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4px;
-  font-family: 'Fira Code', 'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace;
-  font-size: 13px;
-  line-height: 1.4;
-}
-
-.explorer-result-display__empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100px;
-  color: var(--explorer-text-muted);
-  font-style: italic;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-.explorer-result-item__content {
-  color: var(--explorer-text-primary);
-  word-break: break-word;
-  padding: 0;
-  margin: 0;
-}
-
-.explorer-result-item__content pre {
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  border: none;
-  font-family: inherit;
-  font-size: inherit;
-  white-space: pre-wrap;
-}
-
-.explorer-result-item__content--json {
-}
-
-.explorer-result-item__content--error {
-  color: var(--explorer-danger);
-}
-
-.explorer-result-item__content--collapsed {
-  max-height: 100px;
-  overflow: hidden;
-  position: relative;
-}
-
-.explorer-result-item__content--collapsed::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 20px;
-  background: linear-gradient(transparent, var(--explorer-bg-secondary));
-}
-
-.explorer-result-item__expand-btn {
-  background: none;
-  border: none;
-  color: var(--explorer-primary);
-  cursor: pointer;
-  font-size: 11px;
-  margin-top: 4px;
-  text-decoration: underline;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .explorer-result-display__content {
-    font-size: 12px;
-    padding: 4px;
-  }
-  
-  .explorer-result-item {
-    padding: 4px;
-    margin-bottom: 8px;
-  }
-}
-`;
-function createResultDisplay(elementOrSelector, options = {}) {
-  const baseComponent = createComponent(elementOrSelector, {
-    autoMount: false,
-    useShadowDOM: false
-    // No shadow DOM - parent layout provides CSS isolation
-  });
-  const element = baseComponent.getElement();
-  const shadowRoot = baseComponent.getShadowRoot();
-  const contentRoot = baseComponent.getContentRoot();
-  element.classList.add("explorer-result-display");
-  contentRoot.classList.add("explorer-result-display");
-  let results = [];
-  let contentContainer;
-  const cleanupFunctions = [];
-  function injectStyles() {
-  }
-  function createDOM() {
-    contentRoot.innerHTML = "";
-    contentContainer = createElement("div", {
-      className: "explorer-result-display__content"
-    });
-    if (options.height) {
-      contentContainer.style.height = options.height;
-    } else {
-      contentContainer.style.minHeight = "150px";
-      contentContainer.style.maxHeight = "400px";
-    }
-    contentRoot.appendChild(contentContainer);
-    updateDisplay();
-  }
-  function formatContent(content) {
-    if (content === null) {
-      return { html: '<span class="syntax-null">null</span>', isJSON: false };
-    }
-    if (content === void 0) {
-      return {
-        html: '<span class="syntax-null">undefined</span>',
-        isJSON: false
-      };
-    }
-    if (typeof content === "string") {
-      return { html: `"${content}"`, isJSON: false };
-    }
-    if (typeof content === "number") {
-      return {
-        html: `<span class="syntax-number">${content}</span>`,
-        isJSON: false
-      };
-    }
-    if (typeof content === "boolean") {
-      return {
-        html: `<span class="syntax-boolean">${content}</span>`,
-        isJSON: false
-      };
-    }
-    if (typeof content === "function") {
-      return { html: "[Function]", isJSON: false };
-    }
-    if (content instanceof Error) {
-      return { html: `${content.name}: ${content.message}`, isJSON: false };
-    }
-    try {
-      const json = JSON.stringify(content, null, 2);
-      const highlighted = highlightSyntax(json, "json");
-      return { html: highlighted, isJSON: true };
-    } catch (e) {
-      return { html: String(content), isJSON: false };
-    }
-  }
-  function formatTimestamp(timestamp) {
-    const date = new Date(timestamp);
-    return date.toLocaleTimeString();
-  }
-  function createResultItem(result, index) {
-    const { html, isJSON } = formatContent(result.content);
-    const content = createElement("div", {
-      className: `explorer-result-item__content ${isJSON ? "explorer-result-item__content--json" : ""} ${result.type === "error" ? "explorer-result-item__content--error" : ""}`
-    });
-    if (isJSON) {
-      content.innerHTML = `<pre>${html}</pre>`;
-    } else {
-      content.innerHTML = html;
-    }
-    if (options.collapsible && content.scrollHeight > 120) {
-      content.classList.add("explorer-result-item__content--collapsed");
-      const expandBtn = createElement("button", {
-        className: "explorer-result-item__expand-btn",
-        textContent: "Show more"
-      });
-      const onExpand = () => {
-        content.classList.remove("explorer-result-item__content--collapsed");
-        expandBtn.remove();
-      };
-      cleanupFunctions.push(addEventListener(expandBtn, "click", onExpand));
-      content.appendChild(expandBtn);
-    }
-    return content;
-  }
-  function updateDisplay() {
-    contentContainer.innerHTML = "";
-    if (results.length === 0) {
-      const empty = createElement("div", {
-        className: "explorer-result-display__empty",
-        textContent: "No results yet"
-      });
-      contentContainer.appendChild(empty);
-      return;
-    }
-    results.forEach((result, index) => {
-      const item = createResultItem(result, index);
-      contentContainer.appendChild(item);
-      if (index < results.length - 1) {
-        const spacer = createElement("div", {
-          style: "margin-bottom: 12px;"
-        });
-        contentContainer.appendChild(spacer);
-      }
-    });
-    if (options.autoScroll !== false) {
-      contentContainer.scrollTop = contentContainer.scrollHeight;
-    }
-  }
-  function setupEventListeners() {
-  }
-  const api = __spreadProps(__spreadValues({}, baseComponent), {
-    addResult(result) {
-      const newResult = __spreadProps(__spreadValues({}, result), {
-        timestamp: result.timestamp || Date.now()
-      });
-      results.push(newResult);
-      if (options.maxResults && results.length > options.maxResults) {
-        results = results.slice(-options.maxResults);
-      }
-      updateDisplay();
-    },
-    addValue(value, label) {
-      this.addResult({ type: "value", content: value, label });
-    },
-    addError(error, label) {
-      const content = error instanceof Error ? error : new Error(error);
-      this.addResult({ type: "error", content, label });
-    },
-    addLog(message, label) {
-      this.addResult({ type: "log", content: message, label });
-    },
-    addWarning(message, label) {
-      this.addResult({ type: "warning", content: message, label });
-    },
-    addInfo(message, label) {
-      this.addResult({ type: "info", content: message, label });
-    },
-    clear() {
-      results = [];
-      updateDisplay();
-    },
-    getResults() {
-      return [...results];
-    },
-    setResults(newResults) {
-      results = [...newResults];
-      updateDisplay();
-    },
-    destroy() {
-      cleanupFunctions.forEach((cleanup) => cleanup());
-      cleanupFunctions.length = 0;
-      baseComponent.destroy();
-    }
-  });
-  injectStyles();
-  createDOM();
-  setupEventListeners();
-  api.mount();
-  return api;
-}
-
-// src/core/MultiColumnLayout.ts
-var MULTI_COLUMN_CSS = `
-/* Multi-Column Layout Component Styles */
-.explorer-multi-column-layout {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: transparent;
-  overflow: hidden;
-}
-
-.explorer-multi-column-layout__content {
-  display: grid;
-  flex: 1;
-  gap: var(--column-gap, 16px);
-  height: 100%;
-  min-height: 0;
-}
-
-.explorer-multi-column-layout__content--horizontal {
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-}
-
-.explorer-multi-column-layout__content--vertical {
-  grid-auto-flow: row;
-  grid-auto-rows: 1fr;
-}
-
-/* Responsive design */
-@media (max-width: 1024px) {
-  .explorer-multi-column-layout__content--horizontal {
-    grid-auto-flow: row;
-    grid-auto-rows: minmax(300px, 1fr);
-    gap: 12px;
-  }
-}
-
-@media (max-width: 768px) {
-  .explorer-multi-column-layout__content {
-    gap: 8px;
-  }
-}
-`;
-function createMultiColumnLayout(elementOrSelector, options) {
-  const { columns, layout = "horizontal", gap = "16px" } = options;
-  if (!columns || columns.length === 0) {
-    throw new Error(
-      "MultiColumnLayout requires at least one column configuration"
-    );
-  }
-  const baseComponent = createComponent(elementOrSelector, {
-    autoMount: false,
-    useShadowDOM: true
-    // Always use shadow DOM for optimal CSS isolation
-  });
-  const element = baseComponent.getElement();
-  const shadowRoot = baseComponent.getShadowRoot();
-  const contentRoot = baseComponent.getContentRoot();
-  element.classList.add("explorer-multi-column-layout");
-  contentRoot.classList.add("explorer-multi-column-layout");
-  let currentLayout = layout;
-  const columnContainers = [];
-  const cleanupFunctions = [];
-  function injectStyles() {
-    if (!shadowRoot) {
-      throw new Error(
-        "MultiColumnLayout requires shadow DOM for CSS isolation"
-      );
-    }
-    baseComponent.injectCSS(CSS_THEME_VARIABLES, "explorer-foundation-theme");
-    baseComponent.injectCSS(
-      CSS_SYNTAX_HIGHLIGHTING,
-      "syntax-highlighting-styles"
-    );
-    baseComponent.injectCSS(CODE_EDITOR_CSS, "code-editor-styles");
-    baseComponent.injectCSS(RESULT_DISPLAY_CSS, "result-display-styles");
-    baseComponent.injectCSS(
-      MULTI_COLUMN_CSS,
-      "explorer-multi-column-layout-styles"
-    );
-  }
-  function createColumns() {
-    const contentElement2 = createElement("div", {
-      className: `explorer-multi-column-layout__content explorer-multi-column-layout__content--${currentLayout}`
-    });
-    contentElement2.style.setProperty("--column-gap", gap);
-    columns.forEach((columnConfig, index) => {
-      const container = createUnifiedContainer({
-        className: `explorer-multi-column-layout__column ${columnConfig.className || ""}`,
-        contentClassName: columnConfig.contentClassName,
-        showHeader: true,
-        headerOptions: {
-          title: columnConfig.title
-        },
-        shadowRoot
-      });
-      columnContainers.push(container);
-      contentElement2.appendChild(container.getElement());
-    });
-    return contentElement2;
-  }
-  function initialize() {
-    injectStyles();
-    const contentElement2 = createColumns();
-    contentRoot.appendChild(contentElement2);
-    return contentElement2;
-  }
-  const contentElement = initialize();
-  const api = __spreadProps(__spreadValues({}, baseComponent), {
-    getColumnElement(index) {
-      if (index < 0 || index >= columnContainers.length) {
-        return null;
-      }
-      return columnContainers[index].getElement();
-    },
-    getColumnContentElement(index) {
-      if (index < 0 || index >= columnContainers.length) {
-        return null;
-      }
-      return columnContainers[index].getContentElement();
-    },
-    setLayout(newLayout) {
-      if (newLayout === currentLayout) return;
-      currentLayout = newLayout;
-      const content = contentRoot.querySelector(
-        ".explorer-multi-column-layout__content"
-      );
-      if (content) {
-        content.className = `explorer-multi-column-layout__content explorer-multi-column-layout__content--${currentLayout}`;
-      }
-    },
-    getLayout() {
-      return currentLayout;
-    },
-    destroy() {
-      columnContainers.forEach((container) => {
-        var _a;
-        (_a = container.destroy) == null ? void 0 : _a.call(container);
-      });
-      cleanupFunctions.forEach((fn) => fn());
-      baseComponent.destroy();
-    }
-  });
-  return {
-    api,
-    contentElement,
-    columnContainers,
-    cleanup: cleanupFunctions
-  };
-}
-
-// src/utils/evaluation.ts
-function evaluateJavaScript(_0) {
-  return __async(this, arguments, function* (code, context = {}, options = {}) {
-    const startTime = performance.now();
-    try {
-      const contextKeys = Object.keys(context);
-      const contextValues = Object.values(context);
-      const processedCode = options.autoReturn ? `return ${code}` : code;
-      const wrappedCode = `
-      "use strict";
-      return (async () => {
-        ${processedCode}
-      })();
-    `;
-      const evalFunction = new Function(...contextKeys, wrappedCode);
-      const result = yield evalFunction(...contextValues);
-      const executionTime = performance.now() - startTime;
-      return {
-        success: true,
-        result,
-        executionTime
-      };
-    } catch (error) {
-      const executionTime = performance.now() - startTime;
-      return {
-        success: false,
-        error: error instanceof Error ? error.message : String(error),
-        executionTime
-      };
-    }
-  });
-}
-function formatEvaluationResult(result) {
-  if (result === void 0) {
-    return "undefined";
-  }
-  if (result === null) {
-    return "null";
-  }
-  if (typeof result === "string") {
-    return result;
-  }
-  if (typeof result === "number" || typeof result === "boolean") {
-    return String(result);
-  }
-  if (typeof result === "function") {
-    return "[Function]";
-  }
-  if (typeof result === "object") {
-    try {
-      return JSON.stringify(result, null, 2);
-    } catch (e) {
-      return "[Object]";
-    }
-  }
-  return String(result);
-}
-function createSafeContext(additionalContext = {}) {
-  const safeContext = __spreadValues({
-    // Safe built-ins
-    console: {
-      log: (...args) => console.log(...args),
-      error: (...args) => console.error(...args),
-      warn: (...args) => console.warn(...args)
-    },
-    JSON,
-    Math,
-    Date,
-    Array,
-    Object,
-    String,
-    Number,
-    Boolean
-  }, additionalContext);
-  return safeContext;
-}
-
-// src/components/LiveCodeJS.ts
-init_css_theme_system();
-function createLiveCodeJS(elementOrSelector, options = {}) {
-  let currentCode = options.initCode || "";
-  let currentContext = createSafeContext(options.context);
-  let codeEditor;
-  let resultDisplay;
-  const {
-    api: baseApi,
-    contentElement,
-    columnContainers,
-    cleanup
-  } = createMultiColumnLayout(elementOrSelector, {
-    columns: [
-      {
-        title: "JavaScript Code",
-        className: "explorer-unified-container--code-editor"
-      },
-      {
-        title: "Results",
-        className: "explorer-unified-container--result-display"
-      }
-    ],
-    layout: options.layout || "horizontal",
-    height: options.height,
-    showHeader: options.showHeader,
-    title: options.title || "JavaScript Evaluator"
-  });
-  const handleThemeToggle = () => {
-    const element = baseApi.getElement();
-    if (element) {
-      const newTheme = toggleElementTheme(element);
-      const themeButtons = element.querySelectorAll(
-        ".explorer-unified-header__btn--theme"
-      );
-      themeButtons.forEach((btn) => {
-        btn.textContent = newTheme === "dark" ? "\u2600\uFE0F" : "\u{1F319}";
-      });
-    }
-  };
-  setTimeout(() => {
-    const firstColumn = baseApi.getColumnElement(0);
-    if (firstColumn) {
-      const container = firstColumn.querySelector(
-        ".explorer-unified-container"
-      );
-      if (container) {
-        const headerElement = container.querySelector(
-          ".explorer-unified-header"
-        );
-        if (headerElement) {
-          const actionsElement = headerElement.querySelector(
-            ".explorer-unified-header__actions"
-          );
-          if (actionsElement) {
-            const themeBtn = document.createElement("button");
-            themeBtn.className = "explorer-unified-header__btn explorer-unified-header__btn--theme";
-            themeBtn.textContent = getElementTheme(baseApi.getElement()) === "dark" ? "\u2600\uFE0F" : "\u{1F319}";
-            themeBtn.title = "Toggle theme";
-            themeBtn.addEventListener("click", handleThemeToggle);
-            actionsElement.appendChild(themeBtn);
-          }
-        }
-      }
-    }
-  }, 10);
-  const debouncedEvaluate = debounce(() => {
-    if (options.autoEvaluate !== false) {
-      evaluateCode();
-    }
-  }, options.evaluationDelay || 500);
-  function createPanels() {
-    const editorContentElement = baseApi.getColumnContentElement(0);
-    const resultContentElement = baseApi.getColumnContentElement(1);
-    if (!editorContentElement || !resultContentElement) {
-      throw new Error(
-        "Failed to get column content elements from multi-column layout"
-      );
-    }
-    codeEditor = createCodeEditor(editorContentElement, {
-      language: "javascript",
-      value: currentCode,
-      height: "100%",
-      onChange: (value) => {
-        currentCode = value;
-        debouncedEvaluate();
-      }
-    });
-    resultDisplay = createResultDisplay(resultContentElement, {
-      height: "100%",
-      maxResults: 10
-    });
-    if (currentCode && options.autoEvaluate !== false) {
-      evaluateCode();
-    }
-  }
-  function evaluateCode() {
-    return __async(this, null, function* () {
-      if (!currentCode.trim()) {
-        resultDisplay.clear();
-        return;
-      }
-      try {
-        resultDisplay.clear();
-        const result = yield evaluateJavaScript(currentCode, currentContext, {
-          autoReturn: options.autoReturn
-        });
-        if (result.success) {
-          resultDisplay.addValue(result.result);
-        } else {
-          resultDisplay.addError(result.error || "Unknown error");
-        }
-      } catch (error) {
-        resultDisplay.clear();
-        resultDisplay.addError(String(error));
-      }
-    });
-  }
-  const api = __spreadProps(__spreadValues({}, baseApi), {
-    getCode() {
-      return currentCode;
-    },
-    setCode(code) {
-      currentCode = code;
-      codeEditor.setValue(code);
-      if (options.autoEvaluate !== false) {
-        debouncedEvaluate();
-      }
-    },
-    setContext(context) {
-      currentContext = createSafeContext(context);
-      if (options.autoEvaluate !== false) {
-        debouncedEvaluate();
-      }
-    },
-    evaluate() {
-      evaluateCode();
-    },
-    clear() {
-      currentCode = "";
-      codeEditor.setValue("");
-      resultDisplay.clear();
-    },
-    getResults() {
-      return resultDisplay.getResults();
-    },
-    setLayout(layout) {
-      baseApi.setLayout(layout);
-    },
-    getLayout() {
-      return baseApi.getLayout();
-    },
-    destroy() {
-      cleanup.forEach((fn) => fn());
-      codeEditor == null ? void 0 : codeEditor.destroy();
-      resultDisplay == null ? void 0 : resultDisplay.destroy();
-      baseApi.destroy();
-    }
-  });
-  createPanels();
-  api.mount();
-  return api;
-}
-
-// src/components/Destination.ts
-var import_collector = require("@walkeros/collector");
-init_css_theme_system();
-function createDestination(elementOrSelector, options = {}) {
-  let eventData = options.initialEvent || "";
-  let mappingData = options.initialMapping || "";
-  let eventEditor;
-  let mappingEditor;
-  let resultDisplay;
-  let elbFunction = null;
-  let collector = null;
-  let capturedResults = [];
-  const { api: baseApi, cleanup } = createMultiColumnLayout(elementOrSelector, {
-    columns: [
-      {
-        title: "Event",
-        className: "explorer-unified-container--code-editor"
-      },
-      {
-        title: "Mapping",
-        className: "explorer-unified-container--code-editor"
-      },
-      {
-        title: "Result",
-        className: "explorer-unified-container--result-display"
-      }
-    ],
-    layout: "horizontal",
-    height: options.height,
-    showHeader: options.showHeader,
-    title: options.title || "Destination Mapping"
-  });
-  const handleThemeToggle = () => {
-    const element = baseApi.getElement();
-    if (element) {
-      const newTheme = toggleElementTheme(element);
-      const themeButtons = element.querySelectorAll(
-        ".explorer-unified-header__btn--theme"
-      );
-      themeButtons.forEach((btn) => {
-        btn.textContent = newTheme === "dark" ? "\u2600\uFE0F" : "\u{1F319}";
-      });
-    }
-  };
-  setTimeout(() => {
-    const firstColumn = baseApi.getColumnElement(0);
-    if (firstColumn) {
-      const container = firstColumn.querySelector(
-        ".explorer-unified-container"
-      );
-      if (container) {
-        const headerElement = container.querySelector(
-          ".explorer-unified-header"
-        );
-        if (headerElement) {
-          const actionsElement = headerElement.querySelector(
-            ".explorer-unified-header__actions"
-          );
-          if (actionsElement) {
-            const themeBtn = document.createElement("button");
-            themeBtn.className = "explorer-unified-header__btn explorer-unified-header__btn--theme";
-            themeBtn.textContent = getElementTheme(baseApi.getElement()) === "dark" ? "\u2600\uFE0F" : "\u{1F319}";
-            themeBtn.title = "Toggle theme";
-            themeBtn.addEventListener("click", handleThemeToggle);
-            actionsElement.appendChild(themeBtn);
-          }
-        }
-      }
-    }
-  }, 10);
-  const debouncedUpdate = debounce(() => {
-    updateResults();
-  }, options.updateDelay || 300);
-  function createDemoDestination() {
-    return {
-      type: "demo",
-      config: {},
-      push(event, context) {
-        const { data, mapping } = context;
-        capturedResults = [];
-        if (data !== void 0) {
-          capturedResults.push({
-            type: "mapped_result",
-            mappingRule: (mapping == null ? void 0 : mapping.name) || "default",
-            data,
-            timestamp: Date.now()
-          });
-        } else {
-          capturedResults.push({
-            type: "no_mapping",
-            event,
-            message: "No mapping rule matched or no data produced",
-            timestamp: Date.now()
-          });
-        }
-        updateResultDisplay();
-      }
-    };
-  }
-  function initializeCollector() {
-    return __async(this, null, function* () {
-      try {
-        const destination = options.destination || createDemoDestination();
-        const { elb, collector: newCollector } = yield (0, import_collector.createCollector)({
-          destinations: {
-            demo: destination
-          },
-          run: true
-        });
-        return { elb, collector: newCollector };
-      } catch (error) {
-        capturedResults = [
-          {
-            type: "error",
-            message: `Failed to initialize collector: ${String(error)}`,
-            timestamp: Date.now()
-          }
-        ];
-        updateResultDisplay();
-        return null;
-      }
-    });
-  }
-  function createComponents() {
-    const eventContentElement = baseApi.getColumnContentElement(0);
-    const mappingContentElement = baseApi.getColumnContentElement(1);
-    const resultContentElement = baseApi.getColumnContentElement(2);
-    if (!eventContentElement || !mappingContentElement || !resultContentElement) {
-      throw new Error(
-        "Failed to get column content elements from multi-column layout"
-      );
-    }
-    eventEditor = createCodeEditor(eventContentElement, {
-      language: "json",
-      value: eventData,
-      height: "100%",
-      onChange: (value) => {
-        eventData = value;
-        debouncedUpdate();
-      }
-    });
-    mappingEditor = createCodeEditor(mappingContentElement, {
-      language: "json",
-      value: mappingData,
-      height: "100%",
-      onChange: (value) => {
-        mappingData = value;
-        debouncedUpdate();
-      }
-    });
-    resultDisplay = createResultDisplay(resultContentElement, {
-      height: "100%",
-      maxResults: 1
-    });
-    updateResultDisplay();
-    initializeCollector().then((result) => {
-      if (result) {
-        elbFunction = result.elb;
-        collector = result.collector;
-        setTimeout(() => {
-          updateResults();
-        }, 200);
-      }
-    });
-  }
-  function updateResults() {
-    return __async(this, null, function* () {
-      try {
-        capturedResults = [];
-        if (!elbFunction) {
-          resultDisplay.clear();
-          resultDisplay.addError("Collector not initialized");
-          return;
-        }
-        let parsedEvent;
-        try {
-          parsedEvent = eventData.trim() ? JSON.parse(eventData) : null;
-        } catch (error) {
-          resultDisplay.clear();
-          resultDisplay.addError(`Invalid JSON in Event: ${String(error)}`);
-          return;
-        }
-        if (parsedEvent) {
-          updateDestinationMapping();
-          yield elbFunction(parsedEvent);
-        }
-      } catch (error) {
-        resultDisplay.clear();
-        resultDisplay.addError(`Processing error: ${String(error)}`);
-      }
-    });
-  }
-  function updateDestinationMapping() {
-    if (!collector) return;
-    try {
-      const demoDestination = collector.destinations.demo;
-      if (demoDestination && mappingData.trim()) {
-        const mapping = JSON.parse(mappingData);
-        demoDestination.config.mapping = mapping;
-      }
-    } catch (error) {
-      capturedResults.push({
-        type: "error",
-        message: `Failed to update mapping: ${String(error)}`,
-        timestamp: Date.now()
-      });
-    }
-  }
-  function updateResultDisplay() {
-    resultDisplay.clear();
-    if (capturedResults.length === 0) {
-      resultDisplay.addInfo(
-        "Ready - modify the event or mapping and see the destination processing results"
-      );
-      return;
-    }
-    capturedResults.forEach((result) => {
-      if (result.type === "mapped_result") {
-        resultDisplay.addValue(
-          result.data,
-          `Destination receives (${result.mappingRule})`
-        );
-      } else if (result.type === "no_mapping") {
-        resultDisplay.addInfo(result.message || "No mapping applied");
-      } else {
-        resultDisplay.addValue(result);
-      }
-    });
-  }
-  const api = __spreadProps(__spreadValues({}, baseApi), {
-    getEventData() {
-      return eventData;
-    },
-    setEventData(data) {
-      eventData = data;
-      eventEditor == null ? void 0 : eventEditor.setValue(data);
-      debouncedUpdate();
-    },
-    getMappingData() {
-      return mappingData;
-    },
-    setMappingData(data) {
-      mappingData = data;
-      mappingEditor == null ? void 0 : mappingEditor.setValue(data);
-      debouncedUpdate();
-    },
-    getResults() {
-      return capturedResults || [];
-    },
-    refresh() {
-      updateResults();
-    },
-    clear() {
-      eventData = "{}";
-      mappingData = "{}";
-      eventEditor == null ? void 0 : eventEditor.setValue("{}");
-      mappingEditor == null ? void 0 : mappingEditor.setValue("{}");
-      capturedResults = [];
-      resultDisplay == null ? void 0 : resultDisplay.clear();
-    },
-    destroy() {
-      cleanup.forEach((fn) => fn());
-      eventEditor == null ? void 0 : eventEditor.destroy();
-      mappingEditor == null ? void 0 : mappingEditor.destroy();
-      resultDisplay == null ? void 0 : resultDisplay.destroy();
-      elbFunction = null;
-      collector = null;
-      capturedResults = [];
-      baseApi.destroy();
-    }
-  });
-  createComponents();
-  api.mount();
-  return api;
-}
-
-// src/index.ts
-var version = "1.0.0";
-var name = "@walkeros/explorer";
-//# sourceMappingURL=index.cjs.map