@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

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

@@ -5,32 +5,32 @@ import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/StoreTemplatePicker.tsx
 var c = {
 	textAlign: "left",
-	padding: "var(--space-md)",
-	borderRadius: "var(--radius-md)",
+	padding: "var(--space-cardPadding)",
+	borderRadius: "var(--radius-card)",
 	border: "1px solid var(--color-border-default)",
-	background: "var(--color-surface-default)",
+	background: "var(--color-bg-surface)",
 	cursor: "pointer",
 	display: "flex",
 	flexDirection: "column",
-	gap: "var(--space-xs)",
+	gap: "var(--space-controlGap)",
 	transition: "all 0.15s ease"
 }, l = e(function({ templates: e, loading: l, error: u, selectedTemplateId: d, onSelect: f }) {
 	return l ? /* @__PURE__ */ o("div", {
 		style: {
 			display: "flex",
 			justifyContent: "center",
-			padding: "var(--space-xl)"
+			padding: "var(--space-pagePadding)"
 		},
 		children: /* @__PURE__ */ o(a, {})
 	}) : u ? /* @__PURE__ */ s("div", {
 		style: {
-			padding: "var(--space-lg)",
-			color: "var(--color-text-danger)"
+			padding: "var(--space-cardPadding)",
+			color: "var(--color-status-error-text)"
 		},
 		children: ["Could not load templates from the store: ", u]
 	}) : e.length === 0 ? /* @__PURE__ */ s("div", {
 		style: {
-			padding: "var(--space-xl)",
+			padding: "var(--space-pagePadding)",
 			textAlign: "center",
 			color: "var(--color-text-muted)"
 		},
@@ -38,13 +38,13 @@ var c = {
 			/* @__PURE__ */ o(n, { style: {
 				height: "var(--size-icon-lg)",
 				width: "var(--size-icon-lg)",
-				margin: "0 auto var(--space-sm)"
+				margin: "0 auto var(--space-formGap)"
 			} }),
 			/* @__PURE__ */ o("div", { children: "No dashboard templates published yet" }),
 			/* @__PURE__ */ o("div", {
 				style: {
-					fontSize: "var(--font-size-sm)",
-					marginTop: "var(--space-2xs)"
+					fontSize: "var(--font-size-body-sm)",
+					marginTop: "var(--space-iconGap)"
 				},
 				children: "Templates published to the store will appear here."
 			})
@@ -52,8 +52,8 @@ var c = {
 	}) : /* @__PURE__ */ o("div", {
 		style: {
 			display: "grid",
-			gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
-			gap: "var(--space-sm)"
+			gridTemplateColumns: "repeat(auto-fill, minmax(min(220px, 100%), 1fr))",
+			gap: "var(--space-formGap)"
 		},
 		children: e.map((e) => {
 			let a = e.id === d;
@@ -63,15 +63,16 @@ var c = {
 				"aria-pressed": a,
 				style: {
 					...c,
-					borderColor: a ? "var(--color-border-brand)" : "var(--color-border-default)",
-					boxShadow: a ? "var(--shadow-elevation-1)" : "none"
+					borderColor: a ? "var(--color-action-primary-border)" : "var(--color-border-subtle)",
+					backgroundColor: a ? "var(--color-bg-accentSubtle)" : "var(--color-bg-surface)",
+					boxShadow: a ? "0 0 0 2px var(--color-action-primary-bg)" : "none"
 				},
 				children: [
 					/* @__PURE__ */ s("div", {
 						style: {
 							display: "flex",
 							alignItems: "center",
-							gap: "var(--space-2xs)"
+							gap: "var(--space-iconGap)"
 						},
 						children: [/* @__PURE__ */ o(n, { style: {
 							height: "var(--size-icon-sm)",
@@ -83,7 +84,7 @@ var c = {
 					}),
 					/* @__PURE__ */ o("div", {
 						style: {
-							fontSize: "var(--font-size-sm)",
+							fontSize: "var(--font-size-body-sm)",
 							color: "var(--color-text-muted)",
 							display: "-webkit-box",
 							WebkitLineClamp: 2,
@@ -96,8 +97,9 @@ var c = {
 						style: {
 							display: "flex",
 							alignItems: "center",
-							gap: "var(--space-xs)",
+							gap: "var(--space-controlGap)",
 							marginTop: "auto",
+							flexWrap: "wrap",
 							fontSize: "var(--font-size-xs)",
 							color: "var(--color-text-muted)"
 						},

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

@@ -1 +1 @@
-{"version":3,"file":"StoreTemplatePicker.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/StoreTemplatePicker.tsx"],"sourcesContent":["/**\n * StoreTemplatePicker\n *\n * Renders dashboard templates published to the global store as selectable\n * cards. Replaces the workspace-table-backed TemplatePicker for the \"From\n * Template\" flow, which surfaced nothing because no workspace templates have\n * ever been authored.\n *\n * @module bigconsole/components/dashboard/StoreTemplatePicker\n */\nimport { Badge, Spinner } from '@burdenoff/fe-libs/ui';\nimport { Download, LayoutTemplate, Star } from 'lucide-react';\nimport { type FC, memo } from 'react';\n\nimport type { StoreDashboardTemplate } from '../../hooks/useStoreDashboardTemplates';\n\nexport interface StoreTemplatePickerProps {\n  templates: StoreDashboardTemplate[];\n  loading: boolean;\n  error: string | null;\n  selectedTemplateId?: string;\n  onSelect: (template: StoreDashboardTemplate) => void;\n}\n\nconst cardBase: React.CSSProperties = {\n  textAlign: 'left',\n  padding: 'var(--space-md)',\n  borderRadius: 'var(--radius-md)',\n  border: '1px solid var(--color-border-default)',\n  background: 'var(--color-surface-default)',\n  cursor: 'pointer',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 'var(--space-xs)',\n  transition: 'all 0.15s ease',\n};\n\nexport const StoreTemplatePicker: FC<StoreTemplatePickerProps> = memo(function StoreTemplatePicker({\n  templates,\n  loading,\n  error,\n  selectedTemplateId,\n  onSelect,\n}) {\n  if (loading) {\n    return (\n      <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-xl)' }}>\n        <Spinner />\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div style={{ padding: 'var(--space-lg)', color: 'var(--color-text-danger)' }}>\n        Could not load templates from the store: {error}\n      </div>\n    );\n  }\n\n  if (templates.length === 0) {\n    return (\n      <div\n        style={{\n          padding: 'var(--space-xl)',\n          textAlign: 'center',\n          color: 'var(--color-text-muted)',\n        }}\n      >\n        <LayoutTemplate\n          style={{\n            height: 'var(--size-icon-lg)',\n            width: 'var(--size-icon-lg)',\n            margin: '0 auto var(--space-sm)',\n          }}\n        />\n        <div>No dashboard templates published yet</div>\n        <div style={{ fontSize: 'var(--font-size-sm)', marginTop: 'var(--space-2xs)' }}>\n          Templates published to the store will appear here.\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      style={{\n        display: 'grid',\n        gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',\n        gap: 'var(--space-sm)',\n      }}\n    >\n      {templates.map((template) => {\n        const selected = template.id === selectedTemplateId;\n        return (\n          <button\n            key={template.id}\n            type=\"button\"\n            onClick={() => onSelect(template)}\n            aria-pressed={selected}\n            style={{\n              ...cardBase,\n              borderColor: selected ? 'var(--color-border-brand)' : 'var(--color-border-default)',\n              boxShadow: selected ? 'var(--shadow-elevation-1)' : 'none',\n            }}\n          >\n            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2xs)' }}>\n              <LayoutTemplate style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n              <span style={{ fontWeight: 'var(--font-weight-medium)' }}>{template.name}</span>\n            </div>\n\n            <div\n              style={{\n                fontSize: 'var(--font-size-sm)',\n                color: 'var(--color-text-muted)',\n                display: '-webkit-box',\n                WebkitLineClamp: 2,\n                WebkitBoxOrient: 'vertical',\n                overflow: 'hidden',\n              }}\n            >\n              {template.description || 'No description provided'}\n            </div>\n\n            <div\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: 'var(--space-xs)',\n                marginTop: 'auto',\n                fontSize: 'var(--font-size-xs)',\n                color: 'var(--color-text-muted)',\n              }}\n            >\n              {template.requiresPurchase ? (\n                <Badge variant=\"secondary\">${template.price}</Badge>\n              ) : (\n                <Badge variant=\"secondary\">Free</Badge>\n              )}\n              {template.downloads > 0 && (\n                <span style={{ display: 'inline-flex', alignItems: 'center', gap: '2px' }}>\n                  <Download style={{ height: '12px', width: '12px' }} />\n                  {template.downloads}\n                </span>\n              )}\n              {template.rating ? (\n                <span style={{ display: 'inline-flex', alignItems: 'center', gap: '2px' }}>\n                  <Star style={{ height: '12px', width: '12px' }} />\n                  {template.rating.toFixed(1)}\n                </span>\n              ) : null}\n            </div>\n          </button>\n        );\n      })}\n    </div>\n  );\n});\n\nexport default StoreTemplatePicker;\n"],"mappings":";;;;;AAwBA,IAAM,IAAgC;CACpC,WAAW;CACX,SAAS;CACT,cAAc;CACd,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACb,EAEY,IAAoD,EAAK,SAA6B,EACjG,cACA,YACA,UACA,uBACA,eACC;AAyCD,QAxCI,IAEA,kBAAC,OAAD;EAAK,OAAO;GAAE,SAAS;GAAQ,gBAAgB;GAAU,SAAS;GAAmB;YACnF,kBAAC,GAAD,EAAW,CAAA;EACP,CAAA,GAIN,IAEA,kBAAC,OAAD;EAAK,OAAO;GAAE,SAAS;GAAmB,OAAO;GAA4B;YAA7E,CAA+E,6CACnC,EACtC;MAIN,EAAU,WAAW,IAErB,kBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,WAAW;GACX,OAAO;GACR;YALH;GAOE,kBAAC,GAAD,EACE,OAAO;IACL,QAAQ;IACR,OAAO;IACP,QAAQ;IACT,EACD,CAAA;GACF,kBAAC,OAAD,EAAA,UAAK,wCAA0C,CAAA;GAC/C,kBAAC,OAAD;IAAK,OAAO;KAAE,UAAU;KAAuB,WAAW;KAAoB;cAAE;IAE1E,CAAA;GACF;MAKR,kBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,qBAAqB;GACrB,KAAK;GACN;YAEA,EAAU,KAAK,MAAa;GAC3B,IAAM,IAAW,EAAS,OAAO;AACjC,UACE,kBAAC,UAAD;IAEE,MAAK;IACL,eAAe,EAAS,EAAS;IACjC,gBAAc;IACd,OAAO;KACL,GAAG;KACH,aAAa,IAAW,8BAA8B;KACtD,WAAW,IAAW,8BAA8B;KACrD;cATH;KAWE,kBAAC,OAAD;MAAK,OAAO;OAAE,SAAS;OAAQ,YAAY;OAAU,KAAK;OAAoB;gBAA9E,CACE,kBAAC,GAAD,EAAgB,OAAO;OAAE,QAAQ;OAAuB,OAAO;OAAuB,EAAI,CAAA,EAC1F,kBAAC,QAAD;OAAM,OAAO,EAAE,YAAY,6BAA6B;iBAAG,EAAS;OAAY,CAAA,CAC5E;;KAEN,kBAAC,OAAD;MACE,OAAO;OACL,UAAU;OACV,OAAO;OACP,SAAS;OACT,iBAAiB;OACjB,iBAAiB;OACjB,UAAU;OACX;gBAEA,EAAS,eAAe;MACrB,CAAA;KAEN,kBAAC,OAAD;MACE,OAAO;OACL,SAAS;OACT,YAAY;OACZ,KAAK;OACL,WAAW;OACX,UAAU;OACV,OAAO;OACR;gBARH;OAUG,EAAS,mBACR,kBAAC,GAAD;QAAO,SAAQ;kBAAf,CAA2B,KAAE,EAAS,MAAc;YAEpD,kBAAC,GAAD;QAAO,SAAQ;kBAAY;QAAY,CAAA;OAExC,EAAS,YAAY,KACpB,kBAAC,QAAD;QAAM,OAAO;SAAE,SAAS;SAAe,YAAY;SAAU,KAAK;SAAO;kBAAzE,CACE,kBAAC,GAAD,EAAU,OAAO;SAAE,QAAQ;SAAQ,OAAO;SAAQ,EAAI,CAAA,EACrD,EAAS,UACL;;OAER,EAAS,SACR,kBAAC,QAAD;QAAM,OAAO;SAAE,SAAS;SAAe,YAAY;SAAU,KAAK;SAAO;kBAAzE,CACE,kBAAC,GAAD,EAAM,OAAO;SAAE,QAAQ;SAAQ,OAAO;SAAQ,EAAI,CAAA,EACjD,EAAS,OAAO,QAAQ,EAAE,CACtB;YACL;OACA;;KACC;MAxDF,EAAS,GAwDP;IAEX;EACE,CAAA;EAER"}
+{"version":3,"file":"StoreTemplatePicker.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/StoreTemplatePicker.tsx"],"sourcesContent":["/**\n * StoreTemplatePicker\n *\n * Renders dashboard templates published to the global store as selectable\n * cards. Replaces the workspace-table-backed TemplatePicker for the \"From\n * Template\" flow, which surfaced nothing because no workspace templates have\n * ever been authored.\n *\n * @module bigconsole/components/dashboard/StoreTemplatePicker\n */\nimport { Badge, Spinner } from '@burdenoff/fe-libs/ui';\nimport { Download, LayoutTemplate, Star } from 'lucide-react';\nimport { type FC, memo } from 'react';\n\nimport type { StoreDashboardTemplate } from '../../hooks/useStoreDashboardTemplates';\n\nexport interface StoreTemplatePickerProps {\n  templates: StoreDashboardTemplate[];\n  loading: boolean;\n  error: string | null;\n  selectedTemplateId?: string;\n  onSelect: (template: StoreDashboardTemplate) => void;\n}\n\nconst cardBase: React.CSSProperties = {\n  textAlign: 'left',\n  padding: 'var(--space-cardPadding)',\n  borderRadius: 'var(--radius-card)',\n  border: '1px solid var(--color-border-default)',\n  background: 'var(--color-bg-surface)',\n  cursor: 'pointer',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 'var(--space-controlGap)',\n  transition: 'all 0.15s ease',\n};\n\nexport const StoreTemplatePicker: FC<StoreTemplatePickerProps> = memo(function StoreTemplatePicker({\n  templates,\n  loading,\n  error,\n  selectedTemplateId,\n  onSelect,\n}) {\n  if (loading) {\n    return (\n      <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-pagePadding)' }}>\n        <Spinner />\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div style={{ padding: 'var(--space-cardPadding)', color: 'var(--color-status-error-text)' }}>\n        Could not load templates from the store: {error}\n      </div>\n    );\n  }\n\n  if (templates.length === 0) {\n    return (\n      <div\n        style={{\n          padding: 'var(--space-pagePadding)',\n          textAlign: 'center',\n          color: 'var(--color-text-muted)',\n        }}\n      >\n        <LayoutTemplate\n          style={{\n            height: 'var(--size-icon-lg)',\n            width: 'var(--size-icon-lg)',\n            margin: '0 auto var(--space-formGap)',\n          }}\n        />\n        <div>No dashboard templates published yet</div>\n        <div style={{ fontSize: 'var(--font-size-body-sm)', marginTop: 'var(--space-iconGap)' }}>\n          Templates published to the store will appear here.\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      style={{\n        display: 'grid',\n        gridTemplateColumns: 'repeat(auto-fill, minmax(min(220px, 100%), 1fr))',\n        gap: 'var(--space-formGap)',\n      }}\n    >\n      {templates.map((template) => {\n        const selected = template.id === selectedTemplateId;\n        return (\n          <button\n            key={template.id}\n            type=\"button\"\n            onClick={() => onSelect(template)}\n            aria-pressed={selected}\n            style={{\n              ...cardBase,\n              // Selection needs to survive a glance across a 900px grid: brand\n              // border + ring + tinted surface, not a 1-step elevation alone.\n              borderColor: selected ? 'var(--color-action-primary-border)' : 'var(--color-border-subtle)',\n              backgroundColor: selected ? 'var(--color-bg-accentSubtle)' : 'var(--color-bg-surface)',\n              boxShadow: selected ? '0 0 0 2px var(--color-action-primary-bg)' : 'none',\n            }}\n          >\n            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n              <LayoutTemplate style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n              <span style={{ fontWeight: 'var(--font-weight-medium)' }}>{template.name}</span>\n            </div>\n\n            <div\n              style={{\n                fontSize: 'var(--font-size-body-sm)',\n                color: 'var(--color-text-muted)',\n                display: '-webkit-box',\n                WebkitLineClamp: 2,\n                WebkitBoxOrient: 'vertical',\n                overflow: 'hidden',\n              }}\n            >\n              {template.description || 'No description provided'}\n            </div>\n\n            <div\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: 'var(--space-controlGap)',\n                marginTop: 'auto',\n                flexWrap: 'wrap',\n                // `--font-size-body-xs` does not exist in the token build — using it\n                // drops the declaration and the row silently inherits body size.\n                fontSize: 'var(--font-size-xs)',\n                color: 'var(--color-text-muted)',\n              }}\n            >\n              {template.requiresPurchase ? (\n                <Badge variant=\"secondary\">${template.price}</Badge>\n              ) : (\n                <Badge variant=\"secondary\">Free</Badge>\n              )}\n              {template.downloads > 0 && (\n                <span style={{ display: 'inline-flex', alignItems: 'center', gap: '2px' }}>\n                  <Download style={{ height: '12px', width: '12px' }} />\n                  {template.downloads}\n                </span>\n              )}\n              {template.rating ? (\n                <span style={{ display: 'inline-flex', alignItems: 'center', gap: '2px' }}>\n                  <Star style={{ height: '12px', width: '12px' }} />\n                  {template.rating.toFixed(1)}\n                </span>\n              ) : null}\n            </div>\n          </button>\n        );\n      })}\n    </div>\n  );\n});\n\nexport default StoreTemplatePicker;\n"],"mappings":";;;;;AAwBA,IAAM,IAAgC;CACpC,WAAW;CACX,SAAS;CACT,cAAc;CACd,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACb,EAEY,IAAoD,EAAK,SAA6B,EACjG,cACA,YACA,UACA,uBACA,eACC;AAyCD,QAxCI,IAEA,kBAAC,OAAD;EAAK,OAAO;GAAE,SAAS;GAAQ,gBAAgB;GAAU,SAAS;GAA4B;YAC5F,kBAAC,GAAD,EAAW,CAAA;EACP,CAAA,GAIN,IAEA,kBAAC,OAAD;EAAK,OAAO;GAAE,SAAS;GAA4B,OAAO;GAAkC;YAA5F,CAA8F,6CAClD,EACtC;MAIN,EAAU,WAAW,IAErB,kBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,WAAW;GACX,OAAO;GACR;YALH;GAOE,kBAAC,GAAD,EACE,OAAO;IACL,QAAQ;IACR,OAAO;IACP,QAAQ;IACT,EACD,CAAA;GACF,kBAAC,OAAD,EAAA,UAAK,wCAA0C,CAAA;GAC/C,kBAAC,OAAD;IAAK,OAAO;KAAE,UAAU;KAA4B,WAAW;KAAwB;cAAE;IAEnF,CAAA;GACF;MAKR,kBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,qBAAqB;GACrB,KAAK;GACN;YAEA,EAAU,KAAK,MAAa;GAC3B,IAAM,IAAW,EAAS,OAAO;AACjC,UACE,kBAAC,UAAD;IAEE,MAAK;IACL,eAAe,EAAS,EAAS;IACjC,gBAAc;IACd,OAAO;KACL,GAAG;KAGH,aAAa,IAAW,uCAAuC;KAC/D,iBAAiB,IAAW,iCAAiC;KAC7D,WAAW,IAAW,6CAA6C;KACpE;cAZH;KAcE,kBAAC,OAAD;MAAK,OAAO;OAAE,SAAS;OAAQ,YAAY;OAAU,KAAK;OAAwB;gBAAlF,CACE,kBAAC,GAAD,EAAgB,OAAO;OAAE,QAAQ;OAAuB,OAAO;OAAuB,EAAI,CAAA,EAC1F,kBAAC,QAAD;OAAM,OAAO,EAAE,YAAY,6BAA6B;iBAAG,EAAS;OAAY,CAAA,CAC5E;;KAEN,kBAAC,OAAD;MACE,OAAO;OACL,UAAU;OACV,OAAO;OACP,SAAS;OACT,iBAAiB;OACjB,iBAAiB;OACjB,UAAU;OACX;gBAEA,EAAS,eAAe;MACrB,CAAA;KAEN,kBAAC,OAAD;MACE,OAAO;OACL,SAAS;OACT,YAAY;OACZ,KAAK;OACL,WAAW;OACX,UAAU;OAGV,UAAU;OACV,OAAO;OACR;gBAXH;OAaG,EAAS,mBACR,kBAAC,GAAD;QAAO,SAAQ;kBAAf,CAA2B,KAAE,EAAS,MAAc;YAEpD,kBAAC,GAAD;QAAO,SAAQ;kBAAY;QAAY,CAAA;OAExC,EAAS,YAAY,KACpB,kBAAC,QAAD;QAAM,OAAO;SAAE,SAAS;SAAe,YAAY;SAAU,KAAK;SAAO;kBAAzE,CACE,kBAAC,GAAD,EAAU,OAAO;SAAE,QAAQ;SAAQ,OAAO;SAAQ,EAAI,CAAA,EACrD,EAAS,UACL;;OAER,EAAS,SACR,kBAAC,QAAD;QAAM,OAAO;SAAE,SAAS;SAAe,YAAY;SAAU,KAAK;SAAO;kBAAzE,CACE,kBAAC,GAAD,EAAM,OAAO;SAAE,QAAQ;SAAQ,OAAO;SAAQ,EAAI,CAAA,EACjD,EAAS,OAAO,QAAQ,EAAE,CACtB;YACL;OACA;;KACC;MA9DF,EAAS,GA8DP;IAEX;EACE,CAAA;EAER"}

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

@@ -1,7 +1,9 @@
-import { memo as e, useMemo as t } from "react";
-import { DatabaseZap as n } from "lucide-react";
-import { Button as r } from "@burdenoff/fe-libs/ui";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Section as e } from "../common/Section.js";
+import "../common/index.js";
+import { memo as t, useMemo as n } from "react";
+import { DatabaseZap as r } from "lucide-react";
+import { Button as i } from "@burdenoff/fe-libs/ui";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/TemplateSetupBanner.tsx
 var o = "templateDataSinkSlot";
 function s(e) {
@@ -9,71 +11,37 @@ function s(e) {
 	let t = e.metadata?.[o];
 	return typeof t == "string" && t.length > 0 ? t : null;
 }
-var c = e(function({ widgets: e, isEditMode: o = !1, onConnectData: c }) {
-	let { unconnectedCount: l, slots: u } = t(() => {
-		let t = /* @__PURE__ */ new Set(), n = 0;
-		for (let r of e) {
-			let e = s(r);
-			e && (n += 1, t.add(e));
+var c = t(function({ widgets: t, isEditMode: o = !1, onConnectData: c }) {
+	let { unconnectedCount: l, slots: u } = n(() => {
+		let e = /* @__PURE__ */ new Set(), n = 0;
+		for (let r of t) {
+			let t = s(r);
+			t && (n += 1, e.add(t));
 		}
 		return {
 			unconnectedCount: n,
-			slots: Array.from(t)
+			slots: Array.from(e)
 		};
-	}, [e]);
+	}, [t]);
 	if (o || l === 0) return null;
 	let d = u.length === 1 ? "data source" : "data sources";
 	return /* @__PURE__ */ a("div", {
 		role: "status",
-		style: {
-			display: "flex",
-			alignItems: "center",
-			gap: "var(--space-sm)",
-			padding: "var(--space-sm) var(--space-md)",
-			marginBottom: "var(--space-sm)",
-			borderRadius: "var(--radius-md)",
-			border: "1px solid var(--color-border-info)",
-			background: "var(--color-surface-info-subtle)",
-			color: "var(--color-text-info)"
-		},
-		children: [
-			/* @__PURE__ */ i(n, {
-				style: {
-					height: "var(--size-icon-sm)",
-					width: "var(--size-icon-sm)",
-					flexShrink: 0
-				},
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ a("div", {
-				style: {
-					flex: 1,
-					minWidth: 0
-				},
-				children: [/* @__PURE__ */ i("div", {
-					style: { fontWeight: "var(--font-weight-medium)" },
-					children: "This dashboard came from a template"
-				}), /* @__PURE__ */ a("div", {
-					style: { fontSize: "var(--font-size-sm)" },
-					children: [
-						l,
-						" ",
-						l === 1 ? "widget needs" : "widgets need",
-						" connecting to your data — ",
-						u.length,
-						" ",
-						d,
-						" to set up."
-					]
-				})]
-			}),
-			c ? /* @__PURE__ */ i(r, {
+		className: "mx-card-padding mt-control-gap flex-shrink-0",
+		children: /* @__PURE__ */ a(e, {
+			tone: "info",
+			padding: "compact",
+			headingLevel: 3,
+			"data-testid": "template-setup-banner",
+			icon: /* @__PURE__ */ a(r, { className: "h-icon-sm w-icon-sm" }),
+			title: "This dashboard came from a template",
+			description: `${l} ${l === 1 ? "widget needs" : "widgets need"} connecting to your data — ${u.length} ${d} to set up.`,
+			actions: c ? /* @__PURE__ */ a(i, {
 				size: "sm",
 				onClick: () => c(u),
-				style: { flexShrink: 0 },
 				children: "Connect data"
-			}) : null
-		]
+			}) : void 0
+		})
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateSetupBanner.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/TemplateSetupBanner.tsx"],"sourcesContent":["/**\n * TemplateSetupBanner\n *\n * Shown on a board installed from a store template that still has widgets\n * without a data source.\n *\n * WHY THIS EXISTS:\n *   Template installs deliberately do not require every data-sink slot to be\n *   bound up front — a brand-new workspace has no sinks at all, so a hard\n *   requirement would make the template gallery unusable for exactly the users\n *   it exists to serve. The cost of that choice is that the board renders\n *   immediately with some widgets holding no data.\n *\n *   A workflow can get away with the equivalent (FluidGrids just toasts \"go\n *   configure your credential\") because nothing runs until you press Test. A\n *   dashboard renders the instant you open it, so an unconnected widget is\n *   visually indistinguishable from a crashed one. This banner is what\n *   reframes the screen from \"broken\" to \"setup in progress\", and it does more\n *   work for that than any per-widget treatment.\n *\n * It derives its state from the widgets themselves — each widget installed from\n * a template carries its originating slot in `metadata.templateDataSinkSlot` —\n * so it needs no extra query and lights up for any such board.\n *\n * Semantic status tokens only, no raw colors.\n *\n * @module bigconsole/components/dashboard/TemplateSetupBanner\n */\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { DatabaseZap } from 'lucide-react';\nimport { type FC, memo, useMemo } from 'react';\n\nimport type { Widget } from '../../types';\n\n/** Metadata key written by the backend template installer. */\nconst WIDGET_TEMPLATE_SLOT_KEY = 'templateDataSinkSlot';\n\nexport interface TemplateSetupBannerProps {\n  widgets: Widget[];\n  /** Hidden while editing: the builder has its own binding affordances. */\n  isEditMode?: boolean;\n  /** Opens the guided connect flow. Omit to render the banner without a CTA. */\n  onConnectData?: (slots: string[]) => void;\n}\n\n/** A widget that came from a template and still has no sink bound. */\nfunction needsData(widget: Widget): string | null {\n  if (widget.dataSinkId) return null;\n  const slot = widget.metadata?.[WIDGET_TEMPLATE_SLOT_KEY];\n  return typeof slot === 'string' && slot.length > 0 ? slot : null;\n}\n\nexport const TemplateSetupBanner: FC<TemplateSetupBannerProps> = memo(function TemplateSetupBanner({\n  widgets,\n  isEditMode = false,\n  onConnectData,\n}) {\n  const { unconnectedCount, slots } = useMemo(() => {\n    const found = new Set<string>();\n    let count = 0;\n    for (const widget of widgets) {\n      const slot = needsData(widget);\n      if (!slot) continue;\n      count += 1;\n      found.add(slot);\n    }\n    return { unconnectedCount: count, slots: Array.from(found) };\n  }, [widgets]);\n\n  if (isEditMode || unconnectedCount === 0) return null;\n\n  const sourceWord = slots.length === 1 ? 'data source' : 'data sources';\n  const widgetWord = unconnectedCount === 1 ? 'widget needs' : 'widgets need';\n\n  return (\n    <div\n      role=\"status\"\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 'var(--space-sm)',\n        padding: 'var(--space-sm) var(--space-md)',\n        marginBottom: 'var(--space-sm)',\n        borderRadius: 'var(--radius-md)',\n        border: '1px solid var(--color-border-info)',\n        background: 'var(--color-surface-info-subtle)',\n        color: 'var(--color-text-info)',\n      }}\n    >\n      <DatabaseZap\n        style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)', flexShrink: 0 }}\n        aria-hidden=\"true\"\n      />\n\n      <div style={{ flex: 1, minWidth: 0 }}>\n        <div style={{ fontWeight: 'var(--font-weight-medium)' }}>This dashboard came from a template</div>\n        <div style={{ fontSize: 'var(--font-size-sm)' }}>\n          {unconnectedCount} {widgetWord} connecting to your data — {slots.length} {sourceWord} to set up.\n        </div>\n      </div>\n\n      {onConnectData ? (\n        <Button size=\"sm\" onClick={() => onConnectData(slots)} style={{ flexShrink: 0 }}>\n          Connect data\n        </Button>\n      ) : null}\n    </div>\n  );\n});\n\nexport default TemplateSetupBanner;\n"],"mappings":";;;;;AAmCA,IAAM,IAA2B;AAWjC,SAAS,EAAU,GAA+B;AAChD,KAAI,EAAO,WAAY,QAAO;CAC9B,IAAM,IAAO,EAAO,WAAW;AAC/B,QAAO,OAAO,KAAS,YAAY,EAAK,SAAS,IAAI,IAAO;;AAG9D,IAAa,IAAoD,EAAK,SAA6B,EACjG,YACA,gBAAa,IACb,oBACC;CACD,IAAM,EAAE,qBAAkB,aAAU,QAAc;EAChD,IAAM,oBAAQ,IAAI,KAAa,EAC3B,IAAQ;AACZ,OAAK,IAAM,KAAU,GAAS;GAC5B,IAAM,IAAO,EAAU,EAAO;AACzB,SACL,KAAS,GACT,EAAM,IAAI,EAAK;;AAEjB,SAAO;GAAE,kBAAkB;GAAO,OAAO,MAAM,KAAK,EAAM;GAAE;IAC3D,CAAC,EAAQ,CAAC;AAEb,KAAI,KAAc,MAAqB,EAAG,QAAO;CAEjD,IAAM,IAAa,EAAM,WAAW,IAAI,gBAAgB;AAGxD,QACE,kBAAC,OAAD;EACE,MAAK;EACL,OAAO;GACL,SAAS;GACT,YAAY;GACZ,KAAK;GACL,SAAS;GACT,cAAc;GACd,cAAc;GACd,QAAQ;GACR,YAAY;GACZ,OAAO;GACR;YAZH;GAcE,kBAAC,GAAD;IACE,OAAO;KAAE,QAAQ;KAAuB,OAAO;KAAuB,YAAY;KAAG;IACrF,eAAY;IACZ,CAAA;GAEF,kBAAC,OAAD;IAAK,OAAO;KAAE,MAAM;KAAG,UAAU;KAAG;cAApC,CACE,kBAAC,OAAD;KAAK,OAAO,EAAE,YAAY,6BAA6B;eAAE;KAAyC,CAAA,EAClG,kBAAC,OAAD;KAAK,OAAO,EAAE,UAAU,uBAAuB;eAA/C;MACG;MAAiB;MAzBP,MAAqB,IAAI,iBAAiB;MAyBtB;MAA4B,EAAM;MAAO;MAAE;MAAW;MACjF;OACF;;GAEL,IACC,kBAAC,GAAD;IAAQ,MAAK;IAAK,eAAe,EAAc,EAAM;IAAE,OAAO,EAAE,YAAY,GAAG;cAAE;IAExE,CAAA,GACP;GACA;;EAER"}
+{"version":3,"file":"TemplateSetupBanner.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/TemplateSetupBanner.tsx"],"sourcesContent":["/**\n * TemplateSetupBanner\n *\n * Shown on a board installed from a store template that still has widgets\n * without a data source.\n *\n * WHY THIS EXISTS:\n *   Template installs deliberately do not require every data-sink slot to be\n *   bound up front — a brand-new workspace has no sinks at all, so a hard\n *   requirement would make the template gallery unusable for exactly the users\n *   it exists to serve. The cost of that choice is that the board renders\n *   immediately with some widgets holding no data.\n *\n *   A workflow can get away with the equivalent (FluidGrids just toasts \"go\n *   configure your credential\") because nothing runs until you press Test. A\n *   dashboard renders the instant you open it, so an unconnected widget is\n *   visually indistinguishable from a crashed one. This banner is what\n *   reframes the screen from \"broken\" to \"setup in progress\", and it does more\n *   work for that than any per-widget treatment.\n *\n * It derives its state from the widgets themselves — each widget installed from\n * a template carries its originating slot in `metadata.templateDataSinkSlot` —\n * so it needs no extra query and lights up for any such board.\n *\n * Semantic status tokens only, no raw colors.\n *\n * @module bigconsole/components/dashboard/TemplateSetupBanner\n */\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { DatabaseZap } from 'lucide-react';\nimport { type FC, memo, useMemo } from 'react';\n\nimport { Section } from '../common';\nimport type { Widget } from '../../types';\n\n/** Metadata key written by the backend template installer. */\nconst WIDGET_TEMPLATE_SLOT_KEY = 'templateDataSinkSlot';\n\nexport interface TemplateSetupBannerProps {\n  widgets: Widget[];\n  /** Hidden while editing: the builder has its own binding affordances. */\n  isEditMode?: boolean;\n  /** Opens the guided connect flow. Omit to render the banner without a CTA. */\n  onConnectData?: (slots: string[]) => void;\n}\n\n/** A widget that came from a template and still has no sink bound. */\nfunction needsData(widget: Widget): string | null {\n  if (widget.dataSinkId) return null;\n  const slot = widget.metadata?.[WIDGET_TEMPLATE_SLOT_KEY];\n  return typeof slot === 'string' && slot.length > 0 ? slot : null;\n}\n\nexport const TemplateSetupBanner: FC<TemplateSetupBannerProps> = memo(function TemplateSetupBanner({\n  widgets,\n  isEditMode = false,\n  onConnectData,\n}) {\n  const { unconnectedCount, slots } = useMemo(() => {\n    const found = new Set<string>();\n    let count = 0;\n    for (const widget of widgets) {\n      const slot = needsData(widget);\n      if (!slot) continue;\n      count += 1;\n      found.add(slot);\n    }\n    return { unconnectedCount: count, slots: Array.from(found) };\n  }, [widgets]);\n\n  if (isEditMode || unconnectedCount === 0) return null;\n\n  const sourceWord = slots.length === 1 ? 'data source' : 'data sources';\n  const widgetWord = unconnectedCount === 1 ? 'widget needs' : 'widgets need';\n\n  return (\n    <div role=\"status\" className=\"mx-card-padding mt-control-gap flex-shrink-0\">\n      <Section\n        tone=\"info\"\n        padding=\"compact\"\n        headingLevel={3}\n        data-testid=\"template-setup-banner\"\n        icon={<DatabaseZap className=\"h-icon-sm w-icon-sm\" />}\n        title=\"This dashboard came from a template\"\n        description={`${unconnectedCount} ${widgetWord} connecting to your data — ${slots.length} ${sourceWord} to set up.`}\n        actions={\n          onConnectData ? (\n            <Button size=\"sm\" onClick={() => onConnectData(slots)}>\n              Connect data\n            </Button>\n          ) : undefined\n        }\n      />\n    </div>\n  );\n});\n\nexport default TemplateSetupBanner;\n"],"mappings":";;;;;;;AAoCA,IAAM,IAA2B;AAWjC,SAAS,EAAU,GAA+B;AAChD,KAAI,EAAO,WAAY,QAAO;CAC9B,IAAM,IAAO,EAAO,WAAW;AAC/B,QAAO,OAAO,KAAS,YAAY,EAAK,SAAS,IAAI,IAAO;;AAG9D,IAAa,IAAoD,EAAK,SAA6B,EACjG,YACA,gBAAa,IACb,oBACC;CACD,IAAM,EAAE,qBAAkB,aAAU,QAAc;EAChD,IAAM,oBAAQ,IAAI,KAAa,EAC3B,IAAQ;AACZ,OAAK,IAAM,KAAU,GAAS;GAC5B,IAAM,IAAO,EAAU,EAAO;AACzB,SACL,KAAS,GACT,EAAM,IAAI,EAAK;;AAEjB,SAAO;GAAE,kBAAkB;GAAO,OAAO,MAAM,KAAK,EAAM;GAAE;IAC3D,CAAC,EAAQ,CAAC;AAEb,KAAI,KAAc,MAAqB,EAAG,QAAO;CAEjD,IAAM,IAAa,EAAM,WAAW,IAAI,gBAAgB;AAGxD,QACE,kBAAC,OAAD;EAAK,MAAK;EAAS,WAAU;YAC3B,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,cAAc;GACd,eAAY;GACZ,MAAM,kBAAC,GAAD,EAAa,WAAU,uBAAwB,CAAA;GACrD,OAAM;GACN,aAAa,GAAG,EAAiB,GAXpB,MAAqB,IAAI,iBAAiB,eAWR,6BAA6B,EAAM,OAAO,GAAG,EAAW;GACvG,SACE,IACE,kBAAC,GAAD;IAAQ,MAAK;IAAK,eAAe,EAAc,EAAM;cAAE;IAE9C,CAAA,GACP,KAAA;GAEN,CAAA;EACE,CAAA;EAER"}