@burdenoff/microfe-bigconsole 2026.510.54

package/dist/bigconsole/components/dashboard/CreateDashboardDialog.js

@@ -0,0 +1,430 @@
+import e from "./TemplatePicker/TemplatePicker.js";
+import "./TemplatePicker/index.js";
+import { memo as t, useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { Copy as o, LayoutDashboard as s, Plus as c, Tag as l, X as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Badge as p, Button as m, Dialog as h, DialogContent as g, DialogDescription as _, DialogFooter as v, DialogHeader as y, DialogTitle as b, Input as x, Spinner as S, Textarea as C } from "@burdenoff/fe-libs/ui";
+//#region src/bigconsole/components/dashboard/CreateDashboardDialog.tsx
+var w = t(function({ isOpen: t, isCreating: w = !1, onClose: T, onCreate: E, showTemplates: D = !0 }) {
+	let [O, k] = a("blank"), [A, j] = a(""), [M, N] = a(""), [P, F] = a([]), [I, L] = a(""), [R, z] = a(null), [B, V] = a(null), H = i(null);
+	r(() => {
+		t && (k("blank"), j(""), N(""), F([]), L(""), z(null), V(null), setTimeout(() => {
+			H.current?.focus();
+		}, 100));
+	}, [t]);
+	let U = n(() => {
+		let e = I.trim().toLowerCase();
+		e && !P.includes(e) && P.length < 10 && (F((t) => [...t, e]), L(""));
+	}, [I, P]), W = n((e) => {
+		F((t) => t.filter((t) => t !== e));
+	}, []), G = n((e) => {
+		e.key === "Enter" ? (e.preventDefault(), U()) : e.key === "Backspace" && !I && P.length > 0 && F((e) => e.slice(0, -1));
+	}, [
+		U,
+		I,
+		P.length
+	]), K = n((e) => {
+		z(e), j(e.name), N(e.description || "");
+	}, []), q = n((e) => {
+		if (e.preventDefault(), O === "template" && !R) {
+			V("Please select a template");
+			return;
+		}
+		let t = A.trim();
+		if (!t) {
+			V("Dashboard name is required"), H.current?.focus();
+			return;
+		}
+		if (t.length < 3) {
+			V("Dashboard name must be at least 3 characters"), H.current?.focus();
+			return;
+		}
+		if (t.length > 100) {
+			V("Dashboard name must be less than 100 characters"), H.current?.focus();
+			return;
+		}
+		V(null), E({
+			name: t,
+			description: M.trim(),
+			category: "CUSTOM",
+			tags: P.length > 0 ? P : void 0,
+			templateId: R?.id
+		});
+	}, [
+		A,
+		M,
+		P,
+		O,
+		R,
+		E
+	]);
+	return /* @__PURE__ */ d(h, {
+		open: t,
+		onOpenChange: (e) => !e && !w && T(),
+		children: /* @__PURE__ */ f(g, {
+			style: {
+				maxWidth: O === "template" ? "900px" : "480px",
+				padding: 0,
+				transition: "max-width 0.2s ease"
+			},
+			children: [/* @__PURE__ */ d(y, {
+				style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
+				children: /* @__PURE__ */ f("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "var(--space-formGap)"
+					},
+					children: [/* @__PURE__ */ d("div", {
+						style: {
+							display: "flex",
+							height: "var(--size-controlHeight-lg)",
+							width: "var(--size-controlHeight-lg)",
+							alignItems: "center",
+							justifyContent: "center",
+							borderRadius: "var(--radius-card)",
+							backgroundColor: "var(--color-action-primary-bg)",
+							boxShadow: "var(--shadow-elevation-2)"
+						},
+						children: /* @__PURE__ */ d(s, { style: {
+							height: "var(--size-icon-lg)",
+							width: "var(--size-icon-lg)",
+							color: "var(--color-action-primary-text)"
+						} })
+					}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d(b, {
+						style: {
+							fontSize: "var(--font-size-heading-h4)",
+							fontWeight: "var(--font-weight-bold)",
+							color: "var(--color-text-primary)",
+							margin: 0
+						},
+						children: "Create New Dashboard"
+					}), /* @__PURE__ */ d(_, {
+						style: {
+							fontSize: "var(--font-size-body-sm)",
+							color: "var(--color-text-secondary)",
+							margin: "var(--space-controlGap) 0 0 0"
+						},
+						children: "Create a new dashboard to visualize your data"
+					})] })]
+				})
+			}), /* @__PURE__ */ f("form", {
+				onSubmit: q,
+				children: [
+					D && /* @__PURE__ */ d("div", {
+						style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
+						children: /* @__PURE__ */ f("div", {
+							style: {
+								display: "flex",
+								gap: "var(--space-controlGap)",
+								padding: "var(--space-controlGap)",
+								backgroundColor: "var(--color-bg-sunken)",
+								borderRadius: "var(--radius-button)"
+							},
+							children: [/* @__PURE__ */ f("button", {
+								type: "button",
+								onClick: () => {
+									k("blank"), z(null);
+								},
+								style: {
+									flex: 1,
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									gap: "var(--space-iconGap)",
+									padding: "var(--space-controlGap) var(--space-formGap)",
+									borderRadius: "var(--radius-button)",
+									border: "none",
+									backgroundColor: O === "blank" ? "var(--color-bg-surface)" : "transparent",
+									color: O === "blank" ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+									fontWeight: O === "blank" ? "var(--font-weight-semibold)" : "var(--font-weight-regular)",
+									fontSize: "var(--font-size-body-sm)",
+									cursor: "pointer",
+									boxShadow: O === "blank" ? "var(--shadow-elevation-1)" : "none",
+									transition: "all 0.15s ease"
+								},
+								children: [/* @__PURE__ */ d(c, { style: {
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), "Blank Dashboard"]
+							}), /* @__PURE__ */ f("button", {
+								type: "button",
+								onClick: () => k("template"),
+								style: {
+									flex: 1,
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									gap: "var(--space-iconGap)",
+									padding: "var(--space-controlGap) var(--space-formGap)",
+									borderRadius: "var(--radius-button)",
+									border: "none",
+									backgroundColor: O === "template" ? "var(--color-bg-surface)" : "transparent",
+									color: O === "template" ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+									fontWeight: O === "template" ? "var(--font-weight-semibold)" : "var(--font-weight-regular)",
+									fontSize: "var(--font-size-body-sm)",
+									cursor: "pointer",
+									boxShadow: O === "template" ? "var(--shadow-elevation-1)" : "none",
+									transition: "all 0.15s ease"
+								},
+								children: [/* @__PURE__ */ d(o, { style: {
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), "From Template"]
+							})]
+						})
+					}),
+					O === "template" && /* @__PURE__ */ d("div", {
+						style: {
+							padding: "var(--space-pagePadding)",
+							maxHeight: "400px",
+							overflowY: "auto"
+						},
+						children: /* @__PURE__ */ d(e, {
+							selectedTemplateId: R?.id,
+							onSelect: K,
+							compact: !0
+						})
+					}),
+					/* @__PURE__ */ f("div", {
+						style: { padding: "var(--space-pagePadding)" },
+						children: [
+							/* @__PURE__ */ f("div", {
+								style: { marginBottom: "var(--space-formGap)" },
+								children: [
+									/* @__PURE__ */ f("label", {
+										htmlFor: "dashboard-name",
+										style: {
+											display: "block",
+											fontSize: "var(--font-size-body-sm)",
+											fontWeight: "var(--font-weight-semibold)",
+											color: "var(--color-text-primary)",
+											marginBottom: "var(--space-controlGap)"
+										},
+										children: ["Dashboard Name", /* @__PURE__ */ d("span", {
+											style: {
+												color: "var(--color-status-error-text)",
+												marginLeft: "var(--space-controlGap)"
+											},
+											children: "*"
+										})]
+									}),
+									/* @__PURE__ */ d(x, {
+										ref: H,
+										id: "dashboard-name",
+										type: "text",
+										value: A,
+										onChange: (e) => {
+											j(e.target.value), B && V(null);
+										},
+										placeholder: "Enter dashboard name",
+										disabled: w,
+										style: {
+											height: "var(--size-controlHeight-md)",
+											fontSize: "var(--font-size-body-sm)",
+											borderColor: B ? "var(--color-status-error-border)" : void 0
+										}
+									}),
+									B && /* @__PURE__ */ d("p", {
+										style: {
+											fontSize: "var(--font-size-body-sm)",
+											color: "var(--color-status-error-text)",
+											marginTop: "var(--space-controlGap)",
+											fontWeight: "var(--font-weight-medium)"
+										},
+										children: B
+									})
+								]
+							}),
+							/* @__PURE__ */ f("div", {
+								style: { marginBottom: "var(--space-formGap)" },
+								children: [/* @__PURE__ */ f("label", {
+									htmlFor: "dashboard-description",
+									style: {
+										display: "block",
+										fontSize: "var(--font-size-body-sm)",
+										fontWeight: "var(--font-weight-semibold)",
+										color: "var(--color-text-primary)",
+										marginBottom: "var(--space-controlGap)"
+									},
+									children: ["Description", /* @__PURE__ */ d("span", {
+										style: {
+											color: "var(--color-text-muted)",
+											fontWeight: "var(--font-weight-regular)",
+											marginLeft: "var(--space-controlGap)"
+										},
+										children: "(optional)"
+									})]
+								}), /* @__PURE__ */ d(C, {
+									id: "dashboard-description",
+									value: M,
+									onChange: (e) => N(e.target.value),
+									placeholder: "Enter a brief description for this dashboard",
+									rows: 3,
+									disabled: w,
+									style: {
+										fontSize: "var(--font-size-body-sm)",
+										resize: "none"
+									}
+								})]
+							}),
+							/* @__PURE__ */ f("div", { children: [
+								/* @__PURE__ */ f("label", {
+									htmlFor: "dashboard-tags",
+									style: {
+										display: "flex",
+										alignItems: "center",
+										gap: "var(--space-iconGap)",
+										fontSize: "var(--font-size-body-sm)",
+										fontWeight: "var(--font-weight-semibold)",
+										color: "var(--color-text-primary)",
+										marginBottom: "var(--space-controlGap)"
+									},
+									children: [
+										/* @__PURE__ */ d(l, { style: {
+											height: "var(--size-icon-sm)",
+											width: "var(--size-icon-sm)"
+										} }),
+										"Tags",
+										/* @__PURE__ */ d("span", {
+											style: {
+												color: "var(--color-text-muted)",
+												fontWeight: "var(--font-weight-regular)"
+											},
+											children: "(optional, max 10)"
+										})
+									]
+								}),
+								P.length > 0 && /* @__PURE__ */ d("div", {
+									style: {
+										display: "flex",
+										flexWrap: "wrap",
+										gap: "var(--space-controlGap)",
+										marginBottom: "var(--space-controlGap)"
+									},
+									children: P.map((e) => /* @__PURE__ */ f(p, {
+										variant: "secondary",
+										style: {
+											display: "flex",
+											alignItems: "center",
+											gap: "4px",
+											paddingRight: "4px"
+										},
+										children: [e, /* @__PURE__ */ d("button", {
+											type: "button",
+											onClick: () => W(e),
+											disabled: w,
+											style: {
+												display: "flex",
+												alignItems: "center",
+												justifyContent: "center",
+												background: "none",
+												border: "none",
+												cursor: "pointer",
+												padding: "2px",
+												borderRadius: "50%",
+												color: "inherit",
+												opacity: .7
+											},
+											onMouseOver: (e) => e.currentTarget.style.opacity = "1",
+											onMouseOut: (e) => e.currentTarget.style.opacity = "0.7",
+											children: /* @__PURE__ */ d(u, { style: {
+												height: "12px",
+												width: "12px"
+											} })
+										})]
+									}, e))
+								}),
+								/* @__PURE__ */ f("div", {
+									style: {
+										display: "flex",
+										gap: "var(--space-controlGap)"
+									},
+									children: [/* @__PURE__ */ d(x, {
+										id: "dashboard-tags",
+										type: "text",
+										value: I,
+										onChange: (e) => L(e.target.value),
+										onKeyDown: G,
+										placeholder: P.length >= 10 ? "Max tags reached" : "Type a tag and press Enter",
+										disabled: w || P.length >= 10,
+										style: {
+											flex: 1,
+											height: "var(--size-controlHeight-md)",
+											fontSize: "var(--font-size-body-sm)"
+										}
+									}), /* @__PURE__ */ d(m, {
+										type: "button",
+										variant: "outline",
+										onClick: U,
+										disabled: w || !I.trim() || P.length >= 10,
+										style: { height: "var(--size-controlHeight-md)" },
+										children: "Add"
+									})]
+								}),
+								/* @__PURE__ */ d("p", {
+									style: {
+										fontSize: "var(--font-size-body-xs)",
+										color: "var(--color-text-muted)",
+										marginTop: "var(--space-controlGap)"
+									},
+									children: "Press Enter to add a tag, or click Add"
+								})
+							] })
+						]
+					}),
+					/* @__PURE__ */ f(v, {
+						style: {
+							padding: "var(--space-formGap) var(--space-pagePadding)",
+							borderTop: "1px solid var(--color-border)",
+							backgroundColor: "var(--color-bg-sunken)",
+							display: "flex",
+							justifyContent: "flex-end",
+							gap: "var(--space-controlGap)"
+						},
+						children: [/* @__PURE__ */ d(m, {
+							type: "button",
+							variant: "outline",
+							onClick: T,
+							disabled: w,
+							style: { height: "var(--size-controlHeight-md)" },
+							children: "Cancel"
+						}), /* @__PURE__ */ d(m, {
+							type: "submit",
+							disabled: w || !A.trim(),
+							style: {
+								height: "var(--size-controlHeight-md)",
+								backgroundColor: "var(--color-action-primary-bg)"
+							},
+							children: w ? /* @__PURE__ */ f("span", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-iconGap)"
+								},
+								children: [/* @__PURE__ */ d(S, { style: {
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), "Creating..."]
+							}) : /* @__PURE__ */ f("span", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-iconGap)"
+								},
+								children: [/* @__PURE__ */ d(c, { style: {
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), "Create Dashboard"]
+							})
+						})]
+					})
+				]
+			})]
+		})
+	});
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=CreateDashboardDialog.js.map

package/dist/bigconsole/components/dashboard/CreateDashboardDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateDashboardDialog.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/CreateDashboardDialog.tsx"],"sourcesContent":["/**\n * CreateDashboardDialog Component\n *\n * Modal dialog for creating a new dashboard with name and description.\n * Uses fe-libs shared UI components and semantic tokens for consistent styling.\n * Phase 2: Added TemplatePicker integration for creating from templates.\n */\n\nimport { type FC, memo, useState, useCallback, useEffect, useRef, type KeyboardEvent } from 'react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@burdenoff/fe-libs/ui';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport { Textarea } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport { Badge } from '@burdenoff/fe-libs/ui';\nimport { Plus, LayoutDashboard, Copy, X, Tag } from 'lucide-react';\nimport { TemplatePicker } from './TemplatePicker';\nimport type { DashboardTemplateListItem } from '../../hooks';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface CreateDashboardDialogProps {\n  isOpen: boolean;\n  isCreating?: boolean;\n  onClose: () => void;\n  onCreate: (data: {\n    name: string;\n    description: string;\n    category: string;\n    tags?: string[];\n    templateId?: string;\n  }) => void;\n  /** Whether to show the template picker option */\n  showTemplates?: boolean;\n}\n\ntype CreateMode = 'blank' | 'template';\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const CreateDashboardDialog: FC<CreateDashboardDialogProps> = memo(function CreateDashboardDialog({\n  isOpen,\n  isCreating = false,\n  onClose,\n  onCreate,\n  showTemplates = true,\n}) {\n  const [mode, setMode] = useState<CreateMode>('blank');\n  const [name, setName] = useState('');\n  const [description, setDescription] = useState('');\n  const [tags, setTags] = useState<string[]>([]);\n  const [tagInput, setTagInput] = useState('');\n  const [selectedTemplate, setSelectedTemplate] = useState<DashboardTemplateListItem | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const nameInputRef = useRef<HTMLInputElement>(null);\n\n  // Reset form when dialog opens\n  useEffect(() => {\n    if (isOpen) {\n      setMode('blank');\n      setName('');\n      setDescription('');\n      setTags([]);\n      setTagInput('');\n      setSelectedTemplate(null);\n      setError(null);\n      setTimeout(() => {\n        nameInputRef.current?.focus();\n      }, 100);\n    }\n  }, [isOpen]);\n\n  // Handle adding a tag\n  const handleAddTag = useCallback(() => {\n    const trimmedTag = tagInput.trim().toLowerCase();\n    if (trimmedTag && !tags.includes(trimmedTag) && tags.length < 10) {\n      setTags((prev) => [...prev, trimmedTag]);\n      setTagInput('');\n    }\n  }, [tagInput, tags]);\n\n  // Handle removing a tag\n  const handleRemoveTag = useCallback((tagToRemove: string) => {\n    setTags((prev) => prev.filter((tag) => tag !== tagToRemove));\n  }, []);\n\n  // Handle tag input key press\n  const handleTagKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        e.preventDefault();\n        handleAddTag();\n      } else if (e.key === 'Backspace' && !tagInput && tags.length > 0) {\n        // Remove last tag when backspace is pressed on empty input\n        setTags((prev) => prev.slice(0, -1));\n      }\n    },\n    [handleAddTag, tagInput, tags.length]\n  );\n\n  // Handle template selection\n  const handleTemplateSelect = useCallback((template: DashboardTemplateListItem) => {\n    setSelectedTemplate(template);\n    // Pre-fill name and description from template\n    setName(template.name);\n    setDescription(template.description || '');\n  }, []);\n\n  // Handle form submission\n  const handleSubmit = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault();\n\n      // For template mode without selection, show error\n      if (mode === 'template' && !selectedTemplate) {\n        setError('Please select a template');\n        return;\n      }\n\n      const trimmedName = name.trim();\n      if (!trimmedName) {\n        setError('Dashboard name is required');\n        nameInputRef.current?.focus();\n        return;\n      }\n\n      if (trimmedName.length < 3) {\n        setError('Dashboard name must be at least 3 characters');\n        nameInputRef.current?.focus();\n        return;\n      }\n\n      if (trimmedName.length > 100) {\n        setError('Dashboard name must be less than 100 characters');\n        nameInputRef.current?.focus();\n        return;\n      }\n\n      setError(null);\n      onCreate({\n        name: trimmedName,\n        description: description.trim(),\n        category: 'CUSTOM',\n        tags: tags.length > 0 ? tags : undefined,\n        templateId: selectedTemplate?.id,\n      });\n    },\n    [name, description, tags, mode, selectedTemplate, onCreate]\n  );\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && !isCreating && onClose()}>\n      <DialogContent\n        style={{ maxWidth: mode === 'template' ? '900px' : '480px', padding: 0, transition: 'max-width 0.2s ease' }}\n      >\n        {/* Header */}\n        <DialogHeader style={{ padding: 'var(--space-pagePadding) var(--space-pagePadding) 0' }}>\n          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-formGap)' }}>\n            <div\n              style={{\n                display: 'flex',\n                height: 'var(--size-controlHeight-lg)',\n                width: 'var(--size-controlHeight-lg)',\n                alignItems: 'center',\n                justifyContent: 'center',\n                borderRadius: 'var(--radius-card)',\n                backgroundColor: 'var(--color-action-primary-bg)',\n                boxShadow: 'var(--shadow-elevation-2)',\n              }}\n            >\n              <LayoutDashboard\n                style={{\n                  height: 'var(--size-icon-lg)',\n                  width: 'var(--size-icon-lg)',\n                  color: 'var(--color-action-primary-text)',\n                }}\n              />\n            </div>\n            <div>\n              <DialogTitle\n                style={{\n                  fontSize: 'var(--font-size-heading-h4)',\n                  fontWeight: 'var(--font-weight-bold)',\n                  color: 'var(--color-text-primary)',\n                  margin: 0,\n                }}\n              >\n                Create New Dashboard\n              </DialogTitle>\n              <DialogDescription\n                style={{\n                  fontSize: 'var(--font-size-body-sm)',\n                  color: 'var(--color-text-secondary)',\n                  margin: 'var(--space-controlGap) 0 0 0',\n                }}\n              >\n                Create a new dashboard to visualize your data\n              </DialogDescription>\n            </div>\n          </div>\n        </DialogHeader>\n\n        <form onSubmit={handleSubmit}>\n          {/* Mode Selection Tabs */}\n          {showTemplates && (\n            <div style={{ padding: 'var(--space-pagePadding) var(--space-pagePadding) 0' }}>\n              <div\n                style={{\n                  display: 'flex',\n                  gap: 'var(--space-controlGap)',\n                  padding: 'var(--space-controlGap)',\n                  backgroundColor: 'var(--color-bg-sunken)',\n                  borderRadius: 'var(--radius-button)',\n                }}\n              >\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setMode('blank');\n                    setSelectedTemplate(null);\n                  }}\n                  style={{\n                    flex: 1,\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    gap: 'var(--space-iconGap)',\n                    padding: 'var(--space-controlGap) var(--space-formGap)',\n                    borderRadius: 'var(--radius-button)',\n                    border: 'none',\n                    backgroundColor: mode === 'blank' ? 'var(--color-bg-surface)' : 'transparent',\n                    color: mode === 'blank' ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',\n                    fontWeight: mode === 'blank' ? 'var(--font-weight-semibold)' : 'var(--font-weight-regular)',\n                    fontSize: 'var(--font-size-body-sm)',\n                    cursor: 'pointer',\n                    boxShadow: mode === 'blank' ? 'var(--shadow-elevation-1)' : 'none',\n                    transition: 'all 0.15s ease',\n                  }}\n                >\n                  <Plus style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                  Blank Dashboard\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setMode('template')}\n                  style={{\n                    flex: 1,\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    gap: 'var(--space-iconGap)',\n                    padding: 'var(--space-controlGap) var(--space-formGap)',\n                    borderRadius: 'var(--radius-button)',\n                    border: 'none',\n                    backgroundColor: mode === 'template' ? 'var(--color-bg-surface)' : 'transparent',\n                    color: mode === 'template' ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',\n                    fontWeight: mode === 'template' ? 'var(--font-weight-semibold)' : 'var(--font-weight-regular)',\n                    fontSize: 'var(--font-size-body-sm)',\n                    cursor: 'pointer',\n                    boxShadow: mode === 'template' ? 'var(--shadow-elevation-1)' : 'none',\n                    transition: 'all 0.15s ease',\n                  }}\n                >\n                  <Copy style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                  From Template\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* Template Picker (when in template mode) */}\n          {mode === 'template' && (\n            <div style={{ padding: 'var(--space-pagePadding)', maxHeight: '400px', overflowY: 'auto' }}>\n              <TemplatePicker selectedTemplateId={selectedTemplate?.id} onSelect={handleTemplateSelect} compact />\n            </div>\n          )}\n\n          {/* Form Content */}\n          <div style={{ padding: 'var(--space-pagePadding)' }}>\n            {/* Name Field */}\n            <div style={{ marginBottom: 'var(--space-formGap)' }}>\n              <label\n                htmlFor=\"dashboard-name\"\n                style={{\n                  display: 'block',\n                  fontSize: 'var(--font-size-body-sm)',\n                  fontWeight: 'var(--font-weight-semibold)',\n                  color: 'var(--color-text-primary)',\n                  marginBottom: 'var(--space-controlGap)',\n                }}\n              >\n                Dashboard Name\n                <span style={{ color: 'var(--color-status-error-text)', marginLeft: 'var(--space-controlGap)' }}>\n                  *\n                </span>\n              </label>\n              <Input\n                ref={nameInputRef}\n                id=\"dashboard-name\"\n                type=\"text\"\n                value={name}\n                onChange={(e) => {\n                  setName(e.target.value);\n                  if (error) setError(null);\n                }}\n                placeholder=\"Enter dashboard name\"\n                disabled={isCreating}\n                style={{\n                  height: 'var(--size-controlHeight-md)',\n                  fontSize: 'var(--font-size-body-sm)',\n                  borderColor: error ? 'var(--color-status-error-border)' : undefined,\n                }}\n              />\n              {error && (\n                <p\n                  style={{\n                    fontSize: 'var(--font-size-body-sm)',\n                    color: 'var(--color-status-error-text)',\n                    marginTop: 'var(--space-controlGap)',\n                    fontWeight: 'var(--font-weight-medium)',\n                  }}\n                >\n                  {error}\n                </p>\n              )}\n            </div>\n\n            {/* Description Field */}\n            <div style={{ marginBottom: 'var(--space-formGap)' }}>\n              <label\n                htmlFor=\"dashboard-description\"\n                style={{\n                  display: 'block',\n                  fontSize: 'var(--font-size-body-sm)',\n                  fontWeight: 'var(--font-weight-semibold)',\n                  color: 'var(--color-text-primary)',\n                  marginBottom: 'var(--space-controlGap)',\n                }}\n              >\n                Description\n                <span\n                  style={{\n                    color: 'var(--color-text-muted)',\n                    fontWeight: 'var(--font-weight-regular)',\n                    marginLeft: 'var(--space-controlGap)',\n                  }}\n                >\n                  (optional)\n                </span>\n              </label>\n              <Textarea\n                id=\"dashboard-description\"\n                value={description}\n                onChange={(e) => setDescription(e.target.value)}\n                placeholder=\"Enter a brief description for this dashboard\"\n                rows={3}\n                disabled={isCreating}\n                style={{\n                  fontSize: 'var(--font-size-body-sm)',\n                  resize: 'none',\n                }}\n              />\n            </div>\n\n            {/* Tags Field */}\n            <div>\n              <label\n                htmlFor=\"dashboard-tags\"\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: 'var(--space-iconGap)',\n                  fontSize: 'var(--font-size-body-sm)',\n                  fontWeight: 'var(--font-weight-semibold)',\n                  color: 'var(--color-text-primary)',\n                  marginBottom: 'var(--space-controlGap)',\n                }}\n              >\n                <Tag style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                Tags\n                <span\n                  style={{\n                    color: 'var(--color-text-muted)',\n                    fontWeight: 'var(--font-weight-regular)',\n                  }}\n                >\n                  (optional, max 10)\n                </span>\n              </label>\n              {/* Tag chips display */}\n              {tags.length > 0 && (\n                <div\n                  style={{\n                    display: 'flex',\n                    flexWrap: 'wrap',\n                    gap: 'var(--space-controlGap)',\n                    marginBottom: 'var(--space-controlGap)',\n                  }}\n                >\n                  {tags.map((tag) => (\n                    <Badge\n                      key={tag}\n                      variant=\"secondary\"\n                      style={{\n                        display: 'flex',\n                        alignItems: 'center',\n                        gap: '4px',\n                        paddingRight: '4px',\n                      }}\n                    >\n                      {tag}\n                      <button\n                        type=\"button\"\n                        onClick={() => handleRemoveTag(tag)}\n                        disabled={isCreating}\n                        style={{\n                          display: 'flex',\n                          alignItems: 'center',\n                          justifyContent: 'center',\n                          background: 'none',\n                          border: 'none',\n                          cursor: 'pointer',\n                          padding: '2px',\n                          borderRadius: '50%',\n                          color: 'inherit',\n                          opacity: 0.7,\n                        }}\n                        onMouseOver={(e) => (e.currentTarget.style.opacity = '1')}\n                        onMouseOut={(e) => (e.currentTarget.style.opacity = '0.7')}\n                      >\n                        <X style={{ height: '12px', width: '12px' }} />\n                      </button>\n                    </Badge>\n                  ))}\n                </div>\n              )}\n              {/* Tag input */}\n              <div style={{ display: 'flex', gap: 'var(--space-controlGap)' }}>\n                <Input\n                  id=\"dashboard-tags\"\n                  type=\"text\"\n                  value={tagInput}\n                  onChange={(e) => setTagInput(e.target.value)}\n                  onKeyDown={handleTagKeyDown}\n                  placeholder={tags.length >= 10 ? 'Max tags reached' : 'Type a tag and press Enter'}\n                  disabled={isCreating || tags.length >= 10}\n                  style={{\n                    flex: 1,\n                    height: 'var(--size-controlHeight-md)',\n                    fontSize: 'var(--font-size-body-sm)',\n                  }}\n                />\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  onClick={handleAddTag}\n                  disabled={isCreating || !tagInput.trim() || tags.length >= 10}\n                  style={{ height: 'var(--size-controlHeight-md)' }}\n                >\n                  Add\n                </Button>\n              </div>\n              <p\n                style={{\n                  fontSize: 'var(--font-size-body-xs)',\n                  color: 'var(--color-text-muted)',\n                  marginTop: 'var(--space-controlGap)',\n                }}\n              >\n                Press Enter to add a tag, or click Add\n              </p>\n            </div>\n          </div>\n\n          {/* Footer */}\n          <DialogFooter\n            style={{\n              padding: 'var(--space-formGap) var(--space-pagePadding)',\n              borderTop: '1px solid var(--color-border)',\n              backgroundColor: 'var(--color-bg-sunken)',\n              display: 'flex',\n              justifyContent: 'flex-end',\n              gap: 'var(--space-controlGap)',\n            }}\n          >\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={onClose}\n              disabled={isCreating}\n              style={{ height: 'var(--size-controlHeight-md)' }}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"submit\"\n              disabled={isCreating || !name.trim()}\n              style={{\n                height: 'var(--size-controlHeight-md)',\n                backgroundColor: 'var(--color-action-primary-bg)',\n              }}\n            >\n              {isCreating ? (\n                <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n                  <Spinner style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                  Creating...\n                </span>\n              ) : (\n                <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n                  <Plus style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                  Create Dashboard\n                </span>\n              )}\n            </Button>\n          </DialogFooter>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n});\n\nexport default CreateDashboardDialog;\n"],"mappings":"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"}

package/dist/bigconsole/components/dashboard/DashboardCanvas.d.ts

@@ -0,0 +1,44 @@
+import { FC } from 'react';
+import { DashboardPageTab } from './PageTabsManager';
+
+export interface DashboardCanvasProps {
+    /** Dashboard ID */
+    dashboardId: string;
+    /** Page ID (for loading widgets) */
+    pageId?: string;
+    /** Dashboard title */
+    title?: string;
+    /** Callback to paste widget */
+    onPaste?: () => void;
+    /** Callback when dashboard is saved */
+    onSave?: () => void;
+    /** Whether save is in progress */
+    isSaving?: boolean;
+    /** Callback to export dashboard */
+    onExport?: () => void;
+    /** Dashboard pages for PageTabsManager */
+    pages?: DashboardPageTab[];
+    /** Active page ID */
+    activePageId?: string;
+    /** Callback when page changes */
+    onPageChange?: (pageId: string) => void;
+    /** Callback when pages are reordered */
+    onPagesReorder?: (pages: DashboardPageTab[]) => void;
+    /** Callback when page is added */
+    onPageAdd?: () => void;
+    /** Callback when page is renamed */
+    onPageRename?: (pageId: string, newName: string) => void;
+    /** Callback when page is duplicated */
+    onPageDuplicate?: (pageId: string) => void;
+    /** Callback when page is deleted */
+    onPageDelete?: (pageId: string) => void;
+    /** Whether to show global filters bar */
+    showFilters?: boolean;
+    /** Whether to show page tabs */
+    showPageTabs?: boolean;
+    /** Whether to enable cross-filtering (widget clicks update filters) */
+    enableCrossFilter?: boolean;
+}
+export declare const DashboardCanvas: FC<DashboardCanvasProps>;
+export default DashboardCanvas;
+//# sourceMappingURL=DashboardCanvas.d.ts.map

package/dist/bigconsole/components/dashboard/DashboardCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardCanvas.d.ts","sourceRoot":"","sources":["../../../../src/bigconsole/components/dashboard/DashboardCanvas.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,KAAK,EAAE,EAA2D,MAAM,OAAO,CAAC;AAUzF,OAAO,EAAmB,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAe3E,MAAM,WAAW,oBAAoB;IACnC,mBAAmB;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACrD,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oCAAoC;IACpC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,uCAAuC;IACvC,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,oCAAoC;IACpC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAMD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAugBnD,CAAC;AAEH,eAAe,eAAe,CAAC"}