@burdenoff/microfe-bigconsole 2026.510.54

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

@@ -0,0 +1,905 @@
+import e from "../../../hooks/useDashboardTemplates.js";
+import "../../../hooks/index.js";
+import { useCallback as t, useEffect as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/bigconsole/components/dashboard/TemplatePicker/TemplatePicker.tsx
+var o = {
+	ANALYTICS: "Analytics",
+	OPERATIONS: "Operations",
+	SALES: "Sales",
+	MARKETING: "Marketing",
+	FINANCE: "Finance",
+	HR: "Human Resources",
+	CUSTOM: "Custom"
+}, s = {
+	BEGINNER: "#22c55e",
+	INTERMEDIATE: "#f59e0b",
+	ADVANCED: "#ef4444"
+};
+function c({ isOpen: c, onClose: f, onSelectTemplate: p, selectedTemplateId: m, onSelect: h, compact: g = !1 }) {
+	let { templates: _, featuredTemplates: v, categories: y, loading: b, fetchTemplates: x, fetchFeaturedTemplates: S, searchTemplates: C } = e(), [w, T] = r("grid"), [E, D] = r(""), [O, k] = r(""), [A, j] = r(""), [M, N] = r(null), [P, F] = r(!1), [I, L] = r(""), [R, z] = r({}), B = g || c;
+	n(() => {
+		B && (x(), S());
+	}, [
+		B,
+		x,
+		S
+	]), n(() => {
+		if (E) {
+			let e = setTimeout(() => {
+				C(E, O || void 0, A || void 0);
+			}, 300);
+			return () => clearTimeout(e);
+		} else B && x({
+			category: O || void 0,
+			complexity: A || void 0
+		});
+	}, [
+		E,
+		O,
+		A,
+		B,
+		C,
+		x
+	]);
+	let V = t((e) => {
+		if (g && h) {
+			h(e);
+			return;
+		}
+		N(e), L(`${e.name} Dashboard`), F(!0);
+	}, [g, h]), H = t(async () => {
+		!M || !I.trim() || (p?.(M.id, I.trim(), R), F(!1), N(null), L(""), z({}), f?.());
+	}, [
+		M,
+		I,
+		R,
+		p,
+		f
+	]), U = (e, t) => e ? /* @__PURE__ */ a("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: "4px"
+		},
+		children: [/* @__PURE__ */ i("span", {
+			style: { color: "#f59e0b" },
+			children: "★"
+		}), /* @__PURE__ */ a("span", {
+			style: {
+				fontSize: "12px",
+				color: "var(--text-secondary)"
+			},
+			children: [
+				e.toFixed(1),
+				" (",
+				t,
+				")"
+			]
+		})]
+	}) : null;
+	if (!B) return null;
+	let W = E || O || A ? _ : v;
+	return g ? /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ a("div", {
+		style: {
+			display: "flex",
+			gap: "8px",
+			marginBottom: "12px",
+			flexWrap: "wrap"
+		},
+		children: [/* @__PURE__ */ i("input", {
+			type: "text",
+			value: E,
+			onChange: (e) => D(e.target.value),
+			placeholder: "Search templates...",
+			style: {
+				flex: "1 1 150px",
+				padding: "6px 10px",
+				border: "1px solid var(--border-color)",
+				borderRadius: "4px",
+				fontSize: "12px"
+			}
+		}), /* @__PURE__ */ a("select", {
+			value: O,
+			onChange: (e) => k(e.target.value),
+			style: {
+				padding: "6px 10px",
+				border: "1px solid var(--border-color)",
+				borderRadius: "4px",
+				fontSize: "12px",
+				backgroundColor: "var(--bg-primary)"
+			},
+			children: [/* @__PURE__ */ i("option", {
+				value: "",
+				children: "All Categories"
+			}), y.map((e) => /* @__PURE__ */ i("option", {
+				value: e,
+				children: o[e]
+			}, e))]
+		})]
+	}), b && W.length === 0 ? /* @__PURE__ */ i("div", {
+		style: {
+			textAlign: "center",
+			padding: "20px",
+			color: "var(--text-secondary)",
+			fontSize: "13px"
+		},
+		children: "Loading templates..."
+	}) : W.length === 0 ? /* @__PURE__ */ i("div", {
+		style: {
+			textAlign: "center",
+			padding: "20px",
+			color: "var(--text-secondary)",
+			fontSize: "13px"
+		},
+		children: "No templates found"
+	}) : /* @__PURE__ */ i("div", {
+		style: {
+			display: "grid",
+			gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+			gap: "12px"
+		},
+		children: W.map((e) => /* @__PURE__ */ i(d, {
+			template: e,
+			isSelected: m === e.id,
+			onSelect: () => V(e)
+		}, e.id))
+	})] }) : /* @__PURE__ */ a("div", {
+		style: {
+			position: "fixed",
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			backgroundColor: "rgba(0, 0, 0, 0.5)",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			zIndex: 9999
+		},
+		onClick: f,
+		children: [/* @__PURE__ */ a("div", {
+			style: {
+				width: "90%",
+				maxWidth: "1000px",
+				maxHeight: "85vh",
+				backgroundColor: "var(--bg-primary)",
+				borderRadius: "12px",
+				boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+				overflow: "hidden",
+				display: "flex",
+				flexDirection: "column"
+			},
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ a("div", {
+					style: {
+						padding: "20px 24px",
+						borderBottom: "1px solid var(--border-color)",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between"
+					},
+					children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("h2", {
+						style: {
+							margin: 0,
+							fontSize: "20px",
+							fontWeight: 600
+						},
+						children: "Choose a Template"
+					}), /* @__PURE__ */ i("p", {
+						style: {
+							margin: "4px 0 0",
+							fontSize: "13px",
+							color: "var(--text-secondary)"
+						},
+						children: "Start with a pre-built dashboard template"
+					})] }), /* @__PURE__ */ i("button", {
+						onClick: f,
+						style: {
+							background: "none",
+							border: "none",
+							fontSize: "24px",
+							cursor: "pointer",
+							color: "var(--text-secondary)"
+						},
+						children: "x"
+					})]
+				}),
+				/* @__PURE__ */ a("div", {
+					style: {
+						padding: "16px 24px",
+						borderBottom: "1px solid var(--border-color)",
+						display: "flex",
+						gap: "12px",
+						alignItems: "center",
+						flexWrap: "wrap"
+					},
+					children: [
+						/* @__PURE__ */ i("input", {
+							type: "text",
+							value: E,
+							onChange: (e) => D(e.target.value),
+							placeholder: "Search templates...",
+							style: {
+								flex: "1 1 200px",
+								padding: "8px 12px",
+								border: "1px solid var(--border-color)",
+								borderRadius: "6px",
+								fontSize: "13px"
+							}
+						}),
+						/* @__PURE__ */ a("select", {
+							value: O,
+							onChange: (e) => k(e.target.value),
+							style: {
+								padding: "8px 12px",
+								border: "1px solid var(--border-color)",
+								borderRadius: "6px",
+								fontSize: "13px",
+								backgroundColor: "var(--bg-primary)"
+							},
+							children: [/* @__PURE__ */ i("option", {
+								value: "",
+								children: "All Categories"
+							}), y.map((e) => /* @__PURE__ */ i("option", {
+								value: e,
+								children: o[e]
+							}, e))]
+						}),
+						/* @__PURE__ */ a("select", {
+							value: A,
+							onChange: (e) => j(e.target.value),
+							style: {
+								padding: "8px 12px",
+								border: "1px solid var(--border-color)",
+								borderRadius: "6px",
+								fontSize: "13px",
+								backgroundColor: "var(--bg-primary)"
+							},
+							children: [
+								/* @__PURE__ */ i("option", {
+									value: "",
+									children: "All Levels"
+								}),
+								/* @__PURE__ */ i("option", {
+									value: "BEGINNER",
+									children: "Beginner"
+								}),
+								/* @__PURE__ */ i("option", {
+									value: "INTERMEDIATE",
+									children: "Intermediate"
+								}),
+								/* @__PURE__ */ i("option", {
+									value: "ADVANCED",
+									children: "Advanced"
+								})
+							]
+						}),
+						/* @__PURE__ */ a("div", {
+							style: {
+								display: "flex",
+								border: "1px solid var(--border-color)",
+								borderRadius: "6px"
+							},
+							children: [/* @__PURE__ */ i("button", {
+								onClick: () => T("grid"),
+								style: {
+									padding: "8px 12px",
+									backgroundColor: w === "grid" ? "var(--bg-secondary)" : "transparent",
+									border: "none",
+									cursor: "pointer",
+									fontSize: "13px"
+								},
+								children: "Grid"
+							}), /* @__PURE__ */ i("button", {
+								onClick: () => T("list"),
+								style: {
+									padding: "8px 12px",
+									backgroundColor: w === "list" ? "var(--bg-secondary)" : "transparent",
+									border: "none",
+									cursor: "pointer",
+									fontSize: "13px"
+								},
+								children: "List"
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ i("div", {
+					style: {
+						flex: 1,
+						overflowY: "auto",
+						padding: "24px"
+					},
+					children: b && W.length === 0 ? /* @__PURE__ */ i("div", {
+						style: {
+							textAlign: "center",
+							padding: "40px",
+							color: "var(--text-secondary)"
+						},
+						children: "Loading templates..."
+					}) : W.length === 0 ? /* @__PURE__ */ i("div", {
+						style: {
+							textAlign: "center",
+							padding: "40px",
+							color: "var(--text-secondary)"
+						},
+						children: "No templates found. Try adjusting your filters."
+					}) : w === "grid" ? /* @__PURE__ */ i("div", {
+						style: {
+							display: "grid",
+							gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+							gap: "20px"
+						},
+						children: W.map((e) => /* @__PURE__ */ i(l, {
+							template: e,
+							onSelect: () => V(e),
+							renderRating: U
+						}, e.id))
+					}) : /* @__PURE__ */ i("div", {
+						style: {
+							display: "flex",
+							flexDirection: "column",
+							gap: "12px"
+						},
+						children: W.map((e) => /* @__PURE__ */ i(u, {
+							template: e,
+							onSelect: () => V(e),
+							renderRating: U
+						}, e.id))
+					})
+				}),
+				/* @__PURE__ */ a("div", {
+					style: {
+						padding: "16px 24px",
+						borderTop: "1px solid var(--border-color)",
+						display: "flex",
+						justifyContent: "space-between",
+						alignItems: "center"
+					},
+					children: [/* @__PURE__ */ a("span", {
+						style: {
+							fontSize: "13px",
+							color: "var(--text-secondary)"
+						},
+						children: [W.length, " templates available"]
+					}), /* @__PURE__ */ i("button", {
+						onClick: f,
+						style: {
+							padding: "10px 20px",
+							backgroundColor: "transparent",
+							border: "1px solid var(--border-color)",
+							borderRadius: "6px",
+							cursor: "pointer",
+							fontSize: "14px"
+						},
+						children: "Cancel"
+					})]
+				})
+			]
+		}), P && M && /* @__PURE__ */ i("div", {
+			style: {
+				position: "fixed",
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				backgroundColor: "rgba(0, 0, 0, 0.5)",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				zIndex: 1e4
+			},
+			onClick: () => F(!1),
+			children: /* @__PURE__ */ a("div", {
+				style: {
+					width: "500px",
+					backgroundColor: "var(--bg-primary)",
+					borderRadius: "12px",
+					boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+					overflow: "hidden"
+				},
+				onClick: (e) => e.stopPropagation(),
+				children: [
+					/* @__PURE__ */ a("div", {
+						style: {
+							padding: "20px 24px",
+							borderBottom: "1px solid var(--border-color)"
+						},
+						children: [/* @__PURE__ */ i("h3", {
+							style: {
+								margin: 0,
+								fontSize: "18px",
+								fontWeight: 600
+							},
+							children: "Create from Template"
+						}), /* @__PURE__ */ i("p", {
+							style: {
+								margin: "4px 0 0",
+								fontSize: "13px",
+								color: "var(--text-secondary)"
+							},
+							children: M.name
+						})]
+					}),
+					/* @__PURE__ */ a("div", {
+						style: { padding: "24px" },
+						children: [/* @__PURE__ */ a("div", {
+							style: { marginBottom: "20px" },
+							children: [/* @__PURE__ */ i("label", {
+								style: {
+									display: "block",
+									marginBottom: "8px",
+									fontSize: "13px",
+									fontWeight: 500
+								},
+								children: "Dashboard Name *"
+							}), /* @__PURE__ */ i("input", {
+								type: "text",
+								value: I,
+								onChange: (e) => L(e.target.value),
+								placeholder: "Enter dashboard name...",
+								style: {
+									width: "100%",
+									padding: "10px 12px",
+									border: "1px solid var(--border-color)",
+									borderRadius: "6px",
+									fontSize: "14px"
+								}
+							})]
+						}), /* @__PURE__ */ a("div", {
+							style: {
+								padding: "16px",
+								backgroundColor: "var(--bg-secondary)",
+								borderRadius: "8px"
+							},
+							children: [/* @__PURE__ */ i("div", {
+								style: {
+									fontSize: "13px",
+									color: "var(--text-secondary)",
+									marginBottom: "8px"
+								},
+								children: "Template Details"
+							}), /* @__PURE__ */ a("div", {
+								style: {
+									display: "flex",
+									flexWrap: "wrap",
+									gap: "16px"
+								},
+								children: [
+									/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("div", {
+										style: {
+											fontSize: "11px",
+											color: "var(--text-tertiary)"
+										},
+										children: "Category"
+									}), /* @__PURE__ */ i("div", {
+										style: { fontSize: "13px" },
+										children: o[M.category]
+									})] }),
+									/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("div", {
+										style: {
+											fontSize: "11px",
+											color: "var(--text-tertiary)"
+										},
+										children: "Complexity"
+									}), /* @__PURE__ */ i("div", {
+										style: {
+											fontSize: "13px",
+											color: s[M.complexity]
+										},
+										children: M.complexity
+									})] }),
+									/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("div", {
+										style: {
+											fontSize: "11px",
+											color: "var(--text-tertiary)"
+										},
+										children: "Used"
+									}), /* @__PURE__ */ a("div", {
+										style: { fontSize: "13px" },
+										children: [M.usageCount, " times"]
+									})] })
+								]
+							})]
+						})]
+					}),
+					/* @__PURE__ */ a("div", {
+						style: {
+							padding: "16px 24px",
+							borderTop: "1px solid var(--border-color)",
+							display: "flex",
+							justifyContent: "flex-end",
+							gap: "12px"
+						},
+						children: [/* @__PURE__ */ i("button", {
+							onClick: () => F(!1),
+							style: {
+								padding: "10px 20px",
+								backgroundColor: "transparent",
+								border: "1px solid var(--border-color)",
+								borderRadius: "6px",
+								cursor: "pointer",
+								fontSize: "14px"
+							},
+							children: "Cancel"
+						}), /* @__PURE__ */ i("button", {
+							onClick: H,
+							disabled: !I.trim(),
+							style: {
+								padding: "10px 20px",
+								backgroundColor: I.trim() ? "var(--primary)" : "var(--bg-tertiary)",
+								color: I.trim() ? "white" : "var(--text-secondary)",
+								border: "none",
+								borderRadius: "6px",
+								cursor: I.trim() ? "pointer" : "not-allowed",
+								fontSize: "14px",
+								fontWeight: 500
+							},
+							children: "Create Dashboard"
+						})]
+					})
+				]
+			})
+		})]
+	});
+}
+function l({ template: e, onSelect: t, renderRating: n }) {
+	return /* @__PURE__ */ a("div", {
+		onClick: t,
+		style: {
+			backgroundColor: "var(--bg-secondary)",
+			border: "1px solid var(--border-color)",
+			borderRadius: "10px",
+			overflow: "hidden",
+			cursor: "pointer",
+			transition: "transform 0.15s, box-shadow 0.15s"
+		},
+		onMouseOver: (e) => {
+			e.currentTarget.style.transform = "translateY(-2px)", e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.1)";
+		},
+		onMouseOut: (e) => {
+			e.currentTarget.style.transform = "none", e.currentTarget.style.boxShadow = "none";
+		},
+		children: [/* @__PURE__ */ i("div", {
+			style: {
+				height: "140px",
+				backgroundColor: "var(--bg-tertiary)",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderBottom: "1px solid var(--border-color)"
+			},
+			children: e.previewUrl ? /* @__PURE__ */ i("img", {
+				src: e.previewUrl,
+				alt: e.name,
+				style: {
+					width: "100%",
+					height: "100%",
+					objectFit: "cover"
+				}
+			}) : /* @__PURE__ */ i("span", {
+				style: {
+					fontSize: "40px",
+					color: "var(--text-tertiary)"
+				},
+				children: "📊"
+			})
+		}), /* @__PURE__ */ a("div", {
+			style: { padding: "16px" },
+			children: [
+				/* @__PURE__ */ a("div", {
+					style: {
+						display: "flex",
+						alignItems: "flex-start",
+						justifyContent: "space-between",
+						gap: "8px"
+					},
+					children: [/* @__PURE__ */ i("h3", {
+						style: {
+							margin: 0,
+							fontSize: "14px",
+							fontWeight: 600,
+							lineHeight: "1.3"
+						},
+						children: e.name
+					}), e.isFeatured && /* @__PURE__ */ i("span", {
+						style: {
+							fontSize: "9px",
+							padding: "2px 6px",
+							backgroundColor: "#fef3c7",
+							color: "#92400e",
+							borderRadius: "4px",
+							fontWeight: 600,
+							flexShrink: 0
+						},
+						children: "FEATURED"
+					})]
+				}),
+				e.description && /* @__PURE__ */ i("p", {
+					style: {
+						margin: "8px 0 0",
+						fontSize: "12px",
+						color: "var(--text-secondary)",
+						lineHeight: "1.4",
+						display: "-webkit-box",
+						WebkitLineClamp: 2,
+						WebkitBoxOrient: "vertical",
+						overflow: "hidden"
+					},
+					children: e.description
+				}),
+				/* @__PURE__ */ a("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "8px",
+						marginTop: "12px",
+						flexWrap: "wrap"
+					},
+					children: [
+						/* @__PURE__ */ i("span", {
+							style: {
+								fontSize: "10px",
+								padding: "2px 6px",
+								backgroundColor: "var(--bg-tertiary)",
+								borderRadius: "4px",
+								color: "var(--text-secondary)"
+							},
+							children: o[e.category]
+						}),
+						/* @__PURE__ */ i("span", {
+							style: {
+								fontSize: "10px",
+								padding: "2px 6px",
+								backgroundColor: `${s[e.complexity]}20`,
+								color: s[e.complexity],
+								borderRadius: "4px",
+								fontWeight: 500
+							},
+							children: e.complexity
+						}),
+						n(e.rating, e.ratingCount)
+					]
+				})
+			]
+		})]
+	});
+}
+function u({ template: e, onSelect: t, renderRating: n }) {
+	return /* @__PURE__ */ a("div", {
+		onClick: t,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: "16px",
+			padding: "16px",
+			backgroundColor: "var(--bg-secondary)",
+			border: "1px solid var(--border-color)",
+			borderRadius: "8px",
+			cursor: "pointer",
+			transition: "background-color 0.15s"
+		},
+		children: [
+			/* @__PURE__ */ i("div", {
+				style: {
+					width: "80px",
+					height: "60px",
+					backgroundColor: "var(--bg-tertiary)",
+					borderRadius: "6px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					flexShrink: 0
+				},
+				children: e.previewUrl ? /* @__PURE__ */ i("img", {
+					src: e.previewUrl,
+					alt: e.name,
+					style: {
+						width: "100%",
+						height: "100%",
+						objectFit: "cover",
+						borderRadius: "6px"
+					}
+				}) : /* @__PURE__ */ i("span", {
+					style: {
+						fontSize: "24px",
+						color: "var(--text-tertiary)"
+					},
+					children: "📊"
+				})
+			}),
+			/* @__PURE__ */ a("div", {
+				style: {
+					flex: 1,
+					minWidth: 0
+				},
+				children: [
+					/* @__PURE__ */ a("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "8px"
+						},
+						children: [/* @__PURE__ */ i("h3", {
+							style: {
+								margin: 0,
+								fontSize: "14px",
+								fontWeight: 600
+							},
+							children: e.name
+						}), e.isFeatured && /* @__PURE__ */ i("span", {
+							style: {
+								fontSize: "9px",
+								padding: "2px 6px",
+								backgroundColor: "#fef3c7",
+								color: "#92400e",
+								borderRadius: "4px",
+								fontWeight: 600
+							},
+							children: "FEATURED"
+						})]
+					}),
+					e.description && /* @__PURE__ */ i("p", {
+						style: {
+							margin: "4px 0 0",
+							fontSize: "12px",
+							color: "var(--text-secondary)",
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis"
+						},
+						children: e.description
+					}),
+					/* @__PURE__ */ a("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "8px",
+							marginTop: "8px"
+						},
+						children: [
+							/* @__PURE__ */ i("span", {
+								style: {
+									fontSize: "10px",
+									padding: "2px 6px",
+									backgroundColor: "var(--bg-tertiary)",
+									borderRadius: "4px"
+								},
+								children: o[e.category]
+							}),
+							/* @__PURE__ */ i("span", {
+								style: {
+									fontSize: "10px",
+									padding: "2px 6px",
+									backgroundColor: `${s[e.complexity]}20`,
+									color: s[e.complexity],
+									borderRadius: "4px"
+								},
+								children: e.complexity
+							}),
+							n(e.rating, e.ratingCount),
+							/* @__PURE__ */ a("span", {
+								style: {
+									fontSize: "11px",
+									color: "var(--text-tertiary)"
+								},
+								children: [e.usageCount, " uses"]
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ i("button", {
+				style: {
+					padding: "8px 16px",
+					backgroundColor: "var(--primary)",
+					color: "white",
+					border: "none",
+					borderRadius: "6px",
+					cursor: "pointer",
+					fontSize: "13px",
+					fontWeight: 500,
+					flexShrink: 0
+				},
+				children: "Use Template"
+			})
+		]
+	});
+}
+function d({ template: e, isSelected: t, onSelect: n }) {
+	return /* @__PURE__ */ a("div", {
+		onClick: n,
+		style: {
+			backgroundColor: t ? "var(--color-action-primary-bg-subtle, #e0f2fe)" : "var(--bg-secondary)",
+			border: `2px solid ${t ? "var(--color-action-primary-border, #3b82f6)" : "var(--border-color)"}`,
+			borderRadius: "8px",
+			overflow: "hidden",
+			cursor: "pointer",
+			transition: "all 0.15s ease"
+		},
+		children: [/* @__PURE__ */ i("div", {
+			style: {
+				height: "80px",
+				backgroundColor: "var(--bg-tertiary)",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderBottom: "1px solid var(--border-color)"
+			},
+			children: e.previewUrl ? /* @__PURE__ */ i("img", {
+				src: e.previewUrl,
+				alt: e.name,
+				style: {
+					width: "100%",
+					height: "100%",
+					objectFit: "cover"
+				}
+			}) : /* @__PURE__ */ i("span", {
+				style: {
+					fontSize: "28px",
+					color: "var(--text-tertiary)"
+				},
+				children: "📊"
+			})
+		}), /* @__PURE__ */ a("div", {
+			style: { padding: "10px" },
+			children: [/* @__PURE__ */ a("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					gap: "4px"
+				},
+				children: [/* @__PURE__ */ i("h4", {
+					style: {
+						margin: 0,
+						fontSize: "12px",
+						fontWeight: 600,
+						whiteSpace: "nowrap",
+						overflow: "hidden",
+						textOverflow: "ellipsis"
+					},
+					children: e.name
+				}), t && /* @__PURE__ */ i("span", {
+					style: {
+						color: "var(--color-action-primary-text, #3b82f6)",
+						fontSize: "14px"
+					},
+					children: "✓"
+				})]
+			}), /* @__PURE__ */ a("div", {
+				style: {
+					display: "flex",
+					gap: "4px",
+					marginTop: "6px",
+					flexWrap: "wrap"
+				},
+				children: [/* @__PURE__ */ i("span", {
+					style: {
+						fontSize: "9px",
+						padding: "1px 4px",
+						backgroundColor: "var(--bg-tertiary)",
+						borderRadius: "3px",
+						color: "var(--text-secondary)"
+					},
+					children: o[e.category]
+				}), /* @__PURE__ */ i("span", {
+					style: {
+						fontSize: "9px",
+						padding: "1px 4px",
+						backgroundColor: `${s[e.complexity]}20`,
+						color: s[e.complexity],
+						borderRadius: "3px"
+					},
+					children: e.complexity
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=TemplatePicker.js.map