@burdenoff/microfe-bigconsole 2026.510.54

package/dist/bigconsole/components/widgets/WidgetMenu.js

@@ -0,0 +1,296 @@
+import { useWidgetStore as e } from "../../store/widgetStore.js";
+import "../../store/index.js";
+import t from "../../hooks/useWidgetOperations.js";
+import "../../hooks/index.js";
+import { memo as n, useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { createPortal as u } from "react-dom";
+//#region src/bigconsole/components/widgets/WidgetMenu.tsx
+var d = n(function({ widget: n, isEditMode: d, onRefresh: f, onExportCSV: p, onExportPNG: m }) {
+	let [h, g] = o(!1), [_, v] = o({
+		top: 0,
+		left: 0
+	}), y = a(null), b = a(null), x = e((e) => e.selectWidget), S = e((e) => e.copyWidget), C = e((e) => e.cutWidget), w = e((e) => e.removeWidget), T = e((e) => e.openConfigPanel), { duplicateWidget: E, deleteWidget: D, refreshWidgetData: O } = t(n.pageId, n.dashboardId, { skipFetch: !0 });
+	i(() => {
+		let e = (e) => {
+			y.current && !y.current.contains(e.target) && b.current && !b.current.contains(e.target) && g(!1);
+		};
+		return h && document.addEventListener("mousedown", e), () => {
+			document.removeEventListener("mousedown", e);
+		};
+	}, [h]), i(() => {
+		let e = (e) => {
+			e.key === "Escape" && (g(!1), b.current?.focus());
+		};
+		return h && document.addEventListener("keydown", e), () => {
+			document.removeEventListener("keydown", e);
+		};
+	}, [h]);
+	let k = r((e) => {
+		e.stopPropagation(), g((e) => {
+			if (!e && b.current) {
+				let e = b.current.getBoundingClientRect(), t = e.bottom + 4, n = e.right - 160;
+				n + 160 > window.innerWidth - 10 && (n = window.innerWidth - 160 - 10), n < 10 && (n = 10), t + 320 > window.innerHeight - 10 && (t = e.top - 320 - 4, t < 10 && (t = 10)), v({
+					top: t + window.scrollY,
+					left: n + window.scrollX
+				});
+			}
+			return !e;
+		});
+	}, []), A = [
+		{
+			id: "edit",
+			label: "Edit Widget",
+			icon: /* @__PURE__ */ c("svg", {
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				className: "w-4 h-4",
+				children: /* @__PURE__ */ c("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2,
+					d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+				})
+			}),
+			action: () => {
+				x(n.id), T(), g(!1);
+			},
+			disabled: !d
+		},
+		{
+			id: "refresh",
+			label: "Refresh Data",
+			icon: /* @__PURE__ */ c("svg", {
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				className: "w-4 h-4",
+				children: /* @__PURE__ */ c("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2,
+					d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+				})
+			}),
+			action: async () => {
+				g(!1), f ? f() : await O(n.id);
+			},
+			disabled: !1
+		},
+		{
+			id: "exportCSV",
+			label: "Export CSV",
+			icon: /* @__PURE__ */ c("svg", {
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				className: "w-4 h-4",
+				children: /* @__PURE__ */ c("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2,
+					d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+				})
+			}),
+			action: () => {
+				g(!1), p?.();
+			},
+			disabled: !p
+		},
+		{
+			id: "exportPNG",
+			label: "Export PNG",
+			icon: /* @__PURE__ */ c("svg", {
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				className: "w-4 h-4",
+				children: /* @__PURE__ */ c("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2,
+					d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+				})
+			}),
+			action: () => {
+				g(!1), m?.();
+			},
+			disabled: !m
+		},
+		{
+			id: "divider1",
+			label: "",
+			icon: /* @__PURE__ */ c(s, {}),
+			action: () => {},
+			divider: !0
+		},
+		{
+			id: "copy",
+			label: "Copy",
+			icon: /* @__PURE__ */ c("svg", {
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				className: "w-4 h-4",
+				children: /* @__PURE__ */ c("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2,
+					d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+				})
+			}),
+			action: () => {
+				S(n.id), g(!1);
+			},
+			disabled: !d
+		},
+		{
+			id: "cut",
+			label: "Cut",
+			icon: /* @__PURE__ */ c("svg", {
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				className: "w-4 h-4",
+				children: /* @__PURE__ */ c("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2,
+					d: "M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 10-4.243 4.243 3 3 0 004.243-4.243zm0-5.758a3 3 0 10-4.243-4.243 3 3 0 004.243 4.243z"
+				})
+			}),
+			action: () => {
+				C(n.id), g(!1);
+			},
+			disabled: !d
+		},
+		{
+			id: "duplicate",
+			label: "Duplicate",
+			icon: /* @__PURE__ */ c("svg", {
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				className: "w-4 h-4",
+				children: /* @__PURE__ */ c("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2,
+					d: "M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
+				})
+			}),
+			action: async () => {
+				g(!1);
+				let e = {
+					x: (n.positionX ?? 0) + 1,
+					y: (n.positionY ?? 0) + 1,
+					width: n.positionWidth ?? 4,
+					height: n.positionHeight ?? 4
+				};
+				await E(n.id, e, `${n.title} (Copy)`);
+			},
+			disabled: !d
+		},
+		{
+			id: "divider2",
+			label: "",
+			icon: /* @__PURE__ */ c(s, {}),
+			action: () => {},
+			divider: !0
+		},
+		{
+			id: "delete",
+			label: "Delete",
+			icon: /* @__PURE__ */ c("svg", {
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				className: "w-4 h-4",
+				children: /* @__PURE__ */ c("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2,
+					d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+				})
+			}),
+			action: async () => {
+				window.confirm("Are you sure you want to delete this widget?") ? (g(!1), await D(n.id) || w(n.id)) : g(!1);
+			},
+			disabled: !d,
+			destructive: !0
+		}
+	];
+	return /* @__PURE__ */ l("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ c("button", {
+			ref: b,
+			type: "button",
+			onClick: k,
+			className: `
+          p-1.5 rounded-md
+          text-text-secondary
+          hover:text-text-primary
+          hover:bg-bg-muted
+          transition-colors
+          ${h ? "bg-bg-muted" : ""}
+        `,
+			title: "Widget options",
+			"aria-haspopup": "menu",
+			"aria-expanded": h,
+			children: /* @__PURE__ */ l("svg", {
+				className: "w-4 h-4",
+				fill: "currentColor",
+				viewBox: "0 0 24 24",
+				children: [
+					/* @__PURE__ */ c("circle", {
+						cx: "12",
+						cy: "5",
+						r: "2"
+					}),
+					/* @__PURE__ */ c("circle", {
+						cx: "12",
+						cy: "12",
+						r: "2"
+					}),
+					/* @__PURE__ */ c("circle", {
+						cx: "12",
+						cy: "19",
+						r: "2"
+					})
+				]
+			})
+		}), h && u(/* @__PURE__ */ c("div", {
+			ref: y,
+			style: {
+				position: "fixed",
+				top: _.top,
+				left: _.left,
+				zIndex: 99999
+			},
+			className: "\n            min-w-[160px]\n            py-1\n            bg-bg-surface\n            border border-border-default\n            rounded-lg shadow-lg\n          ",
+			role: "menu",
+			"aria-orientation": "vertical",
+			children: A.map((e) => e.divider ? /* @__PURE__ */ c("div", { className: "my-1 border-t border-border-default" }, e.id) : /* @__PURE__ */ l("button", {
+				type: "button",
+				onClick: (t) => {
+					t.stopPropagation(), e.action();
+				},
+				disabled: e.disabled,
+				className: `
+                  w-full flex items-center gap-2
+                  px-3 py-2 text-left text-sm
+                  transition-colors
+                  ${e.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-bg-muted"}
+                  ${e.destructive ? "text-state-error hover:text-state-error" : "text-text-primary"}
+                `,
+				role: "menuitem",
+				children: [e.icon, /* @__PURE__ */ c("span", { children: e.label })]
+			}, e.id))
+		}), document.body)]
+	});
+});
+//#endregion
+export { d as default };
+
+//# sourceMappingURL=WidgetMenu.js.map

