dp-widgets-framework 1.7.0 → 1.7.2

package/dist/index.js

@@ -18,6 +18,7 @@ var uuid = require('uuid');
 var ReactDOM = require('react-dom');
 var runtimeClientGql = require('@copilotkit/runtime-client-gql');
 var reactCore = require('@copilotkit/react-core');
+var jsPDF = require('jspdf');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var dateFns = require('date-fns');
@@ -3802,6 +3803,71 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   return coords;
 }
 
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -3831,6 +3897,7 @@ const computePosition$1 = async (reference, floating, config) => {
   let middlewareData = {};
   let resetCount = 0;
   for (let i = 0; i < validMiddleware.length; i++) {
+    var _platform$detectOverf;
     const {
       name,
       fn
@@ -3848,7 +3915,10 @@ const computePosition$1 = async (reference, floating, config) => {
       strategy,
       middlewareData,
       rects,
-      platform,
+      platform: {
+        ...platform,
+        detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
+      },
       elements: {
         reference,
         floating
@@ -3893,71 +3963,6 @@ const computePosition$1 = async (reference, floating, config) => {
   };
 };
 
-/**
- * Resolves with an object of overflow side offsets that determine how much the
- * element is overflowing a given clipping boundary on each side.
- * - positive = overflowing the boundary by that number of pixels
- * - negative = how many pixels left before it will overflow
- * - 0 = lies flush with the boundary
- * @see https://floating-ui.com/docs/detectOverflow
- */
-async function detectOverflow(state, options) {
-  var _await$platform$isEle;
-  if (options === void 0) {
-    options = {};
-  }
-  const {
-    x,
-    y,
-    platform,
-    rects,
-    elements,
-    strategy
-  } = state;
-  const {
-    boundary = 'clippingAncestors',
-    rootBoundary = 'viewport',
-    elementContext = 'floating',
-    altBoundary = false,
-    padding = 0
-  } = evaluate(options, state);
-  const paddingObject = getPaddingObject(padding);
-  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
-  const element = elements[altBoundary ? altContext : elementContext];
-  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
-    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
-    boundary,
-    rootBoundary,
-    strategy
-  }));
-  const rect = elementContext === 'floating' ? {
-    x,
-    y,
-    width: rects.floating.width,
-    height: rects.floating.height
-  } : rects.reference;
-  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
-  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
-    x: 1,
-    y: 1
-  } : {
-    x: 1,
-    y: 1
-  };
-  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
-    elements,
-    rect,
-    offsetParent,
-    strategy
-  }) : rect);
-  return {
-    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
-    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
-    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
-    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
-  };
-}
-
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
@@ -4090,7 +4095,7 @@ const flip$2 = function (options) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -4197,7 +4202,8 @@ const hide$2 = function (options) {
     options,
     async fn(state) {
       const {
-        rects
+        rects,
+        platform
       } = state;
       const {
         strategy = 'referenceHidden',
@@ -4206,7 +4212,7 @@ const hide$2 = function (options) {
       switch (strategy) {
         case 'referenceHidden':
           {
-            const overflow = await detectOverflow(state, {
+            const overflow = await platform.detectOverflow(state, {
               ...detectOverflowOptions,
               elementContext: 'reference'
             });
@@ -4220,7 +4226,7 @@ const hide$2 = function (options) {
           }
         case 'escaped':
           {
-            const overflow = await detectOverflow(state, {
+            const overflow = await platform.detectOverflow(state, {
               ...detectOverflowOptions,
               altBoundary: true
             });
@@ -4343,7 +4349,8 @@ const shift$2 = function (options) {
       const {
         x,
         y,
-        placement
+        placement,
+        platform
       } = state;
       const {
         mainAxis: checkMainAxis = true,
@@ -4366,7 +4373,7 @@ const shift$2 = function (options) {
         x,
         y
       };
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -4498,7 +4505,7 @@ const size$2 = function (options) {
         apply = () => {},
         ...detectOverflowOptions
       } = evaluate(options, state);
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const side = getSide(placement);
       const alignment = getAlignment(placement);
       const isYAxis = getSideAxis(placement) === 'y';
@@ -44437,6 +44444,175 @@ function SpacerWidget({ widget }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", style: styles });
 }
 
+const WISENBAKER_PRIMARY = "#8f002d";
+const WISENBAKER_GRAY = "#475569";
+function parseMarkdown(text) {
+  const segments = [];
+  const regex = /\*\*(.+?)\*\*/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({ text: text.slice(lastIndex, match.index), bold: false });
+    }
+    segments.push({ text: match[1], bold: true });
+    lastIndex = regex.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    segments.push({ text: text.slice(lastIndex), bold: false });
+  }
+  return segments.length > 0 ? segments : [{ text, bold: false }];
+}
+function formatLine(line) {
+  const bulletMatch = line.match(/^(\s*)[\*\-•]\s+(.*)$/);
+  if (bulletMatch) {
+    const indent = bulletMatch[1].length;
+    return { text: bulletMatch[2], isBullet: true, indent };
+  }
+  const numberedMatch = line.match(/^(\s*)\d+\.\s+(.*)$/);
+  if (numberedMatch) {
+    const indent = numberedMatch[1].length;
+    return { text: numberedMatch[2], isBullet: true, indent };
+  }
+  return { text: line, isBullet: false, indent: 0 };
+}
+function generateExportFilename(widgetId) {
+  const date = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+  return `NSight_Chat_Export_${widgetId}_${date}.pdf`;
+}
+function exportChatToPDF(options) {
+  const { widgetId, messages, dashboardName } = options;
+  const doc = new jsPDF();
+  let yPosition = 25;
+  const pageHeight = doc.internal.pageSize.height;
+  const pageWidth = doc.internal.pageSize.width;
+  const margin = 20;
+  const contentWidth = pageWidth - margin * 2;
+  const maxWidth = contentWidth - 10;
+  const checkPageBreak = (requiredSpace = 20) => {
+    if (yPosition > pageHeight - requiredSpace) {
+      doc.addPage();
+      yPosition = 25;
+    }
+  };
+  const renderFormattedText = (text, x, maxW, baseIndent = 0) => {
+    const lines = text.split("\n");
+    lines.forEach((line) => {
+      const { text: lineText, isBullet, indent } = formatLine(line);
+      const lineIndent = x + baseIndent + indent * 2;
+      if (isBullet) {
+        checkPageBreak(10);
+        doc.setFont("helvetica", "normal");
+        doc.text("\u2022", lineIndent, yPosition);
+      }
+      const textX = isBullet ? lineIndent + 5 : lineIndent;
+      const textMaxWidth = maxW - (textX - x);
+      const segments = parseMarkdown(lineText);
+      let currentLine = "";
+      let currentX = textX;
+      segments.forEach((segment) => {
+        doc.setFont("helvetica", segment.bold ? "bold" : "normal");
+        const words = segment.text.split(" ");
+        words.forEach((word, wordIndex) => {
+          const testLine = currentLine + (currentLine ? " " : "") + word;
+          const testWidth = doc.getTextWidth(testLine);
+          if (testWidth > textMaxWidth && currentLine) {
+            checkPageBreak(10);
+            doc.text(currentLine, currentX, yPosition);
+            yPosition += 5;
+            currentLine = word;
+            currentX = isBullet ? lineIndent + 5 : x + baseIndent;
+          } else {
+            currentLine = testLine;
+          }
+        });
+      });
+      if (currentLine) {
+        checkPageBreak(10);
+        const lastSegment = segments[segments.length - 1];
+        doc.setFont("helvetica", (lastSegment == null ? void 0 : lastSegment.bold) ? "bold" : "normal");
+        doc.text(currentLine, currentX, yPosition);
+        yPosition += 5;
+      }
+    });
+  };
+  doc.setFontSize(18);
+  doc.setFont("helvetica", "bold");
+  doc.setTextColor(WISENBAKER_PRIMARY);
+  doc.text("Wisenbaker AI Analytics", margin, yPosition);
+  yPosition += 8;
+  doc.setFontSize(11);
+  doc.setFont("helvetica", "normal");
+  doc.setTextColor(WISENBAKER_GRAY);
+  doc.text("Chat Export", margin, yPosition);
+  yPosition += 12;
+  doc.setFontSize(9);
+  doc.setTextColor("#666666");
+  if (dashboardName) {
+    doc.setFont("helvetica", "bold");
+    doc.text("Dashboard:", margin, yPosition);
+    doc.setFont("helvetica", "normal");
+    doc.text(dashboardName, margin + 38, yPosition);
+    yPosition += 5;
+  }
+  doc.setFont("helvetica", "bold");
+  doc.text("Exported:", margin, yPosition);
+  doc.setFont("helvetica", "normal");
+  doc.text((/* @__PURE__ */ new Date()).toLocaleString(), margin + 38, yPosition);
+  doc.setFont("helvetica", "bold");
+  doc.text("Messages:", margin + 100, yPosition);
+  doc.setFont("helvetica", "normal");
+  doc.text(String(messages.length), margin + 130, yPosition);
+  yPosition += 12;
+  doc.setDrawColor(200, 200, 200);
+  doc.setLineWidth(0.5);
+  doc.line(margin, yPosition, pageWidth - margin, yPosition);
+  yPosition += 8;
+  messages.forEach((message, index) => {
+    checkPageBreak(30);
+    const isUser = message.role === "user";
+    const roleLabel = isUser ? "You" : "AI Assistant";
+    const timestamp = message.createdAt ? new Date(message.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "";
+    const bgColor = isUser ? [143, 0, 45] : [241, 243, 245];
+    doc.setFillColor(bgColor[0], bgColor[1], bgColor[2]);
+    doc.setFontSize(9);
+    doc.setFont("helvetica", "bold");
+    doc.setTextColor(isUser ? WISENBAKER_PRIMARY : WISENBAKER_GRAY);
+    doc.text(roleLabel, margin, yPosition);
+    if (timestamp) {
+      doc.setFont("helvetica", "normal");
+      doc.setTextColor("#888888");
+      doc.text(timestamp, margin + doc.getTextWidth(roleLabel) + 5, yPosition);
+    }
+    yPosition += 6;
+    doc.setFontSize(10);
+    doc.setTextColor("#333333");
+    doc.setFont("helvetica", "normal");
+    renderFormattedText(message.content, margin + 5, maxWidth - 5, 0);
+    yPosition += 8;
+    if (index < messages.length - 1) {
+      doc.setDrawColor(230, 230, 230);
+      doc.setLineWidth(0.3);
+      doc.line(margin + 10, yPosition - 4, pageWidth - margin - 10, yPosition - 4);
+    }
+  });
+  const totalPages = doc.getNumberOfPages();
+  for (let i = 1; i <= totalPages; i++) {
+    doc.setPage(i);
+    doc.setFontSize(8);
+    doc.setTextColor("#999999");
+    doc.setFont("helvetica", "normal");
+    doc.text(
+      `Wisenbaker AI Analytics \u2022 Page ${i} of ${totalPages}`,
+      pageWidth / 2,
+      pageHeight - 10,
+      { align: "center" }
+    );
+  }
+  const filename = generateExportFilename(widgetId);
+  doc.save(filename);
+}
+
 var __defProp$b = Object.defineProperty;
 var __defProps$9 = Object.defineProperties;
 var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
@@ -44485,7 +44661,8 @@ function CopilotKitChatbot({
   styles,
   onResetReady,
   widgetIds,
-  datasetId
+  datasetId,
+  dashboardName
 }) {
   var _a, _b, _c, _d;
   const { threadId, setThreadId } = reactCore.useCopilotContext();
@@ -44502,7 +44679,24 @@ function CopilotKitChatbot({
   const { reset, visibleMessages, appendMessage, isLoading } = reactCore.useCopilotChat();
   const [inputValue, setInputValue] = React.useState("");
   const [chatMessages, setChatMessages] = React.useState([]);
+  const [isExporting, setIsExporting] = React.useState(false);
   const messagesEndRef = React.useRef(null);
+  const handleExport = async () => {
+    if (chatMessages.length === 0) return;
+    setIsExporting(true);
+    try {
+      exportChatToPDF({
+        widgetId: widget.id,
+        widgetTitle: widget.title,
+        messages: chatMessages,
+        dashboardName
+      });
+    } catch (error) {
+      console.error("Export failed:", error);
+    } finally {
+      setIsExporting(false);
+    }
+  };
   const scrollToBottom = () => {
     var _a2;
     const el = messagesEndRef.current;
@@ -44577,6 +44771,25 @@ function CopilotKitChatbot({
       /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: widget.title })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 h-full flex flex-col", children: [
+      chatMessages.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start px-4 py-2 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          onClick: handleExport,
+          disabled: isExporting,
+          className: cn(
+            "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md",
+            "bg-gray-100 border border-gray-200",
+            "text-gray-700 hover:bg-gray-200 hover:border-gray-300",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            "transition-colors duration-150"
+          ),
+          title: "Export conversation as PDF",
+          children: [
+            isExporting ? /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Download, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export PDF" })
+          ]
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: chatMessages.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center text-gray-500 text-xs mt-8", children: ((_b = widget.config) == null ? void 0 : _b.copilotInitialMessage) || ((_c = widget.config) == null ? void 0 : _c.placeholder) || "How can I help you today?" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         chatMessages.map((message) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
@@ -44652,7 +44865,8 @@ function ChatbotWidget({
   widgetBackendUrl,
   onResetReady,
   widgetIds,
-  datasetId
+  datasetId,
+  dashboardName
 }) {
   var _a, _b;
   const styles = getStyleValues$4((_a = widget.config) == null ? void 0 : _a.styles);
@@ -44676,7 +44890,8 @@ function ChatbotWidget({
           styles,
           onResetReady,
           widgetIds,
-          datasetId
+          datasetId,
+          dashboardName
         }
       )
     }
@@ -47193,7 +47408,8 @@ function WidgetRenderer({
   datasetId,
   pageId,
   onApplyFilters,
-  isEditing = false
+  isEditing = false,
+  dashboardName
 }) {
   const handleConfigUpdate = (config) => {
     if (onConfigUpdate) {
@@ -47225,7 +47441,7 @@ function WidgetRenderer({
           }
         );
       case "chatbot":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(ChatbotWidget, { widget, showHeader: false, widgetBackendUrl, onResetReady, widgetIds, datasetId });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(ChatbotWidget, { widget, showHeader: false, widgetBackendUrl, onResetReady, widgetIds, datasetId, dashboardName });
       case "filters":
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           FiltersWidget,
@@ -48834,7 +49050,7 @@ function WidgetDashboard({
             containerPadding: [0, 0],
             margin: [16, 16],
             children: displayWidgets.map((w) => {
-              var _a, _b;
+              var _a, _b, _c;
               const filterStatus = w.type === "agent" ? getWidgetFilterStatus(w.id) : null;
               const badgeInfo = filterStatus ? getFilterStatusBadge(filterStatus.status) : null;
               const isFocusMode = focusWidgetId && w.id === focusWidgetId;
@@ -48873,7 +49089,7 @@ function WidgetDashboard({
                     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: () => handleClearChat(w == null ? void 0 : w.id), onMouseOver: () => setVisibleClearButton(w == null ? void 0 : w.id), onMouseLeave: () => setVisibleClearButton(""), className: "absolute top-[12px] right-0 z-40 flex align-middle justify-center gap-2 text-sm px-4 py-2 border-primary-300 rounded-l-sm w-fit bg-primary-700 text-white cursor-pointer shadow-md transition-all", children: /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.MessageCircleX, { className: "w-5 h-5" }) }),
                     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `absolute top-[56px] right-[16px] z-50 w-max py-1 text-xs px-2 rounded-sm text-white bg-gray-950 ${visibleClearButton === (w == null ? void 0 : w.id) ? "block" : "hidden"}`, children: "Clear Chat" })
                   ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter((widget) => widget.type !== "chatbot").map((widget) => widget.id), datasetId, pageId, onApplyFilters, isEditing })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter((widget) => widget.type !== "chatbot").map((widget) => widget.id), datasetId, pageId, onApplyFilters, isEditing, dashboardName: ((_c = pageData == null ? void 0 : pageData.basic) == null ? void 0 : _c.title) || (pageData == null ? void 0 : pageData.name) || (pageData == null ? void 0 : pageData.title) })
                 ] })
               ] }, w.id);
             })
@@ -48974,7 +49190,7 @@ function PresentationMode({
           return;
         }
         item.style.cursor = "pointer";
-        item.style.boxShadow = "0 0 0 3px var(--primary-500, #3b82f6), 0 10px 30px -5px rgba(0, 0, 0, 0.2)";
+        item.style.boxShadow = "0 0 0 3px var(--primary-500), 0 10px 30px -5px rgba(0, 0, 0, 0.2)";
         item.style.transition = "box-shadow 0.2s ease-out";
         item.style.zIndex = "10";
       };
@@ -49092,156 +49308,162 @@ function PresentationMode({
   }, [isOpen]);
   if (!isOpen) return null;
   const currentFocusWidget = focusableWidgets[currentFocusIndex];
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-50 bg-white flex flex-col", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 bg-white shrink-0", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xl font-bold text-primary-700 tracking-wide", children: branding.title }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-primary-500 tracking-[0.2em] -mt-1", children: branding.subtitle })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute left-1/2 transform -translate-x-1/2 text-center", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-lg font-bold text-gray-900 uppercase tracking-wide", children: dashboardTitle }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-1 bg-primary-600 mx-auto mt-1 rounded" })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          onClick: onClose,
-          className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
-          "aria-label": "Close presentation",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.X, { className: "w-6 h-6 text-gray-600" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("main", { className: `flex-1 min-h-0 ${viewMode === "grid" ? "overflow-auto bg-gray-50 p-6" : "overflow-hidden bg-gray-100"}`, children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 border-4 border-primary-600 border-t-transparent rounded-full animate-spin" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600", children: "Loading widgets..." })
-    ] }) }) : viewMode === "grid" ? (
-      /* Grid View - Show all widgets using WidgetDashboard */
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full relative", ref: gridContainerRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        WidgetDashboard,
-        {
-          pageId,
-          isEditing: false,
-          selectedWidget: null,
-          onWidgetSelect: () => {
-          },
-          openWidgetPallete: false,
-          onCloseWidgetPallete: () => {
-          },
-          onApplyFilters: () => {
-          },
-          isApplyingFilters: false,
-          onSaveLayoutReady: () => {
-          },
-          widgetBackendUrl
-        },
-        `presentation-grid-${pageId}`
-      ) })
-    ) : (
-      /* Focus View - Show one widget at a time */
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full flex flex-col", ref: focusContainerRef, children: focusableWidgets.length > 0 && currentFocusWidget ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col min-h-0", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "shrink-0 bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              onClick: () => setCurrentFocusIndex((prev) => prev > 0 ? prev - 1 : focusableWidgets.length - 1),
-              className: "p-2 rounded-full hover:bg-gray-100 transition-colors disabled:opacity-30",
-              disabled: focusableWidgets.length <= 1,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.ChevronLeft, { className: "w-5 h-5 text-gray-600" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-500", children: [
-            currentFocusIndex + 1,
-            " of ",
-            focusableWidgets.length
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: `fixed inset-0 z-50 bg-white flex flex-col ${laserPointerActive ? "[&_*]:!cursor-none !cursor-none" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 bg-white shrink-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xl font-bold text-primary-700 tracking-wide", children: branding.title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-primary-500 tracking-[0.2em] -mt-1", children: branding.subtitle })
           ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute left-1/2 transform -translate-x-1/2 text-center", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-lg font-bold text-gray-900 uppercase tracking-wide", children: dashboardTitle }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-1 bg-primary-600 mx-auto mt-1 rounded" })
+          ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
-              onClick: () => setCurrentFocusIndex((prev) => prev < focusableWidgets.length - 1 ? prev + 1 : 0),
-              className: "p-2 rounded-full hover:bg-gray-100 transition-colors disabled:opacity-30",
-              disabled: focusableWidgets.length <= 1,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.ChevronRight, { className: "w-5 h-5 text-gray-600" })
+              onClick: onClose,
+              className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
+              "aria-label": "Close presentation",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.X, { className: "w-6 h-6 text-gray-600" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 bg-white p-6 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full w-full rounded-xl border border-gray-200 bg-white shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          WidgetRenderer,
-          {
-            widget: currentFocusWidget,
-            widgetBackendUrl,
-            pageId,
-            isEditing: false
-          },
-          `focus-widget-${currentFocusWidget.id}`
-        ) }) })
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-gray-500", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Maximize2, { className: "w-12 h-12 mx-auto mb-4 text-gray-300" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-medium", children: "No widgets available for focus view" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm mt-2", children: "Text, Spacer, and Filter widgets are excluded." })
-      ] }) }) })
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("footer", { className: "bg-white border-t border-gray-200 py-4 shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 bg-gray-100 rounded-full p-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "button",
-          {
-            onClick: () => setViewMode("grid"),
-            className: `flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all ${viewMode === "grid" ? "bg-primary-700 text-white shadow-md" : "text-gray-600 hover:text-gray-900"}`,
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Grid3X3, { className: "w-4 h-4" }),
-              "Grid"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("main", { className: `flex-1 min-h-0 ${viewMode === "grid" ? "overflow-auto bg-gray-50 p-6" : "overflow-hidden bg-gray-100"}`, children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 border-4 border-primary-600 border-t-transparent rounded-full animate-spin" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600", children: "Loading widgets..." })
+        ] }) }) : viewMode === "grid" ? (
+          /* Grid View - Show all widgets using WidgetDashboard */
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full relative", ref: gridContainerRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            WidgetDashboard,
+            {
+              pageId,
+              isEditing: false,
+              selectedWidget: null,
+              onWidgetSelect: () => {
+              },
+              openWidgetPallete: false,
+              onCloseWidgetPallete: () => {
+              },
+              onApplyFilters: () => {
+              },
+              isApplyingFilters: false,
+              onSaveLayoutReady: () => {
+              },
+              widgetBackendUrl
+            },
+            `presentation-grid-${pageId}`
+          ) })
+        ) : (
+          /* Focus View - Show one widget at a time */
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full flex flex-col", ref: focusContainerRef, children: focusableWidgets.length > 0 && currentFocusWidget ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col min-h-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "shrink-0 bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: () => setCurrentFocusIndex((prev) => prev > 0 ? prev - 1 : focusableWidgets.length - 1),
+                  className: "p-2 rounded-full hover:bg-gray-100 transition-colors disabled:opacity-30",
+                  disabled: focusableWidgets.length <= 1,
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.ChevronLeft, { className: "w-5 h-5 text-gray-600" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-500", children: [
+                currentFocusIndex + 1,
+                " of ",
+                focusableWidgets.length
+              ] }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: () => setCurrentFocusIndex((prev) => prev < focusableWidgets.length - 1 ? prev + 1 : 0),
+                  className: "p-2 rounded-full hover:bg-gray-100 transition-colors disabled:opacity-30",
+                  disabled: focusableWidgets.length <= 1,
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.ChevronRight, { className: "w-5 h-5 text-gray-600" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 bg-white p-6 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full w-full rounded-xl border border-gray-200 bg-white shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              WidgetRenderer,
+              {
+                widget: currentFocusWidget,
+                widgetBackendUrl,
+                pageId,
+                isEditing: false
+              },
+              `focus-widget-${currentFocusWidget.id}`
+            ) }) })
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-gray-500", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Maximize2, { className: "w-12 h-12 mx-auto mb-4 text-gray-300" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-medium", children: "No widgets available for focus view" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm mt-2", children: "Text, Spacer, and Filter widgets are excluded." })
+          ] }) }) })
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("footer", { className: "bg-white border-t border-gray-200 py-4 shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 bg-gray-100 rounded-full p-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                onClick: () => setViewMode("grid"),
+                className: `flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all ${viewMode === "grid" ? "bg-primary-700 text-white shadow-md" : "text-gray-600 hover:text-gray-900"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Grid3X3, { className: "w-4 h-4" }),
+                  "Grid"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                onClick: () => setViewMode("focus"),
+                className: `flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all ${viewMode === "focus" ? "bg-primary-700 text-white shadow-md" : "text-gray-600 hover:text-gray-900"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Maximize2, { className: "w-4 h-4" }),
+                  "Focus"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-px h-6 bg-gray-300 mx-2" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                onClick: () => setLaserPointerActive((prev) => !prev),
+                className: `p-2 transition-colors rounded-full ${laserPointerActive ? "bg-primary-600 text-white" : "text-gray-600 hover:text-gray-900 hover:bg-gray-200"}`,
+                "aria-label": "Toggle laser pointer (L)",
+                title: "Toggle laser pointer (L)",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(LaserPointerIcon, { className: "w-4 h-4" })
+              }
+            ),
+            viewMode === "focus" && focusableWidgets.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-px h-6 bg-gray-300 mx-2" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600 px-2", children: [
+                currentFocusIndex + 1,
+                " / ",
+                focusableWidgets.length
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-400 uppercase tracking-wider", children: "ESC TO EXIT \u2022 F TO TOGGLE \u2022 L FOR LASER \u2022 ARROWS TO NAVIGATE" })
+        ] }) }),
+        laserPointerActive && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
           {
-            onClick: () => setViewMode("focus"),
-            className: `flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all ${viewMode === "focus" ? "bg-primary-700 text-white shadow-md" : "text-gray-600 hover:text-gray-900"}`,
+            className: "fixed pointer-events-none z-[100] transform -translate-x-1/2 -translate-y-1/2",
+            style: {
+              left: mousePosition.x,
+              top: mousePosition.y
+            },
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Maximize2, { className: "w-4 h-4" }),
-              "Focus"
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 w-8 h-8 -translate-x-1/2 -translate-y-1/2 bg-red-500/20 rounded-full blur-md" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute w-4 h-4 -translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full shadow-lg shadow-red-500/50" })
             ]
           }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-px h-6 bg-gray-300 mx-2" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            onClick: () => setLaserPointerActive((prev) => !prev),
-            className: `p-2 transition-colors rounded-full ${laserPointerActive ? "bg-primary-600 text-white" : "text-gray-600 hover:text-gray-900 hover:bg-gray-200"}`,
-            "aria-label": "Toggle laser pointer (L)",
-            title: "Toggle laser pointer (L)",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(LaserPointerIcon, { className: "w-4 h-4" })
-          }
-        ),
-        viewMode === "focus" && focusableWidgets.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-px h-6 bg-gray-300 mx-2" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600 px-2", children: [
-            currentFocusIndex + 1,
-            " / ",
-            focusableWidgets.length
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-400 uppercase tracking-wider", children: "ESC TO EXIT \u2022 F TO TOGGLE \u2022 L FOR LASER \u2022 ARROWS TO NAVIGATE" })
-    ] }) }),
-    laserPointerActive && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: "fixed pointer-events-none z-[100] transform -translate-x-1/2 -translate-y-1/2",
-        style: {
-          left: mousePosition.x,
-          top: mousePosition.y
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 w-8 h-8 -translate-x-1/2 -translate-y-1/2 bg-red-500/20 rounded-full blur-md" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute w-4 h-4 -translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full shadow-lg shadow-red-500/50" })
-        ]
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 }
 
 var __defProp = Object.defineProperty;