@burdenoff/microfe-technospam 2026.1102.2 → 2026.1102.3

package/dist/technospam/components/PageLayout.js

@@ -1,52 +1,64 @@
 import { useTechnoSpamNavigate as e } from "../providers/TechnoSpamProvider.js";
 import { useNativeControls as t } from "../hooks/useNativeControls.js";
-import { useTr as n } from "../hooks/useTr.js";
-import { cn as r } from "../utils/cn.js";
-import { ArrowLeft as i } from "lucide-react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { AuroraBackground as s } from "@burdenoff/fe-libs/ui";
+import { usePhoneLayout as n } from "../hooks/usePhoneLayout.js";
+import { useTr as r } from "../hooks/useTr.js";
+import { cn as i } from "../utils/cn.js";
+import { MobileSectionTabs as a } from "./MobileSectionTabs.js";
+import { useCallback as o, useContext as s } from "react";
+import { ArrowLeft as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { getApolloContext as d } from "@apollo/client/react";
+import { AuroraBackground as f, PullToRefresh as p } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/components/PageLayout.tsx
-function c({ title: c, description: l, actions: u, children: d, backPath: f, hero: p = !1 }) {
-	let m = e(), { impact: h } = t(), g = n();
-	return /* @__PURE__ */ o("div", {
+function m({ title: m, description: h, actions: g, children: _, backPath: v, hero: y = !1, mobileSection: b = !1 }) {
+	let x = e(), { impact: S } = t(), C = r(), { isPhone: w, nativeChrome: T } = n(), E = s(d()).client, D = o(async () => {
+		E && await E.refetchQueries({ include: "active" });
+	}, [E]);
+	return /* @__PURE__ */ u("div", {
 		className: "flex h-full flex-col bg-bg-surface",
-		children: [/* @__PURE__ */ o("div", {
-			className: r("relative flex flex-col gap-4 overflow-hidden border-b border-border-seam px-6 py-5 sm:flex-row sm:items-start sm:justify-between", p ? "bg-accent-primary/12" : "bg-bg-surface"),
+		children: [/* @__PURE__ */ u("div", {
+			className: i("relative flex flex-col gap-3 overflow-hidden border-b border-border-seam px-4 py-4 sm:flex-row sm:items-start sm:justify-between sm:gap-4 sm:px-6 sm:py-5", y ? "bg-accent-primary/12" : "bg-bg-surface"),
 			children: [
-				p ? /* @__PURE__ */ a(s, { intensity: "subtle" }) : null,
-				/* @__PURE__ */ o("div", {
+				y ? /* @__PURE__ */ l(f, { intensity: "subtle" }) : null,
+				/* @__PURE__ */ u("div", {
 					className: "relative flex min-w-0 flex-col gap-1",
 					children: [
-						f ? /* @__PURE__ */ o("button", {
+						v ? /* @__PURE__ */ u("button", {
 							type: "button",
 							onClick: () => {
-								h("light"), m(f);
+								S("light"), x(v);
 							},
-							className: "flex w-fit items-center gap-1 text-sm text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-focus-ring)]",
-							children: [/* @__PURE__ */ a(i, { size: 15 }), g("technospam.common.back", "Back")]
+							className: "-ml-1 flex min-h-11 w-fit items-center gap-1 px-1 text-sm sm:min-h-0 text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-focus-ring)]",
+							children: [/* @__PURE__ */ l(c, { size: 15 }), C("technospam.common.back", "Back")]
 						}) : null,
-						/* @__PURE__ */ a("h1", {
-							className: "truncate text-xl font-semibold text-text-primary sm:text-2xl",
-							children: c
+						/* @__PURE__ */ l("h1", {
+							className: "truncate text-2xl font-semibold text-text-primary",
+							children: m
 						}),
-						l ? /* @__PURE__ */ a("p", {
-							className: "max-w-2xl text-sm text-text-secondary",
-							children: l
+						h ? /* @__PURE__ */ l("p", {
+							className: "sr-only max-w-2xl text-sm text-text-secondary sm:not-sr-only",
+							children: h
 						}) : null
 					]
 				}),
-				u ? /* @__PURE__ */ a("div", {
+				g ? /* @__PURE__ */ l("div", {
 					className: "relative flex flex-wrap items-center gap-2",
-					children: u
+					children: g
 				}) : null
 			]
-		}), /* @__PURE__ */ a("div", {
-			className: "flex-1 overflow-y-auto p-6",
-			children: d
+		}), /* @__PURE__ */ u(p, {
+			onRefresh: D,
+			enabled: T,
+			label: C("technospam.common.refreshing", "Refreshing"),
+			className: "relative h-auto min-h-0 flex-1 overflow-y-auto p-4 pb-[calc(env(safe-area-inset-bottom)+1rem)] sm:p-6",
+			children: [b && w && !T ? /* @__PURE__ */ l("div", {
+				className: "mb-4",
+				children: /* @__PURE__ */ l(a, {})
+			}) : null, _]
 		})]
 	});
 }
 //#endregion
-export { c as PageLayout };
+export { m as PageLayout };
 
 //# sourceMappingURL=PageLayout.js.map

package/dist/technospam/components/PageLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.js","names":[],"sources":["../../../src/technospam/components/PageLayout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { ArrowLeft } from 'lucide-react';\nimport { AuroraBackground } from '@burdenoff/fe-libs/ui';\nimport { useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport { useNativeControls } from '../hooks/useNativeControls';\nimport { useTr } from '../hooks/useTr';\nimport { cn } from '../utils/cn';\n\ninterface PageLayoutProps {\n  title: ReactNode;\n  description?: ReactNode;\n  actions?: ReactNode;\n  children: ReactNode;\n  backPath?: string;\n  /** Render the page header with the living-glass aurora backdrop (module hero). */\n  hero?: boolean;\n}\n\n/**\n * Consistent page chrome for every TechnoSpam module page: a header band\n * (optionally with the aurora hero backdrop), an optional back affordance, an\n * actions slot, and a scrollable body. Mirrors the platform page pattern so\n * TechnoSpam feels native to the shell.\n */\nexport function PageLayout({\n  title,\n  description,\n  actions,\n  children,\n  backPath,\n  hero = false,\n}: PageLayoutProps) {\n  const navigate = useTechnoSpamNavigate();\n  const { impact } = useNativeControls();\n  const tr = useTr();\n\n  return (\n    <div className=\"flex h-full flex-col bg-bg-surface\">\n      <div\n        className={cn(\n          'relative flex flex-col gap-4 overflow-hidden border-b border-border-seam px-6 py-5 sm:flex-row sm:items-start sm:justify-between',\n          hero ? 'bg-accent-primary/12' : 'bg-bg-surface'\n        )}\n      >\n        {hero ? <AuroraBackground intensity=\"subtle\" /> : null}\n        <div className=\"relative flex min-w-0 flex-col gap-1\">\n          {backPath ? (\n            <button\n              type=\"button\"\n              onClick={() => {\n                void impact('light');\n                navigate(backPath);\n              }}\n              className=\"flex w-fit items-center gap-1 text-sm text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-focus-ring)]\"\n            >\n              <ArrowLeft size={15} />\n              {tr('technospam.common.back', 'Back')}\n            </button>\n          ) : null}\n          <h1 className=\"truncate text-xl font-semibold text-text-primary sm:text-2xl\">{title}</h1>\n          {description ? (\n            <p className=\"max-w-2xl text-sm text-text-secondary\">{description}</p>\n          ) : null}\n        </div>\n        {actions ? (\n          <div className=\"relative flex flex-wrap items-center gap-2\">{actions}</div>\n        ) : null}\n      </div>\n      <div className=\"flex-1 overflow-y-auto p-6\">{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgB,EAAW,EACzB,UACA,gBACA,YACA,aACA,aACA,UAAO,MACW;CAClB,IAAM,IAAW,GAAuB,EAClC,EAAE,cAAW,GAAmB,EAChC,IAAK,GAAO;AAElB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GACE,WAAW,EACT,oIACA,IAAO,yBAAyB,gBACjC;aAJH;IAMG,IAAO,kBAAC,GAAD,EAAkB,WAAU,UAAW,CAAA,GAAG;IAClD,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,IACC,kBAAC,UAAD;OACE,MAAK;OACL,eAAe;AAEb,QADK,EAAO,QAAQ,EACpB,EAAS,EAAS;;OAEpB,WAAU;iBANZ,CAQE,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA,EACtB,EAAG,0BAA0B,OAAO,CAC9B;WACP;MACJ,kBAAC,MAAD;OAAI,WAAU;iBAAgE;OAAW,CAAA;MACxF,IACC,kBAAC,KAAD;OAAG,WAAU;iBAAyC;OAAgB,CAAA,GACpE;MACA;;IACL,IACC,kBAAC,OAAD;KAAK,WAAU;eAA8C;KAAc,CAAA,GACzE;IACA;MACN,kBAAC,OAAD;GAAK,WAAU;GAA8B;GAAe,CAAA,CACxD"}
+{"version":3,"file":"PageLayout.js","names":[],"sources":["../../../src/technospam/components/PageLayout.tsx"],"sourcesContent":["import { useCallback, useContext, type ReactNode } from 'react';\nimport { ArrowLeft } from 'lucide-react';\nimport { getApolloContext } from '@apollo/client/react';\nimport { AuroraBackground, PullToRefresh } from '@burdenoff/fe-libs/ui';\nimport { useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport { useNativeControls } from '../hooks/useNativeControls';\nimport { usePhoneLayout } from '../hooks/usePhoneLayout';\nimport { useTr } from '../hooks/useTr';\nimport { cn } from '../utils/cn';\nimport { MobileSectionTabs } from './MobileSectionTabs';\n\ninterface PageLayoutProps {\n  title: ReactNode;\n  description?: ReactNode;\n  actions?: ReactNode;\n  children: ReactNode;\n  backPath?: string;\n  /** Render the page header with the living-glass aurora backdrop (module hero). */\n  hero?: boolean;\n  /**\n   * One of the four learner-journey pages (Home, Courses, Practice, Mentors):\n   * on a phone-width mobile browser it shows the in-page section switcher that\n   * stands in for the installed app's bottom tab bar.\n   */\n  mobileSection?: boolean;\n}\n\n/**\n * Consistent page chrome for every TechnoSpam module page: a header band\n * (optionally with the aurora hero backdrop), an optional back affordance, an\n * actions slot, and a scrollable body. Mirrors the platform page pattern so\n * TechnoSpam feels native to the shell.\n */\nexport function PageLayout({\n  title,\n  description,\n  actions,\n  children,\n  backPath,\n  hero = false,\n  mobileSection = false,\n}: PageLayoutProps) {\n  const navigate = useTechnoSpamNavigate();\n  const { impact } = useNativeControls();\n  const tr = useTr();\n  const { isPhone, nativeChrome } = usePhoneLayout();\n  // Read the client from context rather than useApolloClient(), which throws\n  // without a provider (isolated page tests and stories render without one).\n  const client = useContext(getApolloContext()).client;\n\n  // Pull-to-refresh re-runs every query the visible page is subscribed to.\n  const refresh = useCallback(async () => {\n    if (client) await client.refetchQueries({ include: 'active' });\n  }, [client]);\n\n  return (\n    <div className=\"flex h-full flex-col bg-bg-surface\">\n      <div\n        className={cn(\n          'relative flex flex-col gap-3 overflow-hidden border-b border-border-seam px-4 py-4 sm:flex-row sm:items-start sm:justify-between sm:gap-4 sm:px-6 sm:py-5',\n          hero ? 'bg-accent-primary/12' : 'bg-bg-surface'\n        )}\n      >\n        {hero ? <AuroraBackground intensity=\"subtle\" /> : null}\n        <div className=\"relative flex min-w-0 flex-col gap-1\">\n          {backPath ? (\n            <button\n              type=\"button\"\n              onClick={() => {\n                void impact('light');\n                navigate(backPath);\n              }}\n              className=\"-ml-1 flex min-h-11 w-fit items-center gap-1 px-1 text-sm sm:min-h-0 text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-focus-ring)]\"\n            >\n              <ArrowLeft size={15} />\n              {tr('technospam.common.back', 'Back')}\n            </button>\n          ) : null}\n          <h1 className=\"truncate text-2xl font-semibold text-text-primary\">{title}</h1>\n          {description ? (\n            // Visually dropped on phones to keep the header compact, but still\n            // announced to screen readers.\n            <p className=\"sr-only max-w-2xl text-sm text-text-secondary sm:not-sr-only\">\n              {description}\n            </p>\n          ) : null}\n        </div>\n        {actions ? (\n          <div className=\"relative flex flex-wrap items-center gap-2\">{actions}</div>\n        ) : null}\n      </div>\n      {/* The body owns scrolling. In the installed app it also carries the\n          native pull-to-refresh gesture; elsewhere PullToRefresh is a plain\n          scroller. The bottom padding clears the home indicator on phones\n          (the shell already reserves the tab bar's own height). The scroll\n          classes are repeated here because PullToRefresh's own copies live in\n          fe-libs' dist, which a consumer's Tailwind scan may not cover; without\n          them wide content (tab lists, tables) would scroll the whole page\n          sideways instead of this body. */}\n      <PullToRefresh\n        onRefresh={refresh}\n        enabled={nativeChrome}\n        label={tr('technospam.common.refreshing', 'Refreshing')}\n        className=\"relative h-auto min-h-0 flex-1 overflow-y-auto p-4 pb-[calc(env(safe-area-inset-bottom)+1rem)] sm:p-6\"\n      >\n        {mobileSection && isPhone && !nativeChrome ? (\n          <div className=\"mb-4\">\n            <MobileSectionTabs />\n          </div>\n        ) : null}\n        {children}\n      </PullToRefresh>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAiCA,SAAgB,EAAW,EACzB,UACA,gBACA,YACA,aACA,aACA,UAAO,IACP,mBAAgB,MACE;CAClB,IAAM,IAAW,GAAuB,EAClC,EAAE,cAAW,GAAmB,EAChC,IAAK,GAAO,EACZ,EAAE,YAAS,oBAAiB,GAAgB,EAG5C,IAAS,EAAW,GAAkB,CAAC,CAAC,QAGxC,IAAU,EAAY,YAAY;AACtC,EAAI,KAAQ,MAAM,EAAO,eAAe,EAAE,SAAS,UAAU,CAAC;IAC7D,CAAC,EAAO,CAAC;AAEZ,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GACE,WAAW,EACT,6JACA,IAAO,yBAAyB,gBACjC;aAJH;IAMG,IAAO,kBAAC,GAAD,EAAkB,WAAU,UAAW,CAAA,GAAG;IAClD,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,IACC,kBAAC,UAAD;OACE,MAAK;OACL,eAAe;AAEb,QADK,EAAO,QAAQ,EACpB,EAAS,EAAS;;OAEpB,WAAU;iBANZ,CAQE,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA,EACtB,EAAG,0BAA0B,OAAO,CAC9B;WACP;MACJ,kBAAC,MAAD;OAAI,WAAU;iBAAqD;OAAW,CAAA;MAC7E,IAGC,kBAAC,KAAD;OAAG,WAAU;iBACV;OACC,CAAA,GACF;MACA;;IACL,IACC,kBAAC,OAAD;KAAK,WAAU;eAA8C;KAAc,CAAA,GACzE;IACA;MASN,kBAAC,GAAD;GACE,WAAW;GACX,SAAS;GACT,OAAO,EAAG,gCAAgC,aAAa;GACvD,WAAU;aAJZ,CAMG,KAAiB,KAAW,CAAC,IAC5B,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAqB,CAAA;IACjB,CAAA,GACJ,MACH,EACa;KACZ"}

package/dist/technospam/components/lesson/SaveCourseOffline.js

@@ -5,11 +5,11 @@ import { useOnlineStatus as a } from "../../hooks/useOfflineLessons.js";
 import { useMemo as o, useState as s } from "react";
 import { CloudDownload as c, CloudOff as l, Trash2 as u } from "lucide-react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Button as p } from "@burdenoff/fe-libs/ui";
-import { useApolloClient as m } from "@apollo/client/react";
+import { useApolloClient as p } from "@apollo/client/react";
+import { Button as m } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/components/lesson/SaveCourseOffline.tsx
 function h({ scope: h, courseId: g, lessons: _, enrollment: v }) {
-	let y = m(), b = a(), x = _.filter((e) => !e.isLocked), [S, C] = s(0), w = o(() => i(h, g), [
+	let y = p(), b = a(), x = _.filter((e) => !e.isLocked), [S, C] = s(0), w = o(() => i(h, g), [
 		h,
 		g,
 		S
@@ -31,7 +31,7 @@ function h({ scope: h, courseId: g, lessons: _, enrollment: v }) {
 		children: [/* @__PURE__ */ f("span", {
 			className: "inline-flex items-center gap-1 rounded-full bg-accent-primary/6 px-2.5 py-1 text-xs font-medium text-accent-primary",
 			children: [/* @__PURE__ */ d(l, { size: 12 }), " Available offline"]
-		}), /* @__PURE__ */ d(p, {
+		}), /* @__PURE__ */ d(m, {
 			size: "sm",
 			variant: "ghost",
 			onClick: () => {
@@ -40,7 +40,7 @@ function h({ scope: h, courseId: g, lessons: _, enrollment: v }) {
 			"aria-label": "Remove offline copy",
 			children: /* @__PURE__ */ d(u, { size: 14 })
 		})]
-	}) : /* @__PURE__ */ f(p, {
+	}) : /* @__PURE__ */ f(m, {
 		size: "sm",
 		variant: "outline",
 		onClick: () => void k(),
@@ -52,7 +52,7 @@ function h({ scope: h, courseId: g, lessons: _, enrollment: v }) {
 			" Save for offline",
 			D > 0 ? ` (${D}/${x.length})` : ""
 		]
-	}) : /* @__PURE__ */ f(p, {
+	}) : /* @__PURE__ */ f(m, {
 		size: "sm",
 		variant: "outline",
 		disabled: !0,

package/dist/technospam/hooks/usePhoneLayout.d.ts

@@ -0,0 +1,18 @@
+/** Below Tailwind's `sm` breakpoint (640px): the phone layouts apply. */
+export declare const PHONE_MEDIA_QUERY = "(max-width: 639px)";
+export interface PhoneLayout {
+    /** Viewport is phone-width (any platform). */
+    isPhone: boolean;
+    /**
+     * Installed app (Capacitor / standalone PWA) on a phone: the shell renders
+     * its bottom tab bar and native top bar instead of the desktop chrome.
+     */
+    nativeChrome: boolean;
+}
+/**
+ * The single source for "which phone layout am I in" across TechnoSpam pages,
+ * so the in-page section switcher, pull-to-refresh and phone-only defaults all
+ * agree with the shell's own tab-bar rule.
+ */
+export declare function usePhoneLayout(): PhoneLayout;
+//# sourceMappingURL=usePhoneLayout.d.ts.map

package/dist/technospam/hooks/usePhoneLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePhoneLayout.d.ts","sourceRoot":"","sources":["../../../src/technospam/hooks/usePhoneLayout.ts"],"names":[],"mappings":"AAGA,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAEtD,MAAM,WAAW,WAAW;IAC1B,8CAA8C;IAC9C,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,WAAW,CAI5C"}

package/dist/technospam/hooks/usePhoneLayout.js

@@ -0,0 +1,14 @@
+import { useMediaQuery as e } from "@burdenoff/fe-libs/shared/hooks";
+import { useMobileTabBarVisible as t } from "@burdenoff/fe-libs/chrome/mobileTabBar/useMobileTabBarVisible";
+//#region src/technospam/hooks/usePhoneLayout.ts
+var n = "(max-width: 639px)";
+function r() {
+	return {
+		isPhone: e(n),
+		nativeChrome: t()
+	};
+}
+//#endregion
+export { r as usePhoneLayout };
+
+//# sourceMappingURL=usePhoneLayout.js.map

package/dist/technospam/hooks/usePhoneLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePhoneLayout.js","names":[],"sources":["../../../src/technospam/hooks/usePhoneLayout.ts"],"sourcesContent":["import { useMediaQuery } from '@burdenoff/fe-libs/shared/hooks';\nimport { useMobileTabBarVisible } from '@burdenoff/fe-libs/chrome/mobileTabBar/useMobileTabBarVisible';\n\n/** Below Tailwind's `sm` breakpoint (640px): the phone layouts apply. */\nexport const PHONE_MEDIA_QUERY = '(max-width: 639px)';\n\nexport interface PhoneLayout {\n  /** Viewport is phone-width (any platform). */\n  isPhone: boolean;\n  /**\n   * Installed app (Capacitor / standalone PWA) on a phone: the shell renders\n   * its bottom tab bar and native top bar instead of the desktop chrome.\n   */\n  nativeChrome: boolean;\n}\n\n/**\n * The single source for \"which phone layout am I in\" across TechnoSpam pages,\n * so the in-page section switcher, pull-to-refresh and phone-only defaults all\n * agree with the shell's own tab-bar rule.\n */\nexport function usePhoneLayout(): PhoneLayout {\n  const isPhone = useMediaQuery(PHONE_MEDIA_QUERY);\n  const nativeChrome = useMobileTabBarVisible();\n  return { isPhone, nativeChrome };\n}\n"],"mappings":";;;AAIA,IAAa,IAAoB;AAiBjC,SAAgB,IAA8B;AAG5C,QAAO;EAAE,SAFO,EAAc,EAAkB;EAE9B,cADG,GAAwB;EACb"}

package/dist/technospam/pages/AdminAdminDashboardPagePage.js

@@ -71,7 +71,7 @@ function $({ label: e, required: t, className: n, children: r }) {
 }
 function Ve({ seed: e, icon: n }) {
 	return /* @__PURE__ */ q("span", {
-		className: t("flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br text-white shadow-sm", r(e)),
+		className: t("flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br text-action-primary-text shadow-sm", r(e)),
 		children: /* @__PURE__ */ q(n, {
 			size: 18,
 			strokeWidth: 2