@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/pages/WidgetDemoPage.js

@@ -1,144 +1,180 @@
-import e from "../components/widgets/WidgetWrapper.js";
+import { sectionSurfaceClasses as e } from "../components/common/sectionStyles.js";
+import { Section as t, SectionStack as n } from "../components/common/Section.js";
+import "../components/common/index.js";
+import { WIDGET_CATEGORY_LABELS as r } from "../components/widgets/WidgetRegistry.js";
+import i from "../components/widgets/WidgetWrapper.js";
 import "../components/widgets/index.js";
-import { useMemo as t, useState as n } from "react";
-import { useI18n as r } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { IllustratedEmptyState as i, PagePurpose as a } from "@burdenoff/fe-libs/ui";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useMemo as a, useState as o } from "react";
+import { useI18n as s } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { IllustratedEmptyState as c, PagePurpose as l } from "@burdenoff/fe-libs/ui";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/bigconsole/pages/WidgetDemoPage.tsx
-var c = [
+var f = [
 	{
 		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"
+		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"
+		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"
+		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"
+		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"
+		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"
-	},
-	{
-		type: "gauge",
-		title: "Gauge",
-		titleKey: "bigconsole.widgetDemo.type.gauge.title",
-		description: "Circular/linear gauge with thresholds",
-		descriptionKey: "bigconsole.widgetDemo.type.gauge.description"
-	},
-	{
-		type: "progress",
-		title: "Progress",
-		titleKey: "bigconsole.widgetDemo.type.progress.title",
-		description: "Progress bar with milestones",
-		descriptionKey: "bigconsole.widgetDemo.type.progress.description"
+		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"
+		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"
+		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"
+		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"
-	},
-	{
-		type: "map",
-		title: "Map",
-		titleKey: "bigconsole.widgetDemo.type.map.title",
-		description: "Geographic data with markers",
-		descriptionKey: "bigconsole.widgetDemo.type.map.description"
-	},
-	{
-		type: "heatmap",
-		title: "Heatmap",
-		titleKey: "bigconsole.widgetDemo.type.heatmap.title",
-		description: "Grid visualization with color intensity",
-		descriptionKey: "bigconsole.widgetDemo.type.heatmap.description"
+		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"
+		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"
+		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"
+		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"
+		descriptionKey: "bigconsole.widgetDemo.type.custom.description",
+		category: "Custom"
 	}
-], l = () => {
-	let { t: l } = r(), [u, d] = n(""), [f, p] = n("grid"), m = t(() => (u ? c.filter((e) => e.type.includes(u.toLowerCase()) || e.title.toLowerCase().includes(u.toLowerCase())) : c).map((e, t) => ({
+], p = [
+	"KPI",
+	"Visualization",
+	"Data",
+	"Content",
+	"Temporal",
+	"Custom"
+], m = {
+	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."
+}, h = () => {
+	let { t: h } = s(), [g, _] = o(""), [v, y] = o("grid"), b = a(() => (g ? f.filter((e) => e.type.includes(g.toLowerCase()) || e.title.toLowerCase().includes(g.toLowerCase())) : f).map((e, t) => ({
 		id: `demo-${e.type}`,
 		pageId: "demo-page",
 		dashboardId: "demo-dashboard",
 		type: e.type,
-		title: l(e.titleKey, e.title),
+		title: h(e.titleKey, e.title),
 		config: {},
 		position: {
 			x: t % 3 * 4,
@@ -152,132 +188,194 @@ var c = [
 		positionHeight: 4,
 		refreshInterval: void 0,
 		lastRefreshedAt: void 0,
-		metadata: { description: l(e.descriptionKey, e.description) },
+		metadata: { description: h(e.descriptionKey, e.description) },
 		context: {},
 		translations: [],
 		createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 		updatedAt: (/* @__PURE__ */ new Date()).toISOString()
-	})), [u, l]);
-	return /* @__PURE__ */ s("div", {
-		className: "h-full flex flex-col bg-bg-canvas",
+	})), [g, h]), x = a(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of b) {
+			let n = f.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 p.filter((t) => (e.get(t)?.length ?? 0) > 0).map((t) => ({
+			category: t,
+			label: r[t],
+			blurb: m[t],
+			widgets: e.get(t) ?? []
+		}));
+	}, [b]), S = v === "grid" ? "grid grid-cols-1 gap-form-gap sm:grid-cols-2 xl:grid-cols-3" : "flex flex-col gap-form-gap";
+	return /* @__PURE__ */ d("div", {
+		className: "flex h-full min-w-0 flex-col bg-bg-canvas",
 		children: [
-			/* @__PURE__ */ o("div", {
-				className: "flex-shrink-0 border-b border-border-default bg-bg-surface px-6 py-4",
-				children: /* @__PURE__ */ s("div", {
-					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("h1", {
-						className: "text-xl font-semibold text-text-primary",
-						children: l("bigconsole.widgetDemo.header.title", "Widget Demo")
-					}), /* @__PURE__ */ o("p", {
-						className: "text-sm text-text-secondary mt-1",
-						children: l("bigconsole.widgetDemo.header.subtitle", "All 18 widget types - connect a DataSink for real data")
-					})] }), /* @__PURE__ */ s("div", {
-						className: "flex items-center gap-4",
-						children: [/* @__PURE__ */ s("div", {
-							className: "relative",
-							children: [/* @__PURE__ */ o("input", {
-								type: "text",
-								placeholder: l("bigconsole.widgetDemo.filter.placeholder", "Filter widgets..."),
-								value: u,
-								onChange: (e) => d(e.target.value),
-								className: "\n                  w-64 px-3 py-2 pl-[3.25rem]\n                  text-sm\n                  bg-bg-sunken\n                  border border-border-default\n                  rounded-lg\n                  text-text-primary\n                  placeholder:text-text-tertiary\n                  focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                "
-							}), /* @__PURE__ */ o("svg", {
-								className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-secondary",
-								fill: "none",
-								stroke: "currentColor",
-								viewBox: "0 0 24 24",
-								children: /* @__PURE__ */ o("path", {
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									strokeWidth: 2,
-									d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+			/* @__PURE__ */ u("section", {
+				"aria-label": "Widget demo header",
+				className: `${e("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__ */ d("div", {
+					className: "flex flex-col gap-control-gap lg:flex-row lg:items-center lg:justify-between",
+					children: [/* @__PURE__ */ d("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ u("h1", {
+							className: "text-xl font-semibold text-text-primary",
+							children: h("bigconsole.widgetDemo.header.title", "Widget Demo")
+						}), /* @__PURE__ */ u("p", {
+							className: "mt-1 text-sm text-text-secondary",
+							children: h("bigconsole.widgetDemo.header.subtitle", "All 18 widget types - connect a DataSink for real data")
+						})]
+					}), /* @__PURE__ */ d("div", {
+						className: "flex flex-wrap items-center gap-control-gap",
+						children: [/* @__PURE__ */ d("div", {
+							className: "relative min-w-0 flex-1 sm:flex-none",
+							children: [
+								/* @__PURE__ */ u("label", {
+									htmlFor: "widget-demo-filter",
+									className: "sr-only",
+									children: "Filter widget types"
+								}),
+								/* @__PURE__ */ u("input", {
+									id: "widget-demo-filter",
+									type: "text",
+									placeholder: h("bigconsole.widgetDemo.filter.placeholder", "Filter widgets..."),
+									value: g,
+									onChange: (e) => _(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__ */ u("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__ */ u("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+									})
 								})
-							})]
-						}), /* @__PURE__ */ s("div", {
-							className: "flex items-center bg-bg-sunken rounded-lg p-1",
-							children: [/* @__PURE__ */ o("button", {
+							]
+						}), /* @__PURE__ */ d("div", {
+							className: "flex shrink-0 items-center gap-1 rounded-button bg-bg-sunken p-1",
+							role: "group",
+							"aria-label": "Gallery layout",
+							children: [/* @__PURE__ */ u("button", {
 								type: "button",
-								onClick: () => p("grid"),
-								className: `
-                  px-3 py-1.5 text-sm font-medium rounded
-                  transition-colors
-                  ${f === "grid" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}
-                `,
-								children: l("bigconsole.widgetDemo.viewToggle.grid", "Grid")
-							}), /* @__PURE__ */ o("button", {
+								onClick: () => y("grid"),
+								"aria-pressed": v === "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 ${v === "grid" ? "bg-bg-surface text-text-primary shadow-[var(--shadow-elevation-1)]" : "text-text-secondary hover:text-text-primary"}`,
+								children: h("bigconsole.widgetDemo.viewToggle.grid", "Grid")
+							}), /* @__PURE__ */ u("button", {
 								type: "button",
-								onClick: () => p("list"),
-								className: `
-                  px-3 py-1.5 text-sm font-medium rounded
-                  transition-colors
-                  ${f === "list" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}
-                `,
-								children: l("bigconsole.widgetDemo.viewToggle.list", "List")
+								onClick: () => y("list"),
+								"aria-pressed": v === "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 ${v === "list" ? "bg-bg-surface text-text-primary shadow-[var(--shadow-elevation-1)]" : "text-text-secondary hover:text-text-primary"}`,
+								children: h("bigconsole.widgetDemo.viewToggle.list", "List")
 							})]
 						})]
 					})]
 				})
 			}),
-			/* @__PURE__ */ s("div", {
-				className: "flex-1 overflow-auto p-6",
-				children: [
-					/* @__PURE__ */ o(a, {
-						className: "mb-[var(--space-sectionGap)]",
-						children: l("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.")
+			/* @__PURE__ */ u("div", {
+				className: "min-w-0 flex-1 overflow-y-auto overflow-x-hidden p-4 sm:p-6",
+				children: /* @__PURE__ */ d(n, { children: [
+					/* @__PURE__ */ u("section", {
+						"aria-label": "What this gallery is for",
+						className: e("muted", "neutral", "compact"),
+						children: /* @__PURE__ */ u(l, { children: h("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.") })
 					}),
-					/* @__PURE__ */ o("div", {
-						className: f === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" : "flex flex-col gap-4",
-						children: m.map((t) => {
-							let n = c.find((e) => e.type === t.type);
-							return /* @__PURE__ */ o("div", {
-								className: f === "grid" ? "h-80" : "h-64",
-								children: /* @__PURE__ */ s("div", {
-									className: "h-full flex flex-col",
-									children: [/* @__PURE__ */ s("div", {
-										className: "flex-shrink-0 mb-2",
-										children: [/* @__PURE__ */ s("span", {
-											className: "text-xs text-text-tertiary",
-											children: [
-												l("bigconsole.widgetDemo.widgetCard.typeLabel", "Type:"),
-												" ",
-												/* @__PURE__ */ o("code", {
-													className: "font-mono text-action-primary-text",
-													children: t.type
-												})
-											]
-										}), n && /* @__PURE__ */ s("span", {
-											className: "text-xs text-text-tertiary ml-2",
-											children: ["- ", l(n.descriptionKey, n.description)]
-										})]
-									}), /* @__PURE__ */ o("div", {
-										className: "flex-1 min-h-0",
-										children: /* @__PURE__ */ o(e, { widget: t })
-									})]
+					x.length > 0 && /* @__PURE__ */ u(t, {
+						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__ */ d("span", {
+							className: "rounded-pill bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
+							children: [
+								b.length,
+								" of ",
+								f.length
+							]
+						}),
+						children: /* @__PURE__ */ u("div", {
+							className: "flex flex-col gap-section-gap",
+							children: x.map((e) => /* @__PURE__ */ u(t, {
+								emphasis: "bare",
+								padding: "none",
+								headingLevel: 3,
+								title: e.label,
+								description: e.blurb,
+								meta: /* @__PURE__ */ d("span", {
+									className: "text-xs font-medium text-text-muted",
+									children: [
+										e.widgets.length,
+										" ",
+										e.widgets.length === 1 ? "type" : "types"
+									]
+								}),
+								children: /* @__PURE__ */ u("div", {
+									className: S,
+									children: e.widgets.map((e) => {
+										let t = f.find((t) => t.type === e.type);
+										return /* @__PURE__ */ d("figure", {
+											className: `m-0 flex min-w-0 flex-col ${v === "grid" ? "h-80" : "h-64"}`,
+											children: [/* @__PURE__ */ d("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__ */ d("span", { children: [
+													h("bigconsole.widgetDemo.widgetCard.typeLabel", "Type:"),
+													" ",
+													/* @__PURE__ */ u("code", {
+														className: "font-mono text-text-link",
+														children: e.type
+													})
+												] }), t && /* @__PURE__ */ u("span", {
+													className: "text-text-muted",
+													children: h(t.descriptionKey, t.description)
+												})]
+											}), /* @__PURE__ */ u("div", {
+												className: "min-h-0 min-w-0 flex-1",
+												children: /* @__PURE__ */ u(i, { widget: e })
+											})]
+										}, e.id);
+									})
 								})
-							}, t.id);
+							}, e.category))
 						})
 					}),
-					m.length === 0 && /* @__PURE__ */ o(i, {
-						illustration: "empty-search",
-						title: l("bigconsole.widgetDemo.emptyState.title", "No widgets match your filter"),
-						description: l("bigconsole.widgetDemo.emptyState.description", "Try a different search term to preview a widget type.")
+					b.length === 0 && /* @__PURE__ */ u(t, {
+						emphasis: "standard",
+						tone: "info",
+						title: h("bigconsole.widgetDemo.emptyState.title", "No widgets match your filter"),
+						headingLevel: 2,
+						"data-testid": "widget-demo-empty",
+						children: /* @__PURE__ */ u(c, {
+							illustration: "empty-search",
+							title: h("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__ */ o("div", {
-				className: "flex-shrink-0 border-t border-border-default bg-bg-surface px-6 py-3",
-				children: /* @__PURE__ */ s("div", {
-					className: "flex items-center justify-between text-sm text-text-secondary",
-					children: [/* @__PURE__ */ o("span", { children: l("bigconsole.widgetDemo.footer.showing", "Showing {{shown}} of {{total}} widget types", {
-						shown: m.length,
-						total: c.length
-					}) }), /* @__PURE__ */ o("span", { children: l("bigconsole.widgetDemo.footer.hint", "Widgets show empty state until connected to DataSink + Parser") })]
+			/* @__PURE__ */ u("section", {
+				"aria-label": "Gallery summary",
+				className: `${e("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__ */ d("div", {
+					className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-xs text-text-secondary",
+					children: [/* @__PURE__ */ u("span", { children: h("bigconsole.widgetDemo.footer.showing", "Showing {{shown}} of {{total}} widget types", {
+						shown: b.length,
+						total: f.length
+					}) }), /* @__PURE__ */ u("span", {
+						className: "text-text-muted",
+						children: h("bigconsole.widgetDemo.footer.hint", "Widgets show empty state until connected to DataSink + Parser")
+					})]
 				})
 			})
 		]
 	});
 };
 //#endregion
-export { l as WidgetDemoPage, l as default };
+export { h as WidgetDemoPage, h as default };
 
 //# sourceMappingURL=WidgetDemoPage.js.map