dp-widgets-framework 1.6.9 → 1.7.0

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export type { Widget, WidgetStyles, WidgetConfig, RefWidgetType, WidgetPosition
 export { WidgetSettingsPanel } from './components/WidgetSettingsPanel';
 export { WidgetPalette } from './components/WidgetPalette';
 export { WidgetDashboard } from './components/WidgetDashboard';
+export { default as PresentationMode } from './components/PresentationMode';
 export { default as SavedPages } from './components/pages/SavedPagesPage';
 export { default as DashboardPages } from './components/pages/DashboardPages';
 export { Button } from './components/ui/button';

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, Send, Loader2, 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';
@@ -48077,7 +48077,8 @@ function WidgetDashboard({
   userId,
   onApplyFilters,
   filterResults,
-  isApplyingFilters = false
+  isApplyingFilters = false,
+  focusWidgetId
 }) {
   const [widgets, setWidgets] = useState([]);
   const [datasetId, setDatasetId] = useState("");
@@ -48094,6 +48095,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 +48699,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 +48707,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 +48805,15 @@ function WidgetDashboard({
             compactType: "vertical",
             containerPadding: [0, 0],
             margin: [16, 16],
-            children: widgets.map((w) => {
+            children: displayWidgets.map((w) => {
               var _a, _b;
               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 })
@@ -48829,6 +48856,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 +49677,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

package/dist/index.js

@@ -48105,7 +48105,8 @@ function WidgetDashboard({
   userId,
   onApplyFilters,
   filterResults,
-  isApplyingFilters = false
+  isApplyingFilters = false,
+  focusWidgetId
 }) {
   const [widgets, setWidgets] = React.useState([]);
   const [datasetId, setDatasetId] = React.useState("");
@@ -48122,6 +48123,12 @@ function WidgetDashboard({
   const [editInitialQuery, setEditInitialQuery] = React.useState("");
   const [editingWidget, setEditingWidget] = React.useState(null);
   const [widgetResetFunctions, setWidgetResetFunctions] = React.useState(/* @__PURE__ */ new Map());
+  const displayWidgets = React.useMemo(() => {
+    if (focusWidgetId) {
+      return widgets.filter((w) => w.id === focusWidgetId);
+    }
+    return widgets;
+  }, [widgets, focusWidgetId]);
   const getWidgetFilterStatus = React.useCallback((widgetId) => {
     if (!filterResults) return null;
     const result = filterResults.results.find((r) => r.widgetId === widgetId);
@@ -48720,7 +48727,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;
       }
@@ -48728,6 +48735,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,
@@ -48810,11 +48833,15 @@ function WidgetDashboard({
             compactType: "vertical",
             containerPadding: [0, 0],
             margin: [16, 16],
-            children: widgets.map((w) => {
+            children: displayWidgets.map((w) => {
               var _a, _b;
               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 })
@@ -48857,6 +48884,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] = React.useState("grid");
+  const [widgets, setWidgets] = React.useState([]);
+  const [focusableWidgets, setFocusableWidgets] = React.useState([]);
+  const [currentFocusIndex, setCurrentFocusIndex] = React.useState(0);
+  const [loading, setLoading] = React.useState(true);
+  const [laserPointerActive, setLaserPointerActive] = React.useState(false);
+  const [mousePosition, setMousePosition] = React.useState({ x: 0, y: 0 });
+  const focusContainerRef = React.useRef(null);
+  const gridContainerRef = React.useRef(null);
+  React.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]);
+  React.useEffect(() => {
+    if (focusableWidgets.length > 0 && currentFocusIndex >= focusableWidgets.length) {
+      setCurrentFocusIndex(focusableWidgets.length - 1);
+    }
+  }, [focusableWidgets.length, currentFocusIndex]);
+  React.useEffect(() => {
+    if (!laserPointerActive) return;
+    const handleMouseMove = (e) => {
+      setMousePosition({ x: e.clientX, y: e.clientY });
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, [laserPointerActive]);
+  React.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 = React.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]
+  );
+  React.useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  React.useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  React.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(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
+          ] }) }),
+          /* @__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",
+      {
+        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;
@@ -49321,6 +49708,7 @@ function DashboardPages({ widgetBackendUrl }) {
 exports.Button = Button;
 exports.DashboardPages = DashboardPages;
 exports.Input = Input;
+exports.PresentationMode = PresentationMode;
 exports.SavedPages = SavedPages;
 exports.WidgetDashboard = WidgetDashboard;
 exports.WidgetPalette = WidgetPalette;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dp-widgets-framework",
-  "version": "1.6.9",
+  "version": "1.7.0",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"