@burdenoff/microfe-bigconsole 2026.1103.1 → 2026.1103.3

package/dist/bigconsole/components/widgets/utils/conditionalFormat.js

@@ -66,10 +66,10 @@ var i = {
 	info: "text-[var(--color-status-info-text)]",
 	neutral: "text-text-secondary"
 }, a = {
-	success: "bg-status-success-bg",
-	warning: "bg-status-warning-bg",
-	danger: "bg-status-error-bg",
-	info: "bg-status-info-bg",
+	success: "bg-status-success-bg-subtle",
+	warning: "bg-status-warning-bg-subtle",
+	danger: "bg-status-error-bg-subtle",
+	info: "bg-status-info-bg-subtle",
 	neutral: "bg-bg-sunken"
 };
 function o(e) {

package/dist/bigconsole/pages/WidgetDemoPage.js

@@ -6,182 +6,46 @@ import "../components/common/index.js";
 import { WIDGET_CATEGORY_LABELS as i } from "../components/widgets/WidgetRegistry.js";
 import { WidgetWrapper as a } from "../components/widgets/WidgetWrapper.js";
 import "../components/widgets/index.js";
-import { useMemo as o, useState as s } from "react";
-import { Button as c, IllustratedEmptyState as l, PagePurpose as u } from "@burdenoff/fe-libs/ui";
-import { useI18n as d } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { DEMO_WIDGET_TYPES as o } from "../utils/widgetDemoCatalog.js";
+import { DEMO_SAMPLES as s, sampleData as c } from "../utils/widgetDemoSamples.js";
+import { useMemo as l, useState as u } from "react";
+import { Button as d, IllustratedEmptyState as f, PagePurpose as p } from "@burdenoff/fe-libs/ui";
+import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/bigconsole/pages/WidgetDemoPage.tsx
-var m = [
-	{
-		type: "metric_card",
-		title: "Metric Card",
-		titleKey: "bigconsole.widgetDemo.type.metricCard.title",
-		description: "Single metric with trend and sparkline",
-		descriptionKey: "bigconsole.widgetDemo.type.metricCard.description",
-		category: "KPI"
-	},
-	{
-		type: "kpi_card_comparison",
-		title: "KPI Card Comparison",
-		titleKey: "bigconsole.widgetDemo.type.kpiCardComparison.title",
-		description: "Multiple KPIs with comparisons",
-		descriptionKey: "bigconsole.widgetDemo.type.kpiCardComparison.description",
-		category: "KPI"
-	},
-	{
-		type: "gauge",
-		title: "Gauge",
-		titleKey: "bigconsole.widgetDemo.type.gauge.title",
-		description: "Circular/linear gauge with thresholds",
-		descriptionKey: "bigconsole.widgetDemo.type.gauge.description",
-		category: "KPI"
-	},
-	{
-		type: "progress",
-		title: "Progress",
-		titleKey: "bigconsole.widgetDemo.type.progress.title",
-		description: "Progress bar with milestones",
-		descriptionKey: "bigconsole.widgetDemo.type.progress.description",
-		category: "KPI"
-	},
-	{
-		type: "chart",
-		title: "Chart (Line/Bar/Area)",
-		titleKey: "bigconsole.widgetDemo.type.chart.title",
-		description: "Time-series data visualization",
-		descriptionKey: "bigconsole.widgetDemo.type.chart.description",
-		category: "Visualization"
-	},
-	{
-		type: "funnel_chart",
-		title: "Funnel Chart",
-		titleKey: "bigconsole.widgetDemo.type.funnelChart.title",
-		description: "Conversion funnel with stages",
-		descriptionKey: "bigconsole.widgetDemo.type.funnelChart.description",
-		category: "Visualization"
-	},
-	{
-		type: "heatmap",
-		title: "Heatmap",
-		titleKey: "bigconsole.widgetDemo.type.heatmap.title",
-		description: "Grid visualization with color intensity",
-		descriptionKey: "bigconsole.widgetDemo.type.heatmap.description",
-		category: "Visualization"
-	},
-	{
-		type: "map",
-		title: "Map",
-		titleKey: "bigconsole.widgetDemo.type.map.title",
-		description: "Geographic data with markers",
-		descriptionKey: "bigconsole.widgetDemo.type.map.description",
-		category: "Visualization"
-	},
-	{
-		type: "table",
-		title: "Table",
-		titleKey: "bigconsole.widgetDemo.type.table.title",
-		description: "Data table with sort/filter/pagination",
-		descriptionKey: "bigconsole.widgetDemo.type.table.description",
-		category: "Data"
-	},
-	{
-		type: "pivot_table",
-		title: "Pivot Table",
-		titleKey: "bigconsole.widgetDemo.type.pivotTable.title",
-		description: "Multi-dimensional data analysis",
-		descriptionKey: "bigconsole.widgetDemo.type.pivotTable.description",
-		category: "Data"
-	},
-	{
-		type: "list",
-		title: "List",
-		titleKey: "bigconsole.widgetDemo.type.list.title",
-		description: "Scrollable list with items",
-		descriptionKey: "bigconsole.widgetDemo.type.list.description",
-		category: "Data"
-	},
-	{
-		type: "form",
-		title: "Form (Adaptive Card)",
-		titleKey: "bigconsole.widgetDemo.type.form.title",
-		description: "Interactive form with inputs",
-		descriptionKey: "bigconsole.widgetDemo.type.form.description",
-		category: "Content"
-	},
-	{
-		type: "text",
-		title: "Text (Markdown)",
-		titleKey: "bigconsole.widgetDemo.type.text.title",
-		description: "Rich text with markdown support",
-		descriptionKey: "bigconsole.widgetDemo.type.text.description",
-		category: "Content"
-	},
-	{
-		type: "iframe",
-		title: "iFrame",
-		titleKey: "bigconsole.widgetDemo.type.iframe.title",
-		description: "Embedded external content",
-		descriptionKey: "bigconsole.widgetDemo.type.iframe.description",
-		category: "Content"
-	},
-	{
-		type: "calendar",
-		title: "Calendar",
-		titleKey: "bigconsole.widgetDemo.type.calendar.title",
-		description: "Event calendar view",
-		descriptionKey: "bigconsole.widgetDemo.type.calendar.description",
-		category: "Temporal"
-	},
-	{
-		type: "kanban",
-		title: "Kanban",
-		titleKey: "bigconsole.widgetDemo.type.kanban.title",
-		description: "Task board with columns",
-		descriptionKey: "bigconsole.widgetDemo.type.kanban.description",
-		category: "Temporal"
-	},
-	{
-		type: "timeline",
-		title: "Timeline (Gantt)",
-		titleKey: "bigconsole.widgetDemo.type.timeline.title",
-		description: "Project timeline with tasks",
-		descriptionKey: "bigconsole.widgetDemo.type.timeline.description",
-		category: "Temporal"
-	},
-	{
-		type: "custom",
-		title: "Custom",
-		titleKey: "bigconsole.widgetDemo.type.custom.title",
-		description: "User-defined widget rendering",
-		descriptionKey: "bigconsole.widgetDemo.type.custom.description",
-		category: "Custom"
-	}
-], h = [
+function _(e) {
+	let t = s[e];
+	return t ? {
+		...t.config,
+		mockData: c(t)
+	} : {};
+}
+var v = [
 	"KPI",
 	"Visualization",
 	"Data",
 	"Content",
 	"Temporal",
 	"Custom"
-], g = {
+], y = {
 	KPI: "Single-number widgets for a headline figure and how it is trending.",
 	Visualization: "Chart widgets for comparing series, stages and distributions.",
 	Data: "Row-and-column widgets for browsing records in detail.",
 	Content: "Widgets that carry prose, forms or an embedded page.",
 	Temporal: "Widgets organised by date, schedule or workflow stage.",
 	Custom: "Widgets whose body you define yourself."
-}, _ = () => {
-	let { t: _ } = d(), v = e(), [y, b] = s(""), [x, S] = s("grid"), C = o(() => (y ? m.filter((e) => [
+}, b = () => {
+	let { t: s } = m(), c = e(), [b, x] = u(""), [S, C] = u("grid"), w = l(() => (b ? o.filter((e) => [
 		e.type,
-		_(e.titleKey, e.title),
-		_(e.descriptionKey, e.description)
-	].some((e) => e.toLowerCase().includes(y.trim().toLowerCase()))) : m).map((e, t) => ({
+		s(e.titleKey, e.title),
+		s(e.descriptionKey, e.description)
+	].some((e) => e.toLowerCase().includes(b.trim().toLowerCase()))) : o).map((e, t) => ({
 		id: `demo-${e.type}`,
 		pageId: "demo-page",
 		dashboardId: "demo-dashboard",
 		type: e.type,
-		title: _(e.titleKey, e.title),
-		config: {},
+		title: s(e.titleKey, e.title),
+		config: _(e.type),
 		position: {
 			x: t % 3 * 4,
 			y: Math.floor(t / 3) * 4,
@@ -194,69 +58,69 @@ var m = [
 		positionHeight: 4,
 		refreshInterval: void 0,
 		lastRefreshedAt: void 0,
-		metadata: { description: _(e.descriptionKey, e.description) },
+		metadata: { description: s(e.descriptionKey, e.description) },
 		context: {},
 		translations: [],
 		createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 		updatedAt: (/* @__PURE__ */ new Date()).toISOString()
-	})), [y, _]), w = o(() => {
+	})), [b, s]), T = l(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of C) {
-			let n = m.find((e) => e.type === t.type);
+		for (let t of w) {
+			let n = o.find((e) => e.type === t.type);
 			if (!n) continue;
 			let r = e.get(n.category);
 			r ? r.push(t) : e.set(n.category, [t]);
 		}
-		return h.filter((t) => (e.get(t)?.length ?? 0) > 0).map((t) => ({
+		return v.filter((t) => (e.get(t)?.length ?? 0) > 0).map((t) => ({
 			category: t,
 			label: i[t],
-			blurb: g[t],
+			blurb: y[t],
 			widgets: e.get(t) ?? []
 		}));
-	}, [C]), T = x === "grid" ? "grid grid-cols-1 gap-form-gap sm:grid-cols-2 xl:grid-cols-3" : "flex flex-col gap-form-gap";
-	return /* @__PURE__ */ p("div", {
+	}, [w]), E = S === "grid" ? "grid grid-cols-1 gap-form-gap sm:grid-cols-2 xl:grid-cols-3" : "flex flex-col gap-form-gap";
+	return /* @__PURE__ */ g("div", {
 		className: "flex h-full min-w-0 flex-col bg-bg-canvas",
 		children: [
-			/* @__PURE__ */ f("section", {
+			/* @__PURE__ */ h("section", {
 				"aria-label": "Widget demo header",
 				className: `${t("bare", "neutral", "none")} flex-shrink-0 border-b border-[var(--color-border-subtle)] bg-bg-surface px-4 py-3 sm:px-6 sm:py-4`,
-				children: /* @__PURE__ */ p("div", {
+				children: /* @__PURE__ */ g("div", {
 					className: "flex flex-col gap-control-gap lg:flex-row lg:items-center lg:justify-between",
-					children: [/* @__PURE__ */ p("div", {
+					children: [/* @__PURE__ */ g("div", {
 						className: "min-w-0",
-						children: [/* @__PURE__ */ f("h1", {
+						children: [/* @__PURE__ */ h("h1", {
 							className: "text-xl font-semibold text-text-primary",
-							children: _("bigconsole.widgetDemo.header.title", "Widget Demo")
-						}), /* @__PURE__ */ f("p", {
+							children: s("bigconsole.widgetDemo.header.title", "Widget Demo")
+						}), /* @__PURE__ */ h("p", {
 							className: "mt-1 text-sm text-text-secondary",
-							children: _("bigconsole.widgetDemo.header.subtitle", "All 18 widget types - connect a DataSink for real data")
+							children: s("bigconsole.widgetDemo.header.subtitle", "All {{count}} widget types - connect a DataSink for real data", { count: o.length })
 						})]
-					}), /* @__PURE__ */ p("div", {
+					}), /* @__PURE__ */ g("div", {
 						className: "flex flex-wrap items-center gap-control-gap",
 						children: [
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ g("div", {
 								className: "relative min-w-0 flex-1 sm:flex-none",
 								children: [
-									/* @__PURE__ */ f("label", {
+									/* @__PURE__ */ h("label", {
 										htmlFor: "widget-demo-filter",
 										className: "sr-only",
 										children: "Filter widget types"
 									}),
-									/* @__PURE__ */ f("input", {
+									/* @__PURE__ */ h("input", {
 										id: "widget-demo-filter",
 										type: "text",
-										placeholder: _("bigconsole.widgetDemo.filter.placeholder", "Filter widgets..."),
-										value: y,
-										onChange: (e) => b(e.target.value),
+										placeholder: s("bigconsole.widgetDemo.filter.placeholder", "Filter widgets..."),
+										value: b,
+										onChange: (e) => x(e.target.value),
 										className: "h-control-md w-full min-w-0 rounded-input border border-[var(--color-border-subtle)] bg-bg-sunken py-2 pl-[3.25rem] pr-3 text-sm text-text-primary placeholder:text-text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface sm:w-64"
 									}),
-									/* @__PURE__ */ f("svg", {
+									/* @__PURE__ */ h("svg", {
 										"aria-hidden": "true",
 										className: "pointer-events-none absolute left-3 top-1/2 h-icon-sm w-icon-sm -translate-y-1/2 text-text-secondary",
 										fill: "none",
 										stroke: "currentColor",
 										viewBox: "0 0 24 24",
-										children: /* @__PURE__ */ f("path", {
+										children: /* @__PURE__ */ h("path", {
 											strokeLinecap: "round",
 											strokeLinejoin: "round",
 											strokeWidth: 2,
@@ -265,63 +129,63 @@ var m = [
 									})
 								]
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ g("div", {
 								className: "flex shrink-0 items-center gap-1 rounded-button bg-bg-sunken p-1",
 								role: "group",
 								"aria-label": "Gallery layout",
-								children: [/* @__PURE__ */ f("button", {
+								children: [/* @__PURE__ */ h("button", {
 									type: "button",
-									onClick: () => S("grid"),
-									"aria-pressed": x === "grid",
-									className: `min-h-control-md rounded-button px-3 text-sm font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${x === "grid" ? "bg-bg-surface text-text-primary shadow-[var(--shadow-elevation-1)]" : "text-text-secondary hover:text-text-primary"}`,
-									children: _("bigconsole.widgetDemo.viewToggle.grid", "Grid")
-								}), /* @__PURE__ */ f("button", {
+									onClick: () => C("grid"),
+									"aria-pressed": S === "grid",
+									className: `min-h-control-md rounded-button px-3 text-sm font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${S === "grid" ? "bg-bg-surface text-text-primary shadow-[var(--shadow-elevation-1)]" : "text-text-secondary hover:text-text-primary"}`,
+									children: s("bigconsole.widgetDemo.viewToggle.grid", "Grid")
+								}), /* @__PURE__ */ h("button", {
 									type: "button",
-									onClick: () => S("list"),
-									"aria-pressed": x === "list",
-									className: `min-h-control-md rounded-button px-3 text-sm font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${x === "list" ? "bg-bg-surface text-text-primary shadow-[var(--shadow-elevation-1)]" : "text-text-secondary hover:text-text-primary"}`,
-									children: _("bigconsole.widgetDemo.viewToggle.list", "List")
+									onClick: () => C("list"),
+									"aria-pressed": S === "list",
+									className: `min-h-control-md rounded-button px-3 text-sm font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${S === "list" ? "bg-bg-surface text-text-primary shadow-[var(--shadow-elevation-1)]" : "text-text-secondary hover:text-text-primary"}`,
+									children: s("bigconsole.widgetDemo.viewToggle.list", "List")
 								})]
 							}),
-							/* @__PURE__ */ f(c, {
+							/* @__PURE__ */ h(d, {
 								variant: "secondary",
-								onClick: () => v("/dashboards"),
-								children: _("bigconsole.widgetDemo.openDashboards", "Open dashboards")
+								onClick: () => c("/dashboards"),
+								children: s("bigconsole.widgetDemo.openDashboards", "Open dashboards")
 							})
 						]
 					})]
 				})
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ h("div", {
 				className: "min-w-0 flex-1 overflow-y-auto overflow-x-hidden p-4 sm:p-6",
-				children: /* @__PURE__ */ p(r, { children: [
-					/* @__PURE__ */ f("section", {
+				children: /* @__PURE__ */ g(r, { children: [
+					/* @__PURE__ */ h("section", {
 						"aria-label": "What this gallery is for",
 						className: t("muted", "neutral", "compact"),
-						children: /* @__PURE__ */ f(u, { children: _("bigconsole.widgetDemo.pagePurpose", "This gallery previews every widget type BigConsole can render on a dashboard — metrics, charts, tables, maps, kanban boards and more. Use it to see what each widget looks like and pick the right one before wiring it to a real DataSink in the dashboard builder.") })
+						children: /* @__PURE__ */ h(p, { children: s("bigconsole.widgetDemo.pagePurpose", "This gallery previews every widget type BigConsole can render on a dashboard — metrics, charts, tables, maps, kanban boards and more. Use it to see what each widget looks like and pick the right one before wiring it to a real DataSink in the dashboard builder.") })
 					}),
-					w.length > 0 && /* @__PURE__ */ f(n, {
+					T.length > 0 && /* @__PURE__ */ h(n, {
 						emphasis: "primary",
 						headingLevel: 2,
 						title: "Widget gallery",
 						description: "Every widget renders its unconnected state here — the card chrome, header and empty copy are exactly what a dashboard will show before a DataSink is bound.",
-						meta: /* @__PURE__ */ p("span", {
+						meta: /* @__PURE__ */ g("span", {
 							className: "rounded-pill bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
 							children: [
-								C.length,
+								w.length,
 								" of ",
-								m.length
+								o.length
 							]
 						}),
-						children: /* @__PURE__ */ f("div", {
+						children: /* @__PURE__ */ h("div", {
 							className: "flex flex-col gap-section-gap",
-							children: w.map((e) => /* @__PURE__ */ f(n, {
+							children: T.map((e) => /* @__PURE__ */ h(n, {
 								emphasis: "bare",
 								padding: "none",
 								headingLevel: 3,
 								title: e.label,
 								description: e.blurb,
-								meta: /* @__PURE__ */ p("span", {
+								meta: /* @__PURE__ */ g("span", {
 									className: "text-xs font-medium text-text-muted",
 									children: [
 										e.widgets.length,
@@ -329,28 +193,28 @@ var m = [
 										e.widgets.length === 1 ? "type" : "types"
 									]
 								}),
-								children: /* @__PURE__ */ f("div", {
-									className: T,
+								children: /* @__PURE__ */ h("div", {
+									className: E,
 									children: e.widgets.map((e) => {
-										let t = m.find((t) => t.type === e.type);
-										return /* @__PURE__ */ p("figure", {
-											className: `m-0 flex min-w-0 flex-col ${x === "grid" ? "h-80" : "h-64"}`,
-											children: [/* @__PURE__ */ p("figcaption", {
+										let t = o.find((t) => t.type === e.type);
+										return /* @__PURE__ */ g("figure", {
+											className: `m-0 flex min-w-0 flex-col ${S === "grid" ? "h-80" : "h-64"}`,
+											children: [/* @__PURE__ */ g("figcaption", {
 												className: "mb-2 flex flex-shrink-0 flex-wrap items-baseline gap-x-2 gap-y-0.5 text-xs text-text-secondary",
-												children: [/* @__PURE__ */ p("span", { children: [
-													_("bigconsole.widgetDemo.widgetCard.typeLabel", "Type:"),
+												children: [/* @__PURE__ */ g("span", { children: [
+													s("bigconsole.widgetDemo.widgetCard.typeLabel", "Type:"),
 													" ",
-													/* @__PURE__ */ f("code", {
+													/* @__PURE__ */ h("code", {
 														className: "font-mono text-text-link",
 														children: e.type
 													})
-												] }), t && /* @__PURE__ */ f("span", {
+												] }), t && /* @__PURE__ */ h("span", {
 													className: "text-text-muted",
-													children: _(t.descriptionKey, t.description)
+													children: s(t.descriptionKey, t.description)
 												})]
-											}), /* @__PURE__ */ f("div", {
+											}), /* @__PURE__ */ h("div", {
 												className: "min-h-0 min-w-0 flex-1",
-												children: /* @__PURE__ */ f(a, {
+												children: /* @__PURE__ */ h(a, {
 													previewOnly: !0,
 													widget: e
 												})
@@ -361,31 +225,31 @@ var m = [
 							}, e.category))
 						})
 					}),
-					C.length === 0 && /* @__PURE__ */ f(n, {
+					w.length === 0 && /* @__PURE__ */ h(n, {
 						emphasis: "standard",
 						tone: "info",
-						title: _("bigconsole.widgetDemo.emptyState.title", "No widgets match your filter"),
+						title: s("bigconsole.widgetDemo.emptyState.title", "No widgets match your filter"),
 						headingLevel: 2,
 						"data-testid": "widget-demo-empty",
-						children: /* @__PURE__ */ f(l, {
+						children: /* @__PURE__ */ h(f, {
 							illustration: "empty-search",
-							title: _("bigconsole.widgetDemo.emptyState.description", "Try a different search term to preview a widget type."),
+							title: s("bigconsole.widgetDemo.emptyState.description", "Try a different search term to preview a widget type."),
 							description: "The filter matches a widget's name and its one-line description."
 						})
 					})
 				] })
 			}),
-			/* @__PURE__ */ f("section", {
+			/* @__PURE__ */ h("section", {
 				"aria-label": "Gallery summary",
 				className: `${t("bare", "neutral", "none")} flex-shrink-0 border-t border-[var(--color-border-subtle)] bg-bg-sunken px-4 py-2 sm:px-6`,
-				children: /* @__PURE__ */ p("div", {
+				children: /* @__PURE__ */ g("div", {
 					className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-xs text-text-secondary",
-					children: [/* @__PURE__ */ f("span", { children: _("bigconsole.widgetDemo.footer.showing", "Showing {{shown}} of {{total}} widget types", {
-						shown: C.length,
-						total: m.length
-					}) }), /* @__PURE__ */ f("span", {
+					children: [/* @__PURE__ */ h("span", { children: s("bigconsole.widgetDemo.footer.showing", "Showing {{shown}} of {{total}} widget types", {
+						shown: w.length,
+						total: o.length
+					}) }), /* @__PURE__ */ h("span", {
 						className: "text-text-muted",
-						children: _("bigconsole.widgetDemo.footer.hint", "Widgets show empty state until connected to DataSink + Parser")
+						children: s("bigconsole.widgetDemo.footer.hint", "Widgets show empty state until connected to DataSink + Parser")
 					})]
 				})
 			})
@@ -393,4 +257,4 @@ var m = [
 	});
 };
 //#endregion
-export { _ as WidgetDemoPage, _ as default };
+export { b as WidgetDemoPage, b as default };

package/dist/bigconsole/utils/widgetDemoCatalog.d.ts

@@ -0,0 +1,13 @@
+import { WidgetCategory, WidgetType } from '../types';
+export interface DemoWidgetDef {
+    type: WidgetType;
+    title: string;
+    /** i18n key for the widget title shown on the demo card. */
+    titleKey: string;
+    description: string;
+    /** i18n key for the one-line description under the card header. */
+    descriptionKey: string;
+    /** Grouping used by the gallery headings — mirrors the registry categories. */
+    category: WidgetCategory;
+}
+export declare const DEMO_WIDGET_TYPES: DemoWidgetDef[];

package/dist/bigconsole/utils/widgetDemoCatalog.js

@@ -0,0 +1,181 @@
+//#region src/bigconsole/utils/widgetDemoCatalog.ts
+var e = [
+	{
+		type: "metric_card",
+		title: "Metric Card",
+		titleKey: "bigconsole.widgetDemo.type.metricCard.title",
+		description: "Single metric with trend and sparkline",
+		descriptionKey: "bigconsole.widgetDemo.type.metricCard.description",
+		category: "KPI"
+	},
+	{
+		type: "kpi_card_comparison",
+		title: "KPI Card Comparison",
+		titleKey: "bigconsole.widgetDemo.type.kpiCardComparison.title",
+		description: "Multiple KPIs with comparisons",
+		descriptionKey: "bigconsole.widgetDemo.type.kpiCardComparison.description",
+		category: "KPI"
+	},
+	{
+		type: "gauge",
+		title: "Gauge",
+		titleKey: "bigconsole.widgetDemo.type.gauge.title",
+		description: "Circular/linear gauge with thresholds",
+		descriptionKey: "bigconsole.widgetDemo.type.gauge.description",
+		category: "KPI"
+	},
+	{
+		type: "progress",
+		title: "Progress",
+		titleKey: "bigconsole.widgetDemo.type.progress.title",
+		description: "Progress bar with milestones",
+		descriptionKey: "bigconsole.widgetDemo.type.progress.description",
+		category: "KPI"
+	},
+	{
+		type: "chart",
+		title: "Chart (Line/Bar/Area)",
+		titleKey: "bigconsole.widgetDemo.type.chart.title",
+		description: "Time-series data visualization",
+		descriptionKey: "bigconsole.widgetDemo.type.chart.description",
+		category: "Visualization"
+	},
+	{
+		type: "funnel_chart",
+		title: "Funnel Chart",
+		titleKey: "bigconsole.widgetDemo.type.funnelChart.title",
+		description: "Conversion funnel with stages",
+		descriptionKey: "bigconsole.widgetDemo.type.funnelChart.description",
+		category: "Visualization"
+	},
+	{
+		type: "heatmap",
+		title: "Heatmap",
+		titleKey: "bigconsole.widgetDemo.type.heatmap.title",
+		description: "Grid visualization with color intensity",
+		descriptionKey: "bigconsole.widgetDemo.type.heatmap.description",
+		category: "Visualization"
+	},
+	{
+		type: "waterfall",
+		title: "Waterfall",
+		titleKey: "bigconsole.widgetDemo.type.waterfall.title",
+		description: "Cumulative changes and a final total",
+		descriptionKey: "bigconsole.widgetDemo.type.waterfall.description",
+		category: "Visualization"
+	},
+	{
+		type: "sankey",
+		title: "Sankey",
+		titleKey: "bigconsole.widgetDemo.type.sankey.title",
+		description: "Weighted flows between connected categories",
+		descriptionKey: "bigconsole.widgetDemo.type.sankey.description",
+		category: "Visualization"
+	},
+	{
+		type: "box_plot",
+		title: "Box Plot",
+		titleKey: "bigconsole.widgetDemo.type.boxPlot.title",
+		description: "Quartiles, whiskers and outliers by group",
+		descriptionKey: "bigconsole.widgetDemo.type.boxPlot.description",
+		category: "Visualization"
+	},
+	{
+		type: "map",
+		title: "Map",
+		titleKey: "bigconsole.widgetDemo.type.map.title",
+		description: "Geographic data with markers",
+		descriptionKey: "bigconsole.widgetDemo.type.map.description",
+		category: "Visualization"
+	},
+	{
+		type: "table",
+		title: "Table",
+		titleKey: "bigconsole.widgetDemo.type.table.title",
+		description: "Data table with sort/filter/pagination",
+		descriptionKey: "bigconsole.widgetDemo.type.table.description",
+		category: "Data"
+	},
+	{
+		type: "pivot_table",
+		title: "Pivot Table",
+		titleKey: "bigconsole.widgetDemo.type.pivotTable.title",
+		description: "Multi-dimensional data analysis",
+		descriptionKey: "bigconsole.widgetDemo.type.pivotTable.description",
+		category: "Data"
+	},
+	{
+		type: "retention",
+		title: "Retention / Cohort",
+		titleKey: "bigconsole.widgetDemo.type.retention.title",
+		description: "Cohort-by-period retention grid",
+		descriptionKey: "bigconsole.widgetDemo.type.retention.description",
+		category: "Data"
+	},
+	{
+		type: "list",
+		title: "List",
+		titleKey: "bigconsole.widgetDemo.type.list.title",
+		description: "Scrollable list with items",
+		descriptionKey: "bigconsole.widgetDemo.type.list.description",
+		category: "Data"
+	},
+	{
+		type: "form",
+		title: "Form (Adaptive Card)",
+		titleKey: "bigconsole.widgetDemo.type.form.title",
+		description: "Interactive form with inputs",
+		descriptionKey: "bigconsole.widgetDemo.type.form.description",
+		category: "Content"
+	},
+	{
+		type: "text",
+		title: "Text (Markdown)",
+		titleKey: "bigconsole.widgetDemo.type.text.title",
+		description: "Rich text with markdown support",
+		descriptionKey: "bigconsole.widgetDemo.type.text.description",
+		category: "Content"
+	},
+	{
+		type: "iframe",
+		title: "iFrame",
+		titleKey: "bigconsole.widgetDemo.type.iframe.title",
+		description: "Embedded external content",
+		descriptionKey: "bigconsole.widgetDemo.type.iframe.description",
+		category: "Content"
+	},
+	{
+		type: "calendar",
+		title: "Calendar",
+		titleKey: "bigconsole.widgetDemo.type.calendar.title",
+		description: "Event calendar view",
+		descriptionKey: "bigconsole.widgetDemo.type.calendar.description",
+		category: "Temporal"
+	},
+	{
+		type: "kanban",
+		title: "Kanban",
+		titleKey: "bigconsole.widgetDemo.type.kanban.title",
+		description: "Task board with columns",
+		descriptionKey: "bigconsole.widgetDemo.type.kanban.description",
+		category: "Temporal"
+	},
+	{
+		type: "timeline",
+		title: "Timeline (Gantt)",
+		titleKey: "bigconsole.widgetDemo.type.timeline.title",
+		description: "Project timeline with tasks",
+		descriptionKey: "bigconsole.widgetDemo.type.timeline.description",
+		category: "Temporal"
+	},
+	{
+		type: "custom",
+		title: "Custom",
+		titleKey: "bigconsole.widgetDemo.type.custom.title",
+		description: "User-defined widget rendering",
+		descriptionKey: "bigconsole.widgetDemo.type.custom.description",
+		category: "Custom"
+	}
+];
+//#endregion
+export { e as DEMO_WIDGET_TYPES };

package/dist/bigconsole/utils/widgetDemoSamples.d.ts

@@ -0,0 +1,10 @@
+import { WidgetType } from '../types';
+export interface DemoSample {
+    /** Config the renderer needs alongside the data (field names, chart variant, ...). */
+    config?: Record<string, unknown>;
+    /** The payload. A function so time-dependent samples are built at render time. */
+    data: unknown | (() => unknown);
+}
+export declare const DEMO_SAMPLES: Partial<Record<WidgetType, DemoSample>>;
+/** The payload for a sample, building time-dependent ones now. */
+export declare function sampleData(sample: DemoSample): unknown;

package/dist/bigconsole/utils/widgetDemoSamples.js

@@ -0,0 +1,384 @@
+//#region src/bigconsole/utils/widgetDemoSamples.ts
+var e = {
+	metric_card: { data: {
+		value: 12840,
+		changePercent: 5.2,
+		trend: "up"
+	} },
+	kpi_card_comparison: { data: { kpis: [{
+		id: "rev",
+		label: "Revenue",
+		value: 12e4,
+		previousValue: 1e5,
+		unit: "$",
+		trend: "up",
+		trendValue: 20
+	}, {
+		id: "churn",
+		label: "Churn",
+		value: 2.1,
+		unit: "%",
+		trend: "down",
+		trendValue: -.4
+	}] } },
+	chart: {
+		config: { chartType: "line" },
+		data: [
+			{
+				name: "Jan",
+				sales: 10,
+				cost: 6
+			},
+			{
+				name: "Feb",
+				sales: 14,
+				cost: 7
+			},
+			{
+				name: "Mar",
+				sales: 12,
+				cost: 9
+			},
+			{
+				name: "Apr",
+				sales: 18,
+				cost: 10
+			}
+		]
+	},
+	funnel_chart: {
+		config: { chartType: "funnel" },
+		data: { stages: [
+			{
+				name: "Visits",
+				value: 1e3
+			},
+			{
+				name: "Signups",
+				value: 400
+			},
+			{
+				name: "Paid",
+				value: 120
+			}
+		] }
+	},
+	waterfall: { data: [
+		{
+			name: "Start",
+			value: 100
+		},
+		{
+			name: "Upsell",
+			value: 30
+		},
+		{
+			name: "Churn",
+			value: -20
+		}
+	] },
+	sankey: { data: [
+		{
+			source: "Visits",
+			target: "Signups",
+			value: 400
+		},
+		{
+			source: "Signups",
+			target: "Paid",
+			value: 120
+		},
+		{
+			source: "Visits",
+			target: "Bounce",
+			value: 600
+		}
+	] },
+	box_plot: { data: [
+		{
+			group: "A",
+			value: 1
+		},
+		{
+			group: "A",
+			value: 2
+		},
+		{
+			group: "A",
+			value: 3
+		},
+		{
+			group: "A",
+			value: 4
+		},
+		{
+			group: "B",
+			value: 5
+		},
+		{
+			group: "B",
+			value: 7
+		},
+		{
+			group: "B",
+			value: 9
+		}
+	] },
+	table: { data: [
+		{
+			name: "Alice",
+			region: "EU",
+			sales: 120
+		},
+		{
+			name: "Bob",
+			region: "US",
+			sales: 95
+		},
+		{
+			name: "Chen",
+			region: "APAC",
+			sales: 143
+		}
+	] },
+	pivot_table: {
+		config: {
+			rows: ["region"],
+			columns: ["product"],
+			values: [{
+				field: "sales",
+				aggregation: "sum"
+			}]
+		},
+		data: [
+			{
+				region: "EU",
+				product: "A",
+				sales: 10
+			},
+			{
+				region: "EU",
+				product: "B",
+				sales: 20
+			},
+			{
+				region: "US",
+				product: "A",
+				sales: 30
+			},
+			{
+				region: "US",
+				product: "B",
+				sales: 15
+			}
+		]
+	},
+	gauge: { data: {
+		value: 72,
+		label: "CPU"
+	} },
+	progress: { data: {
+		value: 65,
+		max: 100,
+		label: "Quota",
+		target: 80
+	} },
+	list: { data: { items: [
+		{
+			id: "1",
+			title: "Server A",
+			subtitle: "healthy",
+			value: 99,
+			badge: {
+				text: "OK",
+				color: "success"
+			}
+		},
+		{
+			id: "2",
+			title: "Server B",
+			subtitle: "degraded",
+			value: 71
+		},
+		{
+			id: "3",
+			title: "Server C",
+			subtitle: "healthy",
+			value: 97
+		}
+	] } },
+	form: {
+		config: {
+			layout: "vertical",
+			fields: [{
+				name: "name",
+				label: "Name",
+				type: "text"
+			}, {
+				name: "email",
+				label: "Email",
+				type: "email"
+			}]
+		},
+		data: {
+			name: "Ada",
+			email: "ada@example.com"
+		}
+	},
+	text: { data: {
+		content: "# Sample note\n\nSome **bold** text and a list:\n\n- one\n- two",
+		format: "markdown"
+	} },
+	map: { data: [
+		{
+			name: "London",
+			lat: 51.5074,
+			lng: -.1278,
+			value: 10
+		},
+		{
+			name: "Paris",
+			lat: 48.8566,
+			lng: 2.3522,
+			value: 6
+		},
+		{
+			name: "Berlin",
+			lat: 52.52,
+			lng: 13.405,
+			value: 8
+		}
+	] },
+	heatmap: { data: {
+		rows: ["Mon", "Tue"],
+		columns: ["AM", "PM"],
+		cells: [
+			{
+				row: "Mon",
+				column: "AM",
+				value: 3
+			},
+			{
+				row: "Mon",
+				column: "PM",
+				value: 8
+			},
+			{
+				row: "Tue",
+				column: "AM",
+				value: 5
+			},
+			{
+				row: "Tue",
+				column: "PM",
+				value: 1
+			}
+		]
+	} },
+	calendar: { data: () => {
+		let e = Date.now(), t = (t, n) => new Date(e + t * 864e5 + n * 60 * 60 * 1e3).toISOString();
+		return { events: [
+			{
+				id: "standup",
+				title: "Team standup",
+				start: t(1, 1),
+				end: t(1, 2)
+			},
+			{
+				id: "review",
+				title: "Quarterly review",
+				start: t(3, 2),
+				end: t(3, 4)
+			},
+			{
+				id: "planning",
+				title: "Sprint planning",
+				start: t(5, 1),
+				end: t(5, 3)
+			}
+		] };
+	} },
+	kanban: { data: {
+		columns: [
+			{
+				id: "todo",
+				title: "To do"
+			},
+			{
+				id: "doing",
+				title: "In progress"
+			},
+			{
+				id: "done",
+				title: "Done"
+			}
+		],
+		tasks: [
+			{
+				id: "t1",
+				title: "Write spec",
+				column: "todo",
+				priority: "high"
+			},
+			{
+				id: "t2",
+				title: "Build it",
+				column: "doing"
+			},
+			{
+				id: "t3",
+				title: "Ship",
+				column: "done"
+			}
+		]
+	} },
+	timeline: { data: {
+		tasks: [{
+			id: "1",
+			name: "Design",
+			start: "2026-11-01",
+			end: "2026-11-10",
+			progress: 60
+		}, {
+			id: "2",
+			name: "Build",
+			start: "2026-11-08",
+			end: "2026-11-25",
+			progress: 20
+		}],
+		milestones: [{
+			id: "m1",
+			name: "Launch",
+			date: "2026-11-30"
+		}]
+	} },
+	retention: { data: {
+		periods: [
+			"Week 0",
+			"Week 1",
+			"Week 2"
+		],
+		cohorts: [{
+			cohort: "Jan",
+			initialSize: 1200,
+			values: [
+				100,
+				62,
+				41
+			]
+		}, {
+			cohort: "Feb",
+			initialSize: 900,
+			values: [
+				100,
+				58,
+				37
+			]
+		}]
+	} }
+};
+function t(e) {
+	return typeof e.data == "function" ? e.data() : e.data;
+}
+//#endregion
+export { e as DEMO_SAMPLES, t as sampleData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-bigconsole",
-  "version": "2026.1103.1",
+  "version": "2026.1103.3",
   "description": "BigConsole - AI-powered analytics and dashboard platform",
   "type": "module",
   "files": [