@burdenoff/microfe-bigconsole 2026.730.1 → 2026.730.3

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

@@ -1,905 +1,3 @@
-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(min(200px, 100%), 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
+import "react";
+import "react/jsx-runtime";