package/dist/bigconsole/components/widgets/WidgetMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetMenu.js","names":[],"sources":["../../../../src/bigconsole/components/widgets/WidgetMenu.tsx"],"sourcesContent":["/**\n * WidgetMenu Component\n *\n * Dropdown menu with widget actions (edit, duplicate, delete, etc.)\n */\n\nimport { type FC, type ReactElement, useState, useRef, useEffect, useCallback, memo } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { Widget } from '../../types';\nimport { useWidgetStore } from '../../store';\nimport { useWidgetOperations } from '../../hooks';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidgetMenuProps {\n  /** The widget data */\n  widget: Widget;\n  /** Whether in edit mode */\n  isEditMode?: boolean;\n  /** Callback to refresh widget */\n  onRefresh?: () => void;\n  /** Callback to export as CSV */\n  onExportCSV?: () => void;\n  /** Callback to export as PNG */\n  onExportPNG?: () => void;\n}\n\ninterface MenuItem {\n  id: string;\n  label: string;\n  icon: ReactElement;\n  action: () => void;\n  disabled?: boolean;\n  destructive?: boolean;\n  divider?: boolean;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const WidgetMenu: FC<WidgetMenuProps> = memo(function WidgetMenu({\n  widget,\n  isEditMode,\n  onRefresh,\n  onExportCSV,\n  onExportPNG,\n}) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });\n  const menuRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  // Store actions\n  const selectWidget = useWidgetStore((state) => state.selectWidget);\n  const copyWidget = useWidgetStore((state) => state.copyWidget);\n  const cutWidget = useWidgetStore((state) => state.cutWidget);\n  const removeWidget = useWidgetStore((state) => state.removeWidget);\n  const openConfigPanel = useWidgetStore((state) => state.openConfigPanel);\n\n  // API operations - skipFetch since parent page fetches\n  const {\n    duplicateWidget: duplicateWidgetApi,\n    deleteWidget: deleteWidgetApi,\n    refreshWidgetData,\n  } = useWidgetOperations(widget.pageId, widget.dashboardId, { skipFetch: true });\n\n  // Close menu when clicking outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        menuRef.current &&\n        !menuRef.current.contains(event.target as Node) &&\n        buttonRef.current &&\n        !buttonRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [isOpen]);\n\n  // Close menu on escape\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsOpen(false);\n        buttonRef.current?.focus();\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscape);\n    }\n\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen]);\n\n  // Toggle menu with collision detection\n  const toggleMenu = useCallback((event: React.MouseEvent) => {\n    event.stopPropagation();\n    setIsOpen((prev) => {\n      if (!prev && buttonRef.current) {\n        // Calculate position when opening with collision detection\n        const rect = buttonRef.current.getBoundingClientRect();\n        const menuWidth = 160;\n        const menuHeight = 320; // Approximate max height of menu\n        const collisionPadding = 10;\n\n        // Calculate initial position\n        let top = rect.bottom + 4;\n        let left = rect.right - menuWidth;\n\n        // Check right overflow - ensure menu doesn't go past viewport right edge\n        if (left + menuWidth > window.innerWidth - collisionPadding) {\n          left = window.innerWidth - menuWidth - collisionPadding;\n        }\n\n        // Check left overflow - ensure menu doesn't go past viewport left edge\n        if (left < collisionPadding) {\n          left = collisionPadding;\n        }\n\n        // Check bottom overflow - flip to top if needed\n        if (top + menuHeight > window.innerHeight - collisionPadding) {\n          top = rect.top - menuHeight - 4;\n          // If still overflows at top, position at top of viewport\n          if (top < collisionPadding) {\n            top = collisionPadding;\n          }\n        }\n\n        setMenuPosition({\n          top: top + window.scrollY,\n          left: left + window.scrollX,\n        });\n      }\n      return !prev;\n    });\n  }, []);\n\n  // Menu items\n  const menuItems: MenuItem[] = [\n    {\n      id: 'edit',\n      label: 'Edit Widget',\n      icon: (\n        <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" className=\"w-4 h-4\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"\n          />\n        </svg>\n      ),\n      action: () => {\n        selectWidget(widget.id);\n        openConfigPanel();\n        setIsOpen(false);\n      },\n      disabled: !isEditMode,\n    },\n    {\n      id: 'refresh',\n      label: 'Refresh Data',\n      icon: (\n        <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" className=\"w-4 h-4\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n          />\n        </svg>\n      ),\n      action: async () => {\n        setIsOpen(false);\n        if (onRefresh) {\n          onRefresh();\n        } else {\n          await refreshWidgetData(widget.id);\n        }\n      },\n      disabled: false,\n    },\n    {\n      id: 'exportCSV',\n      label: 'Export CSV',\n      icon: (\n        <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" className=\"w-4 h-4\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n          />\n        </svg>\n      ),\n      action: () => {\n        setIsOpen(false);\n        onExportCSV?.();\n      },\n      disabled: !onExportCSV,\n    },\n    {\n      id: 'exportPNG',\n      label: 'Export PNG',\n      icon: (\n        <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" className=\"w-4 h-4\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\n          />\n        </svg>\n      ),\n      action: () => {\n        setIsOpen(false);\n        onExportPNG?.();\n      },\n      disabled: !onExportPNG,\n    },\n    {\n      id: 'divider1',\n      label: '',\n      icon: <></>,\n      action: () => {},\n      divider: true,\n    },\n    {\n      id: 'copy',\n      label: 'Copy',\n      icon: (\n        <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" className=\"w-4 h-4\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"\n          />\n        </svg>\n      ),\n      action: () => {\n        copyWidget(widget.id);\n        setIsOpen(false);\n      },\n      disabled: !isEditMode,\n    },\n    {\n      id: 'cut',\n      label: 'Cut',\n      icon: (\n        <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" className=\"w-4 h-4\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 10-4.243 4.243 3 3 0 004.243-4.243zm0-5.758a3 3 0 10-4.243-4.243 3 3 0 004.243 4.243z\"\n          />\n        </svg>\n      ),\n      action: () => {\n        cutWidget(widget.id);\n        setIsOpen(false);\n      },\n      disabled: !isEditMode,\n    },\n    {\n      id: 'duplicate',\n      label: 'Duplicate',\n      icon: (\n        <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" className=\"w-4 h-4\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2\"\n          />\n        </svg>\n      ),\n      action: async () => {\n        setIsOpen(false);\n        // Calculate new position (offset from original)\n        const newPosition = {\n          x: (widget.positionX ?? 0) + 1,\n          y: (widget.positionY ?? 0) + 1,\n          width: widget.positionWidth ?? 4,\n          height: widget.positionHeight ?? 4,\n        };\n        await duplicateWidgetApi(widget.id, newPosition, `${widget.title} (Copy)`);\n      },\n      disabled: !isEditMode,\n    },\n    {\n      id: 'divider2',\n      label: '',\n      icon: <></>,\n      action: () => {},\n      divider: true,\n    },\n    {\n      id: 'delete',\n      label: 'Delete',\n      icon: (\n        <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" className=\"w-4 h-4\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n          />\n        </svg>\n      ),\n      action: async () => {\n        if (window.confirm('Are you sure you want to delete this widget?')) {\n          setIsOpen(false);\n          const success = await deleteWidgetApi(widget.id);\n          if (!success) {\n            // Fallback to local store removal if API fails\n            removeWidget(widget.id);\n          }\n        } else {\n          setIsOpen(false);\n        }\n      },\n      disabled: !isEditMode,\n      destructive: true,\n    },\n  ];\n\n  return (\n    <div className=\"relative\">\n      {/* Menu Button */}\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={toggleMenu}\n        className={`\n          p-1.5 rounded-md\n          text-text-secondary\n          hover:text-text-primary\n          hover:bg-bg-muted\n          transition-colors\n          ${isOpen ? 'bg-bg-muted' : ''}\n        `}\n        title=\"Widget options\"\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        <svg className=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n          <circle cx=\"12\" cy=\"5\" r=\"2\" />\n          <circle cx=\"12\" cy=\"12\" r=\"2\" />\n          <circle cx=\"12\" cy=\"19\" r=\"2\" />\n        </svg>\n      </button>\n\n      {/* Dropdown Menu - Rendered via Portal to avoid overflow clipping */}\n      {isOpen &&\n        createPortal(\n          <div\n            ref={menuRef}\n            style={{\n              position: 'fixed',\n              top: menuPosition.top,\n              left: menuPosition.left,\n              zIndex: 99999,\n            }}\n            className=\"\n            min-w-[160px]\n            py-1\n            bg-bg-surface\n            border border-border-default\n            rounded-lg shadow-lg\n          \"\n            role=\"menu\"\n            aria-orientation=\"vertical\"\n          >\n            {menuItems.map((item) => {\n              if (item.divider) {\n                return <div key={item.id} className=\"my-1 border-t border-border-default\" />;\n              }\n\n              return (\n                <button\n                  key={item.id}\n                  type=\"button\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    item.action();\n                  }}\n                  disabled={item.disabled}\n                  className={`\n                  w-full flex items-center gap-2\n                  px-3 py-2 text-left text-sm\n                  transition-colors\n                  ${item.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-bg-muted'}\n                  ${item.destructive ? 'text-state-error hover:text-state-error' : 'text-text-primary'}\n                `}\n                  role=\"menuitem\"\n                >\n                  {item.icon}\n                  <span>{item.label}</span>\n                </button>\n              );\n            })}\n          </div>,\n          document.body\n        )}\n    </div>\n  );\n});\n\nexport default WidgetMenu;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/WidgetRegistry.d.ts

