dp-widgets-framework 1.6.9 → 1.7.1

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart as BarChart$1, Filter, Search, ArrowUp, ArrowDown, ChevronRight, RefreshCw, Send, Loader2, X, AlignVerticalSpaceAround, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, SlidersHorizontal, GripHorizontal, Edit, MessageCircleX, Edit2 } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart as BarChart$1, Filter, Search, ArrowUp, ArrowDown, ChevronRight, RefreshCw, Loader2, Download, Send, X, AlignVerticalSpaceAround, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, SlidersHorizontal, GripHorizontal, Edit, MessageCircleX, ChevronLeft, Maximize2, Grid3X3, Edit2 } from 'lucide-react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { Slot, createSlot, createSlottable } from '@radix-ui/react-slot';
 import { debounce as debounce$1 } from 'lodash';
@@ -17,6 +17,7 @@ import { v4 } from 'uuid';
 import * as ReactDOM from 'react-dom';
 import { TextMessage, Role } from '@copilotkit/runtime-client-gql';
 import { CopilotKit, useCopilotContext, useCoAgent, useCopilotChat } from '@copilotkit/react-core';
+import jsPDF from 'jspdf';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { format } from 'date-fns';
@@ -44409,6 +44410,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;
@@ -44457,7 +44627,8 @@ function CopilotKitChatbot({
   styles,
   onResetReady,
   widgetIds,
-  datasetId
+  datasetId,
+  dashboardName
 }) {
   var _a, _b, _c, _d;
   const { threadId, setThreadId } = useCopilotContext();
@@ -44474,7 +44645,24 @@ function CopilotKitChatbot({
   const { reset, visibleMessages, appendMessage, isLoading } = useCopilotChat();
   const [inputValue, setInputValue] = useState("");
   const [chatMessages, setChatMessages] = useState([]);
+  const [isExporting, setIsExporting] = useState(false);
   const messagesEndRef = React__default.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;
@@ -44549,6 +44737,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(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(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",
@@ -44624,7 +44831,8 @@ function ChatbotWidget({
   widgetBackendUrl,
   onResetReady,
   widgetIds,
-  datasetId
+  datasetId,
+  dashboardName
 }) {
   var _a, _b;
   const styles = getStyleValues$4((_a = widget.config) == null ? void 0 : _a.styles);
@@ -44648,7 +44856,8 @@ function ChatbotWidget({
           styles,
           onResetReady,
           widgetIds,
-          datasetId
+          datasetId,
+          dashboardName
         }
       )
     }
@@ -47165,7 +47374,8 @@ function WidgetRenderer({
   datasetId,
   pageId,
   onApplyFilters,
-  isEditing = false
+  isEditing = false,
+  dashboardName
 }) {
   const handleConfigUpdate = (config) => {
     if (onConfigUpdate) {
@@ -47197,7 +47407,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,
@@ -48077,7 +48287,8 @@ function WidgetDashboard({
   userId,
   onApplyFilters,
   filterResults,
-  isApplyingFilters = false
+  isApplyingFilters = false,
+  focusWidgetId
 }) {
   const [widgets, setWidgets] = useState([]);
   const [datasetId, setDatasetId] = useState("");
@@ -48094,6 +48305,12 @@ function WidgetDashboard({
   const [editInitialQuery, setEditInitialQuery] = useState("");
   const [editingWidget, setEditingWidget] = useState(null);
   const [widgetResetFunctions, setWidgetResetFunctions] = useState(/* @__PURE__ */ new Map());
+  const displayWidgets = React__default.useMemo(() => {
+    if (focusWidgetId) {
+      return widgets.filter((w) => w.id === focusWidgetId);
+    }
+    return widgets;
+  }, [widgets, focusWidgetId]);
   const getWidgetFilterStatus = useCallback((widgetId) => {
     if (!filterResults) return null;
     const result = filterResults.results.find((r) => r.widgetId === widgetId);
@@ -48692,7 +48909,7 @@ function WidgetDashboard({
   };
   const getLayoutFromWidgets = () => {
     const processedIds = /* @__PURE__ */ new Set();
-    return widgets.filter((widget) => {
+    return displayWidgets.filter((widget) => {
       if (processedIds.has(widget.id)) {
         return false;
       }
@@ -48700,6 +48917,22 @@ function WidgetDashboard({
       return true;
     }).map((widget) => {
       widget.type === "text";
+      if (focusWidgetId && widget.id === focusWidgetId) {
+        return {
+          i: widget.id,
+          x: 0,
+          y: 0,
+          w: 12,
+          // Full width
+          h: 10,
+          // Increased height for presentation
+          minW: 0,
+          minH: 1,
+          isResizable: false,
+          static: true
+          // Prevent any movement in focus mode
+        };
+      }
       return {
         i: widget.id,
         x: widget.position_x,
@@ -48782,11 +49015,15 @@ function WidgetDashboard({
             compactType: "vertical",
             containerPadding: [0, 0],
             margin: [16, 16],
-            children: widgets.map((w) => {
-              var _a, _b;
+            children: displayWidgets.map((w) => {
+              var _a, _b, _c;
               const filterStatus = w.type === "agent" ? getWidgetFilterStatus(w.id) : null;
               const badgeInfo = filterStatus ? getFilterStatusBadge(filterStatus.status) : null;
-              return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${w.type === "text" || w.type === "spacer" ? `${((_b = (_a = w == null ? void 0 : w.config) == null ? void 0 : _a.content) == null ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? "shadow-lg rounded-xl border border-primary-300" : "flex items-center"}` : `shadow-lg rounded-xl border border-primary-300 p-4 ${isEditing ? "pb-14" : "pb-5"}`} relative`, children: [
+              const isFocusMode = focusWidgetId && w.id === focusWidgetId;
+              const widgetBaseStyles = "rounded-xl border border-gray-200 !bg-white";
+              const widgetHoverStyles = isEditing ? "hover:border-primary-500 hover:shadow-lg transition-all duration-200" : "";
+              const widgetShadow = "shadow-[0_2px_8px_-2px_rgba(0,0,0,0.15)]";
+              return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-widget-id": w.id, className: `${w.type === "text" || w.type === "spacer" ? `${((_b = (_a = w == null ? void 0 : w.config) == null ? void 0 : _a.content) == null ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? `${widgetBaseStyles} ${widgetShadow} ${widgetHoverStyles}` : "flex items-center"}` : `${widgetBaseStyles} ${widgetShadow} ${widgetHoverStyles} p-4 ${isEditing ? "pb-14" : "pb-5"}`} ${isFocusMode ? "h-full" : ""} relative`, children: [
                 w.type === "agent" && badgeInfo && !isApplyingFilters && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-2 right-2 z-10", title: (filterStatus == null ? void 0 : filterStatus.reason) || (filterStatus == null ? void 0 : filterStatus.error) || "", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: badgeInfo.variant, className: "text-[10px] px-2 py-0.5 gap-1", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: badgeInfo.icon }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: badgeInfo.label })
@@ -48818,7 +49055,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(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);
             })
@@ -48829,6 +49066,366 @@ function WidgetDashboard({
   ] });
 }
 
+const EXCLUDED_WIDGET_TYPES = ["text", "spacer", "filter", "filters", "Text", "Spacer", "Filter", "Filters"];
+const LaserPointerIcon = ({ className }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "3", fill: "currentColor" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "2", x2: "12", y2: "6" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "2", y1: "12", x2: "6", y2: "12" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "18", y1: "12", x2: "22", y2: "12" })
+    ]
+  }
+);
+function PresentationMode({
+  isOpen,
+  onClose,
+  pageId,
+  dashboardTitle,
+  widgetBackendUrl = "http://localhost:3001",
+  branding = { title: "DASHBOARD", subtitle: "COMPOSER" }
+}) {
+  const [viewMode, setViewMode] = useState("grid");
+  const [widgets, setWidgets] = useState([]);
+  const [focusableWidgets, setFocusableWidgets] = useState([]);
+  const [currentFocusIndex, setCurrentFocusIndex] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [laserPointerActive, setLaserPointerActive] = useState(false);
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const focusContainerRef = useRef(null);
+  const gridContainerRef = useRef(null);
+  useEffect(() => {
+    if (isOpen && pageId) {
+      setLoading(true);
+      setCurrentFocusIndex(0);
+      fetch(`${widgetBackendUrl}/api/widgets?page_id=${pageId}`).then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch widgets");
+        return res.json();
+      }).then((data) => {
+        const widgetsArray = Array.isArray(data) ? data : [];
+        setWidgets(widgetsArray);
+        const focusable = widgetsArray.filter((widget) => !EXCLUDED_WIDGET_TYPES.includes(widget.type)).sort((a, b) => {
+          if (a.position_y !== b.position_y) return a.position_y - b.position_y;
+          return a.position_x - b.position_x;
+        });
+        setFocusableWidgets(focusable);
+        console.log(`[PresentationMode] Loaded ${widgetsArray.length} widgets, ${focusable.length} focusable`);
+      }).catch((error) => {
+        console.error("Failed to fetch widgets:", error);
+        setWidgets([]);
+        setFocusableWidgets([]);
+      }).finally(() => {
+        setLoading(false);
+      });
+    }
+  }, [isOpen, pageId, widgetBackendUrl]);
+  useEffect(() => {
+    if (focusableWidgets.length > 0 && currentFocusIndex >= focusableWidgets.length) {
+      setCurrentFocusIndex(focusableWidgets.length - 1);
+    }
+  }, [focusableWidgets.length, currentFocusIndex]);
+  useEffect(() => {
+    if (!laserPointerActive) return;
+    const handleMouseMove = (e) => {
+      setMousePosition({ x: e.clientX, y: e.clientY });
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, [laserPointerActive]);
+  useEffect(() => {
+    if (!isOpen || viewMode !== "grid" || !gridContainerRef.current) return;
+    const setupWidgetInteractions = () => {
+      var _a;
+      const gridItems = (_a = gridContainerRef.current) == null ? void 0 : _a.querySelectorAll(".react-grid-item");
+      if (!gridItems) return;
+      const handleMouseEnter = (e) => {
+        var _a2;
+        const item = e.currentTarget;
+        const widgetId = item.getAttribute("data-widget-id") || ((_a2 = item.querySelector("[data-widget-id]")) == null ? void 0 : _a2.getAttribute("data-widget-id"));
+        const widget = widgets.find((w) => w.id === widgetId);
+        if (widget && EXCLUDED_WIDGET_TYPES.includes(widget.type)) {
+          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.transition = "box-shadow 0.2s ease-out";
+        item.style.zIndex = "10";
+      };
+      const handleMouseLeave = (e) => {
+        const item = e.currentTarget;
+        item.style.cursor = "";
+        item.style.boxShadow = "";
+        item.style.zIndex = "";
+      };
+      const handleClick = (e) => {
+        var _a2;
+        const item = e.currentTarget;
+        const widgetId = item.getAttribute("data-widget-id") || ((_a2 = item.querySelector("[data-widget-id]")) == null ? void 0 : _a2.getAttribute("data-widget-id"));
+        const widget = widgets.find((w) => w.id === widgetId);
+        if (widget && EXCLUDED_WIDGET_TYPES.includes(widget.type)) {
+          return;
+        }
+        if (widgetId) {
+          const index = focusableWidgets.findIndex((w) => w.id === widgetId);
+          if (index !== -1) {
+            setCurrentFocusIndex(index);
+            setViewMode("focus");
+          }
+        }
+      };
+      gridItems.forEach((item) => {
+        item.addEventListener("mouseenter", handleMouseEnter);
+        item.addEventListener("mouseleave", handleMouseLeave);
+        item.addEventListener("click", handleClick);
+      });
+      return () => {
+        gridItems.forEach((item) => {
+          item.removeEventListener("mouseenter", handleMouseEnter);
+          item.removeEventListener("mouseleave", handleMouseLeave);
+          item.removeEventListener("click", handleClick);
+          item.style.cursor = "";
+          item.style.transform = "";
+          item.style.boxShadow = "";
+        });
+      };
+    };
+    const timeoutId = setTimeout(setupWidgetInteractions, 500);
+    const observer = new MutationObserver(() => {
+      setupWidgetInteractions();
+    });
+    if (gridContainerRef.current) {
+      observer.observe(gridContainerRef.current, {
+        childList: true,
+        subtree: true
+      });
+    }
+    return () => {
+      clearTimeout(timeoutId);
+      observer.disconnect();
+    };
+  }, [isOpen, viewMode, widgets, focusableWidgets, loading]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!isOpen) return;
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+        return;
+      }
+      switch (e.key) {
+        case "Escape":
+          onClose();
+          break;
+        case "f":
+        case "F":
+          setViewMode((prev) => prev === "grid" ? "focus" : "grid");
+          break;
+        case "l":
+        case "L":
+          setLaserPointerActive((prev) => !prev);
+          break;
+        case "ArrowLeft":
+          if (viewMode === "focus") {
+            e.preventDefault();
+            setCurrentFocusIndex(
+              (prev) => prev > 0 ? prev - 1 : focusableWidgets.length - 1
+            );
+          }
+          break;
+        case "ArrowRight":
+          if (viewMode === "focus") {
+            e.preventDefault();
+            setCurrentFocusIndex(
+              (prev) => prev < focusableWidgets.length - 1 ? prev + 1 : 0
+            );
+          }
+          break;
+      }
+    },
+    [isOpen, onClose, viewMode, focusableWidgets.length]
+  );
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) {
+      setViewMode("grid");
+      setCurrentFocusIndex(0);
+      setLaserPointerActive(false);
+    }
+  }, [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(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(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(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(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(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(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",
+      {
+        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;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -49290,5 +49887,5 @@ function DashboardPages({ widgetBackendUrl }) {
   ] });
 }
 
-export { Button, DashboardPages, Input, SavedPages, WidgetDashboard, WidgetPalette, WidgetSettingsPanel, cn };
+export { Button, DashboardPages, Input, PresentationMode, SavedPages, WidgetDashboard, WidgetPalette, WidgetSettingsPanel, cn };
 //# sourceMappingURL=index.esm.js.map