@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/components/preview/previewShared.js

@@ -1,39 +1,57 @@
-import { PREVIEW_STEPS as e, PREVIEW_STEP_LABEL as t } from "../../assistant/assistantRunStore.js";
-import { useEffect as n, useState as r } from "react";
-import { Check as i, ChevronRight as a, Loader2 as o, Minus as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { SECTION_MOTION as e } from "../common/sectionStyles.js";
+import "../common/index.js";
+import { PREVIEW_STEPS as t, PREVIEW_STEP_LABEL as n } from "../../assistant/assistantRunStore.js";
+import { useEffect as r, useState as i } from "react";
+import { Check as a, ChevronRight as o, Loader2 as s, Minus as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/bigconsole/components/preview/previewShared.tsx
-function u({ status: e }) {
-	return e === "done" ? /* @__PURE__ */ c(i, { className: "size-3.5 text-status-success-text" }) : e === "running" ? /* @__PURE__ */ c(o, { className: "size-3.5 animate-spin text-action-primary-bg" }) : e === "skipped" ? /* @__PURE__ */ c(s, { className: "size-3.5 text-text-muted" }) : /* @__PURE__ */ c("span", { className: "size-1.5 rounded-full bg-border-strong" });
+var d = [
+	"min-w-0 overflow-hidden rounded-card border border-[var(--color-border-subtle)]",
+	"bg-bg-sunken shadow-[var(--shadow-elevation-1)]",
+	e
+].join(" "), f = "border-b border-[var(--color-border-subtle)]";
+function p({ status: e }) {
+	return e === "done" ? /* @__PURE__ */ l(a, { className: "size-3.5 text-status-success-text" }) : e === "running" ? /* @__PURE__ */ l(s, { className: "size-3.5 animate-spin text-action-primary-bg" }) : e === "skipped" ? /* @__PURE__ */ l(c, { className: "size-3.5 text-text-muted" }) : /* @__PURE__ */ l("span", { className: "size-1.5 rounded-full bg-[var(--color-border-strong)]" });
 }
-function d({ steps: n }) {
-	return /* @__PURE__ */ c("div", {
-		className: "flex flex-wrap items-center gap-1",
+function m(e) {
+	let t = "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs";
+	return e === "done" ? `${t} border-status-success-border bg-status-success-bg font-medium text-status-success-text` : e === "running" ? `${t} border-[var(--color-action-primary-bg)] bg-bg-surface font-semibold text-text-primary shadow-[var(--shadow-elevation-1)]` : `${t} border-[var(--color-border-subtle)] font-medium text-text-muted`;
+}
+function h({ steps: e }) {
+	return /* @__PURE__ */ l("div", {
+		role: "list",
+		className: "flex min-w-0 items-center gap-1 overflow-x-auto pb-0.5",
 		"data-testid": "ai-preview-step-rail",
-		children: e.map((r, i) => /* @__PURE__ */ l("div", {
-			className: "flex items-center gap-1",
-			children: [/* @__PURE__ */ l("span", {
+		"aria-label": "Build steps",
+		children: t.map((r, i) => /* @__PURE__ */ u("div", {
+			role: "listitem",
+			className: "flex shrink-0 items-center gap-1",
+			children: [/* @__PURE__ */ u("span", {
 				"data-testid": `ai-preview-step-${r}`,
-				"data-status": n[r],
-				className: ["inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium", n[r] === "done" ? "border-status-success-border bg-status-success-bg text-status-success-text" : n[r] === "running" ? "border-border-strong bg-bg-surface text-text-primary" : "border-border-default text-text-muted"].join(" "),
+				"data-status": e[r],
+				"aria-current": e[r] === "running" ? "step" : void 0,
+				className: m(e[r]),
 				children: [
-					/* @__PURE__ */ c(u, { status: n[r] }),
-					t[r],
-					n[r] === "skipped" ? /* @__PURE__ */ c("span", {
+					/* @__PURE__ */ l(p, { status: e[r] }),
+					n[r],
+					e[r] === "skipped" ? /* @__PURE__ */ l("span", {
 						className: "text-[10px]",
 						children: "skipped"
 					}) : null
 				]
-			}), i < e.length - 1 ? /* @__PURE__ */ c(a, { className: "size-3.5 text-text-muted" }) : null]
+			}), i < t.length - 1 ? /* @__PURE__ */ l(o, {
+				className: "size-3.5 shrink-0 text-text-muted",
+				"aria-hidden": "true"
+			}) : null]
 		}, r))
 	});
 }
-function f(e) {
+function g(e) {
 	return e < 5 ? "just now" : e < 60 ? `${String(e)}s ago` : `${String(Math.floor(e / 60))}m ago`;
 }
-function p() {
-	let [e, t] = r(0);
-	return n(() => {
+function _() {
+	let [e, t] = i(0);
+	return r(() => {
 		let e = () => {
 			let e = document.querySelector("[data-testid=\"assistant-widget-window\"][data-layout=\"sidebar\"]")?.getBoundingClientRect(), n = e && e.width < window.innerWidth * .75 ? Math.round(e.width) : 0;
 			t((e) => e === n ? e : n);
@@ -46,6 +64,6 @@ function p() {
 	}, []), e;
 }
 //#endregion
-export { d as StepRail, f as formatAgo, p as useAssistantSidebarWidth };
+export { f as PREVIEW_CHROME_DIVIDER, d as PREVIEW_PANEL_SHELL, h as StepRail, g as formatAgo, _ as useAssistantSidebarWidth };
 
 //# sourceMappingURL=previewShared.js.map

package/dist/bigconsole/components/preview/previewShared.js.map

@@ -1 +1 @@
-{"version":3,"file":"previewShared.js","names":[],"sources":["../../../../src/bigconsole/components/preview/previewShared.tsx"],"sourcesContent":["/**\n * Presentational bits shared by the two AI-preview surfaces:\n *   - AiPreviewPanel     — the full panel with live entity tabs, mounted inside\n *                          BigConsoleRoot (needs the BigConsole Apollo context).\n *   - AiPreviewMiniPanel — the lightweight, store-only panel mounted by the app\n *                          shell so the build stays visible on ANY page.\n *\n * Nothing here touches Apollo, React Query, or BigConsole context — it is pure\n * store-shape + DOM, which is exactly why the mini panel can live in the app\n * shell without dragging the data layer along.\n */\nimport { useEffect, useState } from 'react';\nimport { Check, ChevronRight, Loader2, Minus } from 'lucide-react';\n\nimport {\n  PREVIEW_STEP_LABEL,\n  PREVIEW_STEPS,\n  type PreviewStepKey,\n  type PreviewStepStatus,\n} from '../../assistant/assistantRunStore';\n\nexport function StepPip({ status }: { status: PreviewStepStatus }) {\n  if (status === 'done') return <Check className=\"size-3.5 text-status-success-text\" />;\n  if (status === 'running') return <Loader2 className=\"size-3.5 animate-spin text-action-primary-bg\" />;\n  if (status === 'skipped') return <Minus className=\"size-3.5 text-text-muted\" />;\n  return <span className=\"size-1.5 rounded-full bg-border-strong\" />;\n}\n\nexport function StepRail({ steps }: { steps: Record<PreviewStepKey, PreviewStepStatus> }) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-1\" data-testid=\"ai-preview-step-rail\">\n      {PREVIEW_STEPS.map((key, index) => (\n        <div key={key} className=\"flex items-center gap-1\">\n          <span\n            data-testid={`ai-preview-step-${key}`}\n            data-status={steps[key]}\n            className={[\n              'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium',\n              steps[key] === 'done'\n                ? 'border-status-success-border bg-status-success-bg text-status-success-text'\n                : steps[key] === 'running'\n                  ? 'border-border-strong bg-bg-surface text-text-primary'\n                  : 'border-border-default text-text-muted',\n            ].join(' ')}\n          >\n            <StepPip status={steps[key]} />\n            {PREVIEW_STEP_LABEL[key]}\n            {steps[key] === 'skipped' ? <span className=\"text-[10px]\">skipped</span> : null}\n          </span>\n          {index < PREVIEW_STEPS.length - 1 ? <ChevronRight className=\"size-3.5 text-text-muted\" /> : null}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport function formatAgo(seconds: number): string {\n  if (seconds < 5) return 'just now';\n  if (seconds < 60) return `${String(seconds)}s ago`;\n  return `${String(Math.floor(seconds / 60))}m ago`;\n}\n\n/**\n * Width of the assistant sidebar, or 0 when it is closed.\n *\n * Polled rather than subscribed: the widget lives in fe-libs, is mounted by the\n * app shell, and emits nothing when it opens or closes. Reading the DOM is the\n * only honest signal available, and it is cheap.\n */\nexport function useAssistantSidebarWidth(): number {\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const measure = () => {\n      const el = document.querySelector('[data-testid=\"assistant-widget-window\"][data-layout=\"sidebar\"]');\n      const rect = el?.getBoundingClientRect();\n      // Below `sm` the sidebar is full-width; reserving that would leave no room\n      // for the preview at all, so on small screens let it stack underneath.\n      const next = rect && rect.width < window.innerWidth * 0.75 ? Math.round(rect.width) : 0;\n      setWidth((current) => (current === next ? current : next));\n    };\n    measure();\n    const intervalId = window.setInterval(measure, 500);\n    window.addEventListener('resize', measure);\n    return () => {\n      window.clearInterval(intervalId);\n      window.removeEventListener('resize', measure);\n    };\n  }, []);\n\n  return width;\n}\n"],"mappings":";;;;;AAqBA,SAAgB,EAAQ,EAAE,aAAyC;AAIjE,QAHI,MAAW,SAAe,kBAAC,GAAD,EAAO,WAAU,qCAAsC,CAAA,GACjF,MAAW,YAAkB,kBAAC,GAAD,EAAS,WAAU,gDAAiD,CAAA,GACjG,MAAW,YAAkB,kBAAC,GAAD,EAAO,WAAU,4BAA6B,CAAA,GACxE,kBAAC,QAAD,EAAM,WAAU,0CAA2C,CAAA;;AAGpE,SAAgB,EAAS,EAAE,YAA+D;AACxF,QACE,kBAAC,OAAD;EAAK,WAAU;EAAoC,eAAY;YAC5D,EAAc,KAAK,GAAK,MACvB,kBAAC,OAAD;GAAe,WAAU;aAAzB,CACE,kBAAC,QAAD;IACE,eAAa,mBAAmB;IAChC,eAAa,EAAM;IACnB,WAAW,CACT,wFACA,EAAM,OAAS,SACX,+EACA,EAAM,OAAS,YACb,yDACA,wCACP,CAAC,KAAK,IAAI;cAVb;KAYE,kBAAC,GAAD,EAAS,QAAQ,EAAM,IAAQ,CAAA;KAC9B,EAAmB;KACnB,EAAM,OAAS,YAAY,kBAAC,QAAD;MAAM,WAAU;gBAAc;MAAc,CAAA,GAAG;KACtE;OACN,IAAQ,EAAc,SAAS,IAAI,kBAAC,GAAD,EAAc,WAAU,4BAA6B,CAAA,GAAG,KACxF;KAlBI,EAkBJ,CACN;EACE,CAAA;;AAIV,SAAgB,EAAU,GAAyB;AAGjD,QAFI,IAAU,IAAU,aACpB,IAAU,KAAW,GAAG,OAAO,EAAQ,CAAC,SACrC,GAAG,OAAO,KAAK,MAAM,IAAU,GAAG,CAAC,CAAC;;AAU7C,SAAgB,IAAmC;CACjD,IAAM,CAAC,GAAO,KAAY,EAAS,EAAE;AAoBrC,QAlBA,QAAgB;EACd,IAAM,UAAgB;GAEpB,IAAM,IADK,SAAS,cAAc,qEAAiE,EAClF,uBAAuB,EAGlC,IAAO,KAAQ,EAAK,QAAQ,OAAO,aAAa,MAAO,KAAK,MAAM,EAAK,MAAM,GAAG;AACtF,MAAU,MAAa,MAAY,IAAO,IAAU,EAAM;;AAE5D,KAAS;EACT,IAAM,IAAa,OAAO,YAAY,GAAS,IAAI;AAEnD,SADA,OAAO,iBAAiB,UAAU,EAAQ,QAC7B;AAEX,GADA,OAAO,cAAc,EAAW,EAChC,OAAO,oBAAoB,UAAU,EAAQ;;IAE9C,EAAE,CAAC,EAEC"}
+{"version":3,"file":"previewShared.js","names":[],"sources":["../../../../src/bigconsole/components/preview/previewShared.tsx"],"sourcesContent":["/**\n * Presentational bits shared by the two AI-preview surfaces:\n *   - AiPreviewPanel     — the full panel with live entity tabs, mounted inside\n *                          BigConsoleRoot (needs the BigConsole Apollo context).\n *   - AiPreviewMiniPanel — the lightweight, store-only panel mounted by the app\n *                          shell so the build stays visible on ANY page.\n *\n * Nothing here touches Apollo, React Query, or BigConsole context — it is pure\n * store-shape + DOM, which is exactly why the mini panel can live in the app\n * shell without dragging the data layer along.\n */\nimport { useEffect, useState } from 'react';\nimport { Check, ChevronRight, Loader2, Minus } from 'lucide-react';\n\nimport {\n  PREVIEW_STEP_LABEL,\n  PREVIEW_STEPS,\n  type PreviewStepKey,\n  type PreviewStepStatus,\n} from '../../assistant/assistantRunStore';\nimport { SECTION_MOTION } from '../common';\n\n/**\n * The panel shell, shared by both preview surfaces.\n *\n * `rounded-lg` + `border-border-default` used to make this a fourth surface\n * recipe in a product that otherwise uses `rounded-card` and the theme-aware\n * `--color-border-subtle` — and the plain `border-*` utilities are registered\n * as frozen light hex in this shell, so they do not follow dark mode. Both\n * panels now read the recipe from here, so they cannot drift apart.\n */\nexport const PREVIEW_PANEL_SHELL = [\n  'min-w-0 overflow-hidden rounded-card border border-[var(--color-border-subtle)]',\n  'bg-bg-sunken shadow-[var(--shadow-elevation-1)]',\n  SECTION_MOTION,\n].join(' ');\n\n/** Chrome strips (header, progress, tabs) share one recessed treatment. */\nexport const PREVIEW_CHROME_DIVIDER = 'border-b border-[var(--color-border-subtle)]';\n\nexport function StepPip({ status }: { status: PreviewStepStatus }) {\n  if (status === 'done') return <Check className=\"size-3.5 text-status-success-text\" />;\n  if (status === 'running') return <Loader2 className=\"size-3.5 animate-spin text-action-primary-bg\" />;\n  if (status === 'skipped') return <Minus className=\"size-3.5 text-text-muted\" />;\n  // `bg-border-strong` is registered as a frozen light hex in this shell, so the\n  // not-started pip stayed light grey in dark mode.\n  return <span className=\"size-1.5 rounded-full bg-[var(--color-border-strong)]\" />;\n}\n\n/**\n * Per-step chip treatment. The step you are ON has to out-rank a not-started\n * step at a glance — they used to differ only by border shade, which is the\n * weakest possible signal for the panel's only progress narrative.\n */\nfunction stepChipClasses(status: PreviewStepStatus): string {\n  // `rounded-full` rather than `rounded-pill`: this rail also renders inside the\n  // app shell's own Tailwind build, and `rounded-full` needs no token registry.\n  const base = 'inline-flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs';\n  if (status === 'done') {\n    return `${base} border-status-success-border bg-status-success-bg font-medium text-status-success-text`;\n  }\n  if (status === 'running') {\n    return `${base} border-[var(--color-action-primary-bg)] bg-bg-surface font-semibold text-text-primary shadow-[var(--shadow-elevation-1)]`;\n  }\n  return `${base} border-[var(--color-border-subtle)] font-medium text-text-muted`;\n}\n\nexport function StepRail({ steps }: { steps: Record<PreviewStepKey, PreviewStepStatus> }) {\n  return (\n    // One scrolling line rather than `flex-wrap`: wrapping left chevrons\n    // dangling at the end of a line, pointing at nothing.\n    //\n    // `role=\"list\"` is what makes the `aria-label` count: an aria-label on a\n    // role-less <div> is dropped by every screen reader, so the rail would have\n    // been announced as four unrelated strings.\n    <div\n      role=\"list\"\n      className=\"flex min-w-0 items-center gap-1 overflow-x-auto pb-0.5\"\n      data-testid=\"ai-preview-step-rail\"\n      aria-label=\"Build steps\"\n    >\n      {PREVIEW_STEPS.map((key, index) => (\n        <div key={key} role=\"listitem\" className=\"flex shrink-0 items-center gap-1\">\n          <span\n            data-testid={`ai-preview-step-${key}`}\n            data-status={steps[key]}\n            aria-current={steps[key] === 'running' ? 'step' : undefined}\n            className={stepChipClasses(steps[key])}\n          >\n            <StepPip status={steps[key]} />\n            {PREVIEW_STEP_LABEL[key]}\n            {steps[key] === 'skipped' ? <span className=\"text-[10px]\">skipped</span> : null}\n          </span>\n          {index < PREVIEW_STEPS.length - 1 ? (\n            <ChevronRight className=\"size-3.5 shrink-0 text-text-muted\" aria-hidden=\"true\" />\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport function formatAgo(seconds: number): string {\n  if (seconds < 5) return 'just now';\n  if (seconds < 60) return `${String(seconds)}s ago`;\n  return `${String(Math.floor(seconds / 60))}m ago`;\n}\n\n/**\n * Width of the assistant sidebar, or 0 when it is closed.\n *\n * Polled rather than subscribed: the widget lives in fe-libs, is mounted by the\n * app shell, and emits nothing when it opens or closes. Reading the DOM is the\n * only honest signal available, and it is cheap.\n */\nexport function useAssistantSidebarWidth(): number {\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const measure = () => {\n      const el = document.querySelector('[data-testid=\"assistant-widget-window\"][data-layout=\"sidebar\"]');\n      const rect = el?.getBoundingClientRect();\n      // Below `sm` the sidebar is full-width; reserving that would leave no room\n      // for the preview at all, so on small screens let it stack underneath.\n      const next = rect && rect.width < window.innerWidth * 0.75 ? Math.round(rect.width) : 0;\n      setWidth((current) => (current === next ? current : next));\n    };\n    measure();\n    const intervalId = window.setInterval(measure, 500);\n    window.addEventListener('resize', measure);\n    return () => {\n      window.clearInterval(intervalId);\n      window.removeEventListener('resize', measure);\n    };\n  }, []);\n\n  return width;\n}\n"],"mappings":";;;;;;;AA+BA,IAAa,IAAsB;CACjC;CACA;CACA;CACD,CAAC,KAAK,IAAI,EAGE,IAAyB;AAEtC,SAAgB,EAAQ,EAAE,aAAyC;AAMjE,QALI,MAAW,SAAe,kBAAC,GAAD,EAAO,WAAU,qCAAsC,CAAA,GACjF,MAAW,YAAkB,kBAAC,GAAD,EAAS,WAAU,gDAAiD,CAAA,GACjG,MAAW,YAAkB,kBAAC,GAAD,EAAO,WAAU,4BAA6B,CAAA,GAGxE,kBAAC,QAAD,EAAM,WAAU,yDAA0D,CAAA;;AAQnF,SAAS,EAAgB,GAAmC;CAG1D,IAAM,IAAO;AAOb,QANI,MAAW,SACN,GAAG,EAAK,2FAEb,MAAW,YACN,GAAG,EAAK,6HAEV,GAAG,EAAK;;AAGjB,SAAgB,EAAS,EAAE,YAA+D;AACxF,QAOE,kBAAC,OAAD;EACE,MAAK;EACL,WAAU;EACV,eAAY;EACZ,cAAW;YAEV,EAAc,KAAK,GAAK,MACvB,kBAAC,OAAD;GAAe,MAAK;GAAW,WAAU;aAAzC,CACE,kBAAC,QAAD;IACE,eAAa,mBAAmB;IAChC,eAAa,EAAM;IACnB,gBAAc,EAAM,OAAS,YAAY,SAAS,KAAA;IAClD,WAAW,EAAgB,EAAM,GAAK;cAJxC;KAME,kBAAC,GAAD,EAAS,QAAQ,EAAM,IAAQ,CAAA;KAC9B,EAAmB;KACnB,EAAM,OAAS,YAAY,kBAAC,QAAD;MAAM,WAAU;gBAAc;MAAc,CAAA,GAAG;KACtE;OACN,IAAQ,EAAc,SAAS,IAC9B,kBAAC,GAAD;IAAc,WAAU;IAAoC,eAAY;IAAS,CAAA,GAC/E,KACA;KAdI,EAcJ,CACN;EACE,CAAA;;AAIV,SAAgB,EAAU,GAAyB;AAGjD,QAFI,IAAU,IAAU,aACpB,IAAU,KAAW,GAAG,OAAO,EAAQ,CAAC,SACrC,GAAG,OAAO,KAAK,MAAM,IAAU,GAAG,CAAC,CAAC;;AAU7C,SAAgB,IAAmC;CACjD,IAAM,CAAC,GAAO,KAAY,EAAS,EAAE;AAoBrC,QAlBA,QAAgB;EACd,IAAM,UAAgB;GAEpB,IAAM,IADK,SAAS,cAAc,qEAAiE,EAClF,uBAAuB,EAGlC,IAAO,KAAQ,EAAK,QAAQ,OAAO,aAAa,MAAO,KAAK,MAAM,EAAK,MAAM,GAAG;AACtF,MAAU,MAAa,MAAY,IAAO,IAAU,EAAM;;AAE5D,KAAS;EACT,IAAM,IAAa,OAAO,YAAY,GAAS,IAAI;AAEnD,SADA,OAAO,iBAAiB,UAAU,EAAQ,QAC7B;AAEX,GADA,OAAO,cAAc,EAAW,EAChC,OAAO,oBAAoB,UAAU,EAAQ;;IAE9C,EAAE,CAAC,EAEC"}