@@ -0,0 +1,113 @@
+import { ComponentType } from 'react';
+import { WidgetType, WidgetCategory, Widget } from '../../types';
+
+export interface WidgetComponentProps {
+    /** The widget data */
+    widget: Widget;
+    /** Widget data (processed) */
+    data: Record<string, unknown>;
+    /** Whether the widget is in edit mode */
+    isEditMode?: boolean;
+    /** Whether the widget is selected */
+    isSelected?: boolean;
+    /** Whether data is loading */
+    isLoading?: boolean;
+    /** Error message if any */
+    error?: string | null;
+    /** Callback when widget is clicked */
+    onClick?: () => void;
+    /** Callback for drilldown navigation */
+    onDrilldown?: (params: Record<string, unknown>) => void;
+}
+export interface WidgetDefinition {
+    /** Widget type */
+    type: WidgetType;
+    /** Human-readable name */
+    name: string;
+    /** Description */
+    description: string;
+    /** Lucide icon name */
+    icon: string;
+    /** Category for grouping */
+    category: WidgetCategory;
+    /** Component to render. Null for all current widget types because the render path
+     *  uses WidgetRendererFactory + RendererRegistry instead of this field. */
+    component: ComponentType<WidgetComponentProps> | null;
+    /** Default configuration */
+    defaultConfig: Record<string, unknown>;
+    /** Default size (fixed grid) */
+    defaultSize: {
+        width: number;
+        height: number;
+    };
+    /** Default responsive position (v1.0 spec) */
+    defaultResponsive: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    /** Minimum size constraints */
+    minSize: {
+        width: number;
+        height: number;
+    };
+    /** Maximum size constraints */
+    maxSize: {
+        width: number;
+        height: number;
+    };
+    /** Whether the widget supports data binding */
+    supportsDataBinding: boolean;
+    /** Whether the widget supports drilldown */
+    supportsDrilldown: boolean;
+    /** Whether the widget supports auto-refresh */
+    supportsAutoRefresh: boolean;
+    /** Tags for search/filter */
+    tags: string[];
+}
+export declare const WIDGET_DEFINITIONS: Record<WidgetType, WidgetDefinition>;
+/**
+ * Get widget definition by type
+ * Handles both lowercase (frontend) and uppercase (backend) types
+ */
+export declare function getWidgetDefinition(type: WidgetType | string): WidgetDefinition;
+/**
+ * Get all widget definitions
+ */
+export declare function getAllWidgetDefinitions(): WidgetDefinition[];
+/**
+ * Get widget definitions by category
+ */
+export declare function getWidgetsByCategory(category: WidgetCategory): WidgetDefinition[];
+/**
+ * Search widget definitions by query
+ */
+export declare function searchWidgets(query: string): WidgetDefinition[];
+/**
+ * Canonical mapping from widget category to human-readable label.
+ * Shared across WidgetTypeSelector, WidgetPalette, and other UI.
+ */
+export declare const WIDGET_CATEGORY_LABELS: Record<WidgetCategory, string>;
+/**
+ * Get widget categories with their definitions
+ */
+export declare function getWidgetCategories(): {
+    category: WidgetCategory;
+    label: string;
+    widgets: WidgetDefinition[];
+}[];
+/**
+ * Validate widget size constraints
+ */
+export declare function validateWidgetSize(type: WidgetType, width: number, height: number): {
+    valid: boolean;
+    width: number;
+    height: number;
+};
+/**
+ * Get a stable key for a widget definition (handles installed widgets with componentId)
+ */
+export declare function getWidgetKey(widget: WidgetDefinition): string;
+export default WIDGET_DEFINITIONS;
+//# sourceMappingURL=WidgetRegistry.d.ts.map

package/dist/bigconsole/components/widgets/WidgetRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetRegistry.d.ts","sourceRoot":"","sources":["../../../../src/bigconsole/components/widgets/WidgetRegistry.ts"],"names":[],"mappings":"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"}