@decido/shell 4.0.1 → 4.0.3

package/dist/chunk-PMYAM764.mjs

@@ -0,0 +1,813 @@
+import {
+  useLayoutStore
+} from "./chunk-MSVEFEXE.mjs";
+
+// src/components/widgets/WidgetSlotPanel.tsx
+import React2 from "react";
+
+// src/components/widgets/WidgetRenderer.tsx
+import React from "react";
+import { RefreshCw, X, AlertTriangle, Wifi, WifiOff } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var WidgetDataStore = class {
+  data = {};
+  listeners = /* @__PURE__ */ new Set();
+  /** Set data and notify subscribers */
+  set(path, value) {
+    this.data[path] = value;
+    this.listeners.forEach((fn) => fn());
+  }
+  /** Resolve a dotted path: 'sentinel.metrics.uptime' → value */
+  resolve(path) {
+    const parts = path.split(".");
+    let current = this.data;
+    for (const part of parts) {
+      if (current == null) return void 0;
+      current = current[part];
+    }
+    return current;
+  }
+  /** Bulk set */
+  merge(obj) {
+    Object.assign(this.data, obj);
+    this.listeners.forEach((fn) => fn());
+  }
+  subscribe(fn) {
+    this.listeners.add(fn);
+    return () => this.listeners.delete(fn);
+  }
+};
+var widgetDataStore = new WidgetDataStore();
+widgetDataStore.merge({
+  sentinel: {
+    metrics: { eventsPerMin: 1247, avgLatency: 23, uptime: 99.7, errorCount: 2 },
+    events: [
+      { time: "10:23:01", type: "pageload", path: "/dashboard", duration: 142 },
+      { time: "10:22:58", type: "api", path: "/api/nodes", duration: 89 },
+      { time: "10:22:45", type: "click", path: "sidebar", duration: 3 },
+      { time: "10:22:30", type: "session", path: "user:admin", duration: 0 }
+    ],
+    errors: [
+      { message: "TypeError: Cannot read properties of undefined", source: "IssueList.tsx:11:39", ago: "3 min", severity: "error" },
+      { message: "Warning: defaultProps deprecated", source: "recharts.js:28626", ago: "15 min", severity: "warning" }
+    ],
+    sessions: { today: 3, recording: true }
+  }
+});
+var PluginBridge = class {
+  iframe = null;
+  handlers = /* @__PURE__ */ new Map();
+  themeObserver = null;
+  attach(iframe) {
+    this.iframe = iframe;
+    window.addEventListener("message", this.onMessage);
+    this.themeObserver = new MutationObserver(() => {
+      const isDark = document.documentElement.classList.contains("dark");
+      this.emit("theme:changed", isDark ? "dark" : "light");
+    });
+    this.themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+  }
+  detach() {
+    window.removeEventListener("message", this.onMessage);
+    this.themeObserver?.disconnect();
+    this.themeObserver = null;
+    this.iframe = null;
+  }
+  /** Register a handler for plugin requests */
+  onRequest(action, handler) {
+    this.handlers.set(action, handler);
+  }
+  /** Send an event into the iframe */
+  emit(topic, payload) {
+    this.iframe?.contentWindow?.postMessage({
+      type: "DECIDO_HOST_EVENT",
+      topic,
+      payload
+    }, "*");
+  }
+  onMessage = (event) => {
+    if (!this.iframe || event.source !== this.iframe.contentWindow) return;
+    const msg = event.data;
+    if (msg?.type === "DECIDO_PLUGIN_REQUEST" && msg.action) {
+      const handler = this.handlers.get(msg.action);
+      if (handler) {
+        try {
+          const result = handler(msg.payload);
+          if (result instanceof Promise) {
+            result.then((r) => this.respond(msg.requestId, r)).catch((e) => this.respond(msg.requestId, { error: String(e) }));
+          } else {
+            this.respond(msg.requestId, result);
+          }
+        } catch (e) {
+          console.error("[Bridge] Handler error:", e);
+          this.respond(msg.requestId, { error: String(e) });
+        }
+      } else {
+        console.warn(`[Bridge] No handler for action: ${msg.action}`);
+      }
+    }
+  };
+  respond(requestId, payload) {
+    if (!requestId) return;
+    this.iframe?.contentWindow?.postMessage({
+      type: "DECIDO_PLUGIN_RESPONSE",
+      requestId,
+      payload
+    }, "*");
+  }
+};
+var WidgetErrorBoundary = class extends React.Component {
+  state = { hasError: false };
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, info) {
+    console.error(`[Widget:${this.props.widgetId}] Crash:`, error, info);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col items-center justify-center bg-surface-primary gap-3 p-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-14 h-14 rounded-2xl bg-red-500/10 border border-red-500/20 flex items-center justify-center", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "w-7 h-7 text-red-400" }) }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-text-primary", children: "Widget Crashed" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-text-muted text-center max-w-[280px] font-mono bg-surface-glass px-3 py-2 rounded-lg", children: this.state.error?.message || "Unknown error" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              this.setState({ hasError: false, error: void 0 });
+              this.props.onReset?.();
+            },
+            className: "px-4 py-1.5 rounded-lg text-xs font-medium bg-surface-glass hover:bg-surface-elevated border border-border-subtle transition-colors",
+            children: "Retry"
+          }
+        )
+      ] });
+    }
+    return this.props.children;
+  }
+};
+function WidgetRenderer({ widget, onClose, className = "" }) {
+  return /* @__PURE__ */ jsx(WidgetErrorBoundary, { widgetId: widget.id, children: widget.url ? /* @__PURE__ */ jsx(IframeWidget, { widget, onClose, className }) : widget.schema ? /* @__PURE__ */ jsx(SDUIWidget, { widget, onClose, className }) : widget.scriptUrl ? /* @__PURE__ */ jsx(HeadlessWidget, { widget, onClose, className }) : widget.component ? /* @__PURE__ */ jsx(NativeComponentWidget, { widget, onClose, className }) : /* @__PURE__ */ jsx("div", { className: `w-full h-full flex items-center justify-center text-text-muted ${className}`, children: /* @__PURE__ */ jsxs("p", { className: "text-xs", children: [
+    'Widget "',
+    widget.title,
+    '" has no schema, URL, scriptUrl, or component'
+  ] }) }) });
+}
+function NativeComponentWidget({ widget, onClose, className = "" }) {
+  const Component = widget.component;
+  return /* @__PURE__ */ jsxs("div", { className: `w-full h-full flex flex-col bg-surface-primary ${className} min-w-0 min-h-0`, children: [
+    /* @__PURE__ */ jsx(WidgetToolbar, { label: "OPTION D \xB7 NATIVE", color: "emerald", title: widget.title, onClose, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 px-1.5 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20", children: /* @__PURE__ */ jsx("span", { className: "text-[9px] text-emerald-400 font-mono", children: "REACT" }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-auto bg-surface-primary rr-block relative", "data-rr-block": true, children: /* @__PURE__ */ jsx(React.Suspense, { fallback: /* @__PURE__ */ jsx(LoadingOverlay, { title: widget.title, color: "emerald" }), children: /* @__PURE__ */ jsx(Component, {}) }) })
+  ] });
+}
+function HeadlessWidget({ widget, onClose, className = "" }) {
+  const [status, setStatus] = React.useState("idle");
+  const [runCount, setRunCount] = React.useState(0);
+  const [lastError, setLastError] = React.useState(null);
+  const sandboxRef = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      if (sandboxRef.current) {
+        sandboxRef.current.destroy();
+        sandboxRef.current = null;
+      }
+    };
+  }, []);
+  const handleStart = React.useCallback(async () => {
+    try {
+      setStatus("running");
+      setLastError(null);
+      const scriptUrl = widget.scriptUrl || "";
+      if (scriptUrl.startsWith("wasm://")) {
+        const parts = scriptUrl.replace("wasm://", "").split("/");
+        const pluginName = parts[0];
+        const fnName = parts[1] || "run";
+        const { runWasmPlugin } = await import("./wasm-QFXGEYGP.mjs");
+        const result = await runWasmPlugin(pluginName, fnName);
+        console.log(`[WASM] Plugin "${pluginName}.${fnName}" result:`, result);
+        setRunCount((c) => c + 1);
+        setStatus("stopped");
+        return;
+      }
+      const { PluginSandbox } = await import("./PluginSandbox-WMNAUQOJ.mjs");
+      const sandbox = new PluginSandbox({
+        pluginId: widget.pluginId,
+        pluginUrl: scriptUrl,
+        tenantId: "default",
+        permissions: widget.permissions || []
+      });
+      sandbox.onRpcRequest = async (action, payload) => {
+        return new Promise((resolve, reject) => {
+          const reqId = `headless-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+          const handler = (e) => {
+            if (e.data?.reqId === reqId) {
+              window.removeEventListener("message", handler);
+              if (e.data.error) reject(new Error(e.data.error));
+              else resolve(e.data.result);
+            }
+          };
+          window.addEventListener("message", handler);
+          window.postMessage({
+            type: "DECIDO_RPC",
+            reqId,
+            action,
+            pluginId: widget.pluginId,
+            payload
+          }, window.location.origin);
+        });
+      };
+      sandbox.onError = (error) => {
+        setLastError(error);
+        setStatus("error");
+      };
+      sandboxRef.current = sandbox;
+      await sandbox.start();
+      setRunCount((c) => c + 1);
+    } catch (err) {
+      setStatus("error");
+      setLastError(typeof err === "string" ? err : err?.message || String(err));
+      console.error("[HeadlessWidget] Error:", err);
+    }
+  }, [widget]);
+  const handleStop = React.useCallback(() => {
+    if (sandboxRef.current) {
+      sandboxRef.current.destroy();
+      sandboxRef.current = null;
+    }
+    setStatus("stopped");
+  }, []);
+  const statusColors = {
+    idle: "bg-gray-500/20 text-gray-400",
+    running: "bg-emerald-500/20 text-emerald-400",
+    stopped: "bg-amber-500/20 text-amber-400",
+    error: "bg-red-500/20 text-red-400"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col h-full ${className}`, children: [
+    /* @__PURE__ */ jsx(WidgetToolbar, { title: widget.title, label: "WORKER", color: "violet", onClose, children: /* @__PURE__ */ jsx("div", { className: `flex items-center gap-1 px-1.5 py-0.5 rounded ${statusColors[status]}`, children: /* @__PURE__ */ jsx("span", { className: "text-[9px] font-mono uppercase", children: status }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center gap-3 p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-text-muted mb-1", children: "Worker Sandbox Plugin" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[10px] text-text-disabled font-mono", children: widget.scriptUrl })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleStart,
+            disabled: status === "running",
+            className: "px-3 py-1.5 text-xs rounded bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30 disabled:opacity-50 transition-colors",
+            children: "\u25B6 Start"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleStop,
+            disabled: status !== "running",
+            className: "px-3 py-1.5 text-xs rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 disabled:opacity-50 transition-colors",
+            children: "\u25A0 Stop"
+          }
+        )
+      ] }),
+      runCount > 0 && /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-text-disabled", children: [
+        "Runs: ",
+        runCount
+      ] }),
+      lastError && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-red-400 max-w-[200px] text-center", children: lastError })
+    ] })
+  ] });
+}
+function IframeWidget({ widget, onClose, className = "" }) {
+  const iframeRef = React.useRef(null);
+  const bridgeRef = React.useRef(new PluginBridge());
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [hasError, setHasError] = React.useState(false);
+  const [isOnline, setIsOnline] = React.useState(true);
+  React.useEffect(() => {
+    if (!widget.url) return;
+    const controller = new AbortController();
+    fetch(widget.url, { mode: "no-cors", signal: controller.signal }).then(() => setIsOnline(true)).catch(() => setIsOnline(false));
+    return () => controller.abort();
+  }, [widget.url]);
+  React.useEffect(() => {
+    const bridge = bridgeRef.current;
+    bridge.onRequest("getTheme", () => {
+      return document.documentElement.classList.contains("dark") ? "dark" : "light";
+    });
+    bridge.onRequest("getData", (p) => {
+      return widgetDataStore.resolve(p.path);
+    });
+    bridge.onRequest("navigate", (p) => {
+      console.log("[Bridge] Plugin requested navigation:", p.route);
+    });
+    bridge.onRequest("requestAction", (p) => {
+      console.log("[Bridge] Action from plugin:", p.command);
+      window.dispatchEvent(new CustomEvent("sdui:action", {
+        detail: { command: p.command, payload: p.payload }
+      }));
+      return { dispatched: true };
+    });
+    bridge.onRequest("getWidgets", () => {
+      const store = window.__pluginWidgetStore;
+      if (!store) return { widgets: [] };
+      return { widgets: store.getVisible().map((w) => ({ id: w.id, title: w.title, pluginId: w.pluginId })) };
+    });
+    bridge.onRequest("openExternal", (p) => {
+      window.open(p.url, "_blank", "noopener,noreferrer");
+      return { opened: true };
+    });
+    return () => bridge.detach();
+  }, []);
+  React.useEffect(() => {
+    setIsLoading(true);
+    setHasError(false);
+  }, [widget.url]);
+  const handleIframeLoad = () => {
+    setIsLoading(false);
+    setHasError(false);
+    if (iframeRef.current) {
+      bridgeRef.current.attach(iframeRef.current);
+    }
+  };
+  const handleRefresh = () => {
+    if (iframeRef.current) {
+      setIsLoading(true);
+      setHasError(false);
+      iframeRef.current.src = iframeRef.current.src;
+    }
+  };
+  if (!isOnline) {
+    return /* @__PURE__ */ jsxs("div", { className: `w-full h-full flex flex-col bg-surface-primary ${className}`, children: [
+      /* @__PURE__ */ jsx(WidgetToolbar, { label: "OPTION B \xB7 IFRAME", color: "blue", title: widget.title, onClose, onRefresh: () => setIsOnline(true) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-14 h-14 rounded-2xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center", children: /* @__PURE__ */ jsx(WifiOff, { className: "w-7 h-7 text-amber-400" }) }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-text-primary", children: "Plugin Offline" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-text-muted", children: [
+          widget.url,
+          " no responde"
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: () => {
+          setIsOnline(true);
+        }, className: "px-3 py-1.5 rounded-lg text-xs font-medium bg-surface-glass hover:bg-surface-elevated transition-colors", children: "Reintentar" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `w-full h-full flex flex-col bg-surface-primary ${className}`, children: [
+    /* @__PURE__ */ jsx(WidgetToolbar, { label: "OPTION B \xB7 IFRAME", color: "blue", title: widget.title, onClose, onRefresh: handleRefresh, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-1.5 py-0.5 rounded bg-blue-500/10 border border-blue-500/20", children: [
+      /* @__PURE__ */ jsx(Wifi, { className: "w-2.5 h-2.5 text-blue-400" }),
+      /* @__PURE__ */ jsx("span", { className: "text-[9px] text-blue-400 font-mono", children: "BRIDGE" })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 relative rr-block", "data-rr-block": true, children: [
+      isLoading && /* @__PURE__ */ jsx(LoadingOverlay, { title: widget.title, color: "blue" }),
+      hasError && /* @__PURE__ */ jsx(ErrorOverlay, { url: widget.url || "", onRetry: handleRefresh }),
+      /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          ref: iframeRef,
+          src: widget.url,
+          className: "w-full h-full border-0 rr-block",
+          onLoad: handleIframeLoad,
+          onError: () => {
+            setIsLoading(false);
+            setHasError(true);
+          },
+          sandbox: "allow-scripts allow-same-origin allow-popups allow-forms allow-modals",
+          "data-rr-block": true,
+          title: widget.title
+        }
+      )
+    ] })
+  ] });
+}
+function SDUIWidget({ widget, onClose, className = "" }) {
+  const [, forceRender] = React.useReducer((x) => x + 1, 0);
+  React.useEffect(() => widgetDataStore.subscribe(forceRender), []);
+  return /* @__PURE__ */ jsxs("div", { className: `w-full h-full flex flex-col bg-surface-primary overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ jsx(WidgetToolbar, { label: "OPTION A \xB7 SDUI", color: "emerald", title: widget.title, onClose, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 px-1.5 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20", children: /* @__PURE__ */ jsx("span", { className: "text-[9px] text-emerald-400 font-mono", children: "REACTIVE" }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: widget.schema && /* @__PURE__ */ jsx(SDUINode, { node: widget.schema }) })
+  ] });
+}
+function WidgetToolbar({ label, color, title, onClose, onRefresh, children }) {
+  const colorClasses = {
+    blue: "text-blue-400 bg-blue-400",
+    emerald: "text-emerald-400 bg-emerald-400"
+  };
+  const textColor = colorClasses[color]?.split(" ")[0] || "text-cyan-400";
+  const dotColor = colorClasses[color]?.split(" ")[1] || "bg-cyan-400";
+  return /* @__PURE__ */ jsxs("div", { className: "flex-none flex items-center justify-between px-3 py-1.5 bg-surface-secondary/80 backdrop-blur-sm border-b border-border-subtle", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full ${dotColor} animate-pulse` }),
+      /* @__PURE__ */ jsx("span", { className: `text-[10px] font-bold ${textColor} tracking-wider uppercase`, children: label }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-text-primary", children: title }),
+      children
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      onRefresh && /* @__PURE__ */ jsx("button", { onClick: onRefresh, className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-surface-glass transition-colors", title: "Refresh", children: /* @__PURE__ */ jsx(RefreshCw, { className: "w-3 h-3" }) }),
+      onClose && /* @__PURE__ */ jsx("button", { onClick: onClose, className: "p-1 rounded text-text-muted hover:text-red-400 hover:bg-red-500/10 transition-colors", title: "Close", children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" }) })
+    ] })
+  ] });
+}
+function LoadingOverlay({ title, color }) {
+  const borderColor = color === "blue" ? "border-blue-400" : "border-emerald-400";
+  const borderFade = color === "blue" ? "border-blue-500/20" : "border-emerald-500/20";
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-surface-primary z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: `w-6 h-6 border-2 ${borderFade} rounded-full relative`, children: /* @__PURE__ */ jsx("div", { className: `absolute inset-0 w-6 h-6 border-2 border-transparent border-t-current ${borderColor} rounded-full animate-spin` }) }),
+    /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-text-muted", children: [
+      "Loading ",
+      title,
+      "..."
+    ] })
+  ] }) });
+}
+function ErrorOverlay({ url, onRetry }) {
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-surface-primary z-10", children: /* @__PURE__ */ jsxs("div", { className: "text-center space-y-2", children: [
+    /* @__PURE__ */ jsx(X, { className: "w-8 h-8 text-red-400 mx-auto" }),
+    /* @__PURE__ */ jsxs("p", { className: "text-xs text-text-muted", children: [
+      "Failed to load ",
+      url
+    ] }),
+    /* @__PURE__ */ jsx("button", { onClick: onRetry, className: "text-[10px] px-2 py-1 rounded bg-surface-glass hover:bg-surface-elevated transition-colors", children: "Retry" })
+  ] }) });
+}
+var SAFE_TAGS = /* @__PURE__ */ new Set([
+  "div",
+  "span",
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "button",
+  "a",
+  "img",
+  "ul",
+  "ol",
+  "li",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td",
+  "form",
+  "input",
+  "textarea",
+  "select",
+  "option",
+  "label",
+  "section",
+  "article",
+  "nav",
+  "header",
+  "footer",
+  "main",
+  "aside"
+]);
+var RICH_COMPONENTS = {
+  "MetricCard": MetricCard,
+  "ProgressBar": ProgressBar,
+  "StatusBadge": StatusBadge,
+  "EventList": EventList,
+  "ErrorList": ErrorList,
+  "Sparkline": Sparkline
+};
+function SDUINode({ node }) {
+  if (typeof node === "string") return /* @__PURE__ */ jsx(Fragment, { children: node });
+  if (!node || !node.type) return null;
+  if (node.conditional) {
+    const val = widgetDataStore.resolve(node.conditional);
+    if (!val) return null;
+  }
+  let resolvedProps = { ...node.props };
+  if (node.dataSource) {
+    const val = widgetDataStore.resolve(node.dataSource);
+    if (val !== void 0) {
+      if (typeof val === "string" || typeof val === "number") {
+        return React.createElement(node.type, resolvedProps, String(val));
+      }
+      resolvedProps = { ...resolvedProps, data: val };
+    }
+  }
+  if (node.onAction) {
+    const action = node.onAction;
+    resolvedProps.onClick = () => {
+      console.log(`[SDUI Action] ${action.command}`, action.payload);
+      window.dispatchEvent(new CustomEvent("sdui:action", {
+        detail: { command: action.command, payload: action.payload }
+      }));
+    };
+    resolvedProps.style = { ...resolvedProps.style, cursor: "pointer" };
+  }
+  const RichComponent = RICH_COMPONENTS[node.type];
+  if (RichComponent) {
+    return /* @__PURE__ */ jsx(RichComponent, { ...resolvedProps });
+  }
+  if (!SAFE_TAGS.has(node.type)) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-2 border border-amber-500/20 rounded bg-amber-500/5 text-xs text-amber-400", children: [
+      "Unknown: ",
+      node.type
+    ] });
+  }
+  const children = node.children?.map((child, i) => /* @__PURE__ */ jsx(SDUINode, { node: child }, i));
+  return React.createElement(node.type, resolvedProps, children);
+}
+function MetricCard({ label, value, unit, color = "cyan", trend }) {
+  const colors = {
+    cyan: "bg-cyan-900/30 border-cyan-500/20 text-cyan-400",
+    emerald: "bg-emerald-900/30 border-emerald-500/20 text-emerald-400",
+    amber: "bg-amber-900/30 border-amber-500/20 text-amber-400",
+    red: "bg-red-900/30 border-red-500/20 text-red-400",
+    blue: "bg-blue-900/30 border-blue-500/20 text-blue-400"
+  };
+  const trendIcons = { up: "\u2191", down: "\u2193", stable: "\u2192" };
+  const trendColors = { up: "text-emerald-400", down: "text-red-400", stable: "text-zinc-500" };
+  return /* @__PURE__ */ jsxs("div", { className: `p-3 rounded-lg border text-center ${colors[color] || colors.cyan}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-2xl font-bold flex items-center justify-center gap-1", children: [
+      value,
+      unit && /* @__PURE__ */ jsx("span", { className: "text-sm opacity-60", children: unit }),
+      trend && /* @__PURE__ */ jsx("span", { className: `text-sm ${trendColors[trend]}`, children: trendIcons[trend] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] text-zinc-400 uppercase tracking-wider mt-1", children: label })
+  ] });
+}
+function ProgressBar({ value, max = 100, label, color = "cyan" }) {
+  const pct = Math.min(100, value / max * 100);
+  const barColors = {
+    cyan: "bg-cyan-500",
+    emerald: "bg-emerald-500",
+    amber: "bg-amber-500",
+    red: "bg-red-500"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "text-zinc-300 font-mono", children: [
+        pct.toFixed(0),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-2 rounded-full bg-zinc-800 overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `h-full rounded-full transition-all duration-700 ${barColors[color] || barColors.cyan}`,
+        style: { width: `${pct}%` }
+      }
+    ) })
+  ] });
+}
+function StatusBadge({ status, label }) {
+  const styles = {
+    online: "bg-emerald-500/10 border-emerald-500/20 text-emerald-400",
+    offline: "bg-zinc-500/10 border-zinc-500/20 text-zinc-400",
+    warning: "bg-amber-500/10 border-amber-500/20 text-amber-400",
+    error: "bg-red-500/10 border-red-500/20 text-red-400"
+  };
+  const dots = {
+    online: "bg-emerald-400",
+    offline: "bg-zinc-500",
+    warning: "bg-amber-400",
+    error: "bg-red-400"
+  };
+  return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full border text-[10px] font-semibold uppercase tracking-wider ${styles[status]}`, children: [
+    /* @__PURE__ */ jsx("span", { className: `w-1.5 h-1.5 rounded-full ${dots[status]} ${status === "online" ? "animate-pulse" : ""}` }),
+    label || status
+  ] });
+}
+function EventList({ data, maxItems = 6 }) {
+  const events = Array.isArray(data) ? data.slice(0, maxItems) : [];
+  if (events.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500 italic", children: "No events" });
+  }
+  const typeColors = {
+    pageload: "text-cyan-400",
+    api: "text-blue-400",
+    click: "text-emerald-400",
+    session: "text-purple-400",
+    error: "text-red-400"
+  };
+  return /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: events.map((ev, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs py-1.5 px-2 rounded hover:bg-white/[0.02] transition-colors", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-zinc-600 font-mono text-[10px] w-16 shrink-0", children: ev.time }),
+    /* @__PURE__ */ jsx("span", { className: `text-[10px] font-bold uppercase tracking-wider w-16 shrink-0 ${typeColors[ev.type] || "text-zinc-500"}`, children: ev.type }),
+    /* @__PURE__ */ jsx("span", { className: "text-zinc-400 truncate", children: ev.path }),
+    ev.duration > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-auto text-zinc-600 font-mono text-[10px] shrink-0", children: [
+      ev.duration,
+      "ms"
+    ] })
+  ] }, i)) });
+}
+function ErrorList({ data }) {
+  const errors = Array.isArray(data) ? data : [];
+  if (errors.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 bg-emerald-900/10 rounded-lg border border-emerald-500/10", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-emerald-400 text-sm", children: "\u2713" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-emerald-400", children: "No errors detected" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: errors.map((err, i) => {
+    const isError = err.severity === "error";
+    return /* @__PURE__ */ jsxs("div", { className: `p-3 rounded-lg border space-y-1 ${isError ? "bg-red-900/10 border-red-500/20" : "bg-amber-900/10 border-amber-500/20"}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: `text-sm font-medium ${isError ? "text-red-400" : "text-amber-400"}`, children: err.message }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-500", children: err.ago })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500 font-mono", children: err.source })
+    ] }, i);
+  }) });
+}
+function Sparkline({ data, color = "cyan", height = 32 }) {
+  const values = Array.isArray(data) ? data : [30, 45, 28, 60, 42, 75, 55, 90, 65, 80];
+  const max = Math.max(...values);
+  const min = Math.min(...values);
+  const range = max - min || 1;
+  const w = 120;
+  const points = values.map((v, i) => {
+    const x = i / (values.length - 1) * w;
+    const y = height - (v - min) / range * (height - 4) - 2;
+    return `${x},${y}`;
+  }).join(" ");
+  const strokeColors = {
+    cyan: "#22d3ee",
+    emerald: "#34d399",
+    amber: "#fbbf24",
+    red: "#f87171",
+    blue: "#60a5fa"
+  };
+  return /* @__PURE__ */ jsx("svg", { width: w, height, className: "inline-block align-middle", children: /* @__PURE__ */ jsx(
+    "polyline",
+    {
+      points,
+      fill: "none",
+      stroke: strokeColors[color] || strokeColors.cyan,
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/components/widgets/WidgetSlotPanel.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PERSISTENCE_KEY = "decido:activeWidgets";
+var WidgetStore = class {
+  widgets = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  _activeId = null;
+  persistTimer = null;
+  register(widget) {
+    this.widgets.set(widget.id, { ...widget, visible: widget.visible ?? true });
+    this.notify();
+    this.persist();
+  }
+  remove(id) {
+    this.widgets.delete(id);
+    if (this._activeId === id) this._activeId = null;
+    this.notify();
+    this.persist();
+  }
+  clear() {
+    this.widgets.clear();
+    this._activeId = null;
+    this.notify();
+    this.persist();
+  }
+  setActive(id) {
+    this._activeId = id;
+    this.notify();
+    this.persist();
+  }
+  get activeId() {
+    return this._activeId;
+  }
+  get size() {
+    return this.widgets.size;
+  }
+  getVisible() {
+    return Array.from(this.widgets.values()).filter((w) => w.visible !== false).sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
+  }
+  /** Restore from localStorage (call on mount with schema resolver) */
+  restoreFromPersistence(schemaResolver) {
+    try {
+      const raw = localStorage.getItem(PERSISTENCE_KEY);
+      if (!raw) return false;
+      const snapshot = JSON.parse(raw);
+      if (!snapshot?.widgets?.length) return false;
+      for (const pw of snapshot.widgets) {
+        const schema = schemaResolver(pw.id);
+        this.widgets.set(pw.id, {
+          ...pw,
+          visible: true,
+          schema
+        });
+      }
+      this._activeId = snapshot.activeId;
+      this.notify();
+      console.log(`[WidgetStore] Restored ${snapshot.widgets.length} widgets from persistence`);
+      return true;
+    } catch (e) {
+      console.warn("[WidgetStore] Restore failed:", e);
+      return false;
+    }
+  }
+  subscribe(fn) {
+    this.listeners.add(fn);
+    return () => this.listeners.delete(fn);
+  }
+  notify() {
+    this.listeners.forEach((fn) => fn());
+  }
+  /** Debounced write to localStorage (excludes schema which can't be serialized) */
+  persist() {
+    if (this.persistTimer) clearTimeout(this.persistTimer);
+    this.persistTimer = setTimeout(() => {
+      try {
+        const snapshot = {
+          widgets: Array.from(this.widgets.values()).map((w) => ({
+            id: w.id,
+            pluginId: w.pluginId,
+            title: w.title,
+            icon: w.icon,
+            slot: w.slot,
+            url: w.url,
+            order: w.order
+          })),
+          activeId: this._activeId
+        };
+        localStorage.setItem(PERSISTENCE_KEY, JSON.stringify(snapshot));
+      } catch {
+      }
+    }, 300);
+  }
+};
+var pluginWidgetStore = new WidgetStore();
+window.__pluginWidgetStore = pluginWidgetStore;
+function useWidgetStore() {
+  const [, forceUpdate] = React2.useReducer((x) => x + 1, 0);
+  React2.useEffect(() => pluginWidgetStore.subscribe(forceUpdate), []);
+  return {
+    widgets: pluginWidgetStore.getVisible(),
+    activeId: pluginWidgetStore.activeId
+  };
+}
+function WidgetSlotPanel() {
+  const { widgets, activeId } = useWidgetStore();
+  const activeWidget = activeId ? widgets.find((w) => w.id === activeId) || widgets[0] : widgets[0];
+  const handleClose = React2.useCallback((widgetId) => {
+    pluginWidgetStore.remove(widgetId);
+    if (pluginWidgetStore.size === 0) {
+      useLayoutStore.getState().setSlot("R3", null);
+    }
+  }, []);
+  const handleCloseAll = React2.useCallback(() => {
+    pluginWidgetStore.clear();
+    useLayoutStore.getState().setSlot("R3", null);
+  }, []);
+  if (widgets.length === 0) {
+    return /* @__PURE__ */ jsxs2("div", { className: "w-full h-full flex flex-col items-center justify-center text-text-muted gap-3 bg-surface-primary", children: [
+      /* @__PURE__ */ jsx2("div", { className: "w-12 h-12 rounded-xl bg-cyan-500/5 border border-cyan-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx2("span", { className: "text-xl", children: "\u{1F9E9}" }) }),
+      /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium", children: "No widgets activos" }),
+      /* @__PURE__ */ jsx2("p", { className: "text-xs opacity-60 max-w-[200px] text-center", children: "Selecciona un plugin del sidebar para ver widgets aqu\xED" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "w-full h-full flex flex-col bg-surface-primary overflow-hidden", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex-none flex items-center gap-1 px-2 py-1 bg-surface-secondary border-b border-border-subtle overflow-x-auto", children: [
+      widgets.map((w) => /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          onClick: () => pluginWidgetStore.setActive(w.id),
+          className: `px-2.5 py-1 rounded-md text-[10px] font-medium transition-all whitespace-nowrap ${activeWidget?.id === w.id ? "bg-surface-glass text-text-primary border border-border-default" : "text-text-muted hover:text-text-secondary hover:bg-surface-glass/50"}`,
+          children: [
+            w.icon && /* @__PURE__ */ jsx2("span", { className: "mr-1", children: w.icon }),
+            w.title
+          ]
+        },
+        w.id
+      )),
+      widgets.length > 1 && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: handleCloseAll,
+          className: "ml-auto px-2 py-1 rounded-md text-[10px] text-text-muted hover:text-red-400 hover:bg-red-500/10 transition-all",
+          title: "Close all widgets",
+          children: "\u2715 All"
+        }
+      )
+    ] }),
+    activeWidget && /* @__PURE__ */ jsx2("div", { className: "flex-1 min-h-0 min-w-0 overflow-hidden", children: /* @__PURE__ */ jsx2(
+      WidgetRenderer,
+      {
+        widget: activeWidget,
+        onClose: () => handleClose(activeWidget.id)
+      }
+    ) })
+  ] });
+}
+
+export {
+  pluginWidgetStore,
+  WidgetSlotPanel
+};