@burdenoff/microfe-technospam 2026.1102.1 → 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/SubmissionViews.d.ts

@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
 import { TecSubmission } from '../api/technospamApi';
 
+/** The grading fields the panel renders — a graded submission or a sample run. */
+export type GradedResult = Pick<TecSubmission, 'verdict' | 'passedCount' | 'totalCount' | 'runtimeMs' | 'stderr' | 'testResults'>;
 /**
  * A dark, editor-window styled code surface: mac-style traffic-light dots plus a
  * language label header over a scrollable monospace body so read-only code reads
@@ -24,8 +26,10 @@ export declare function IoBlock({ label, value }: {
  * row here only ever carries its name and status — never the input, the
  * expected output, or what the submitted program actually printed.
  */
-export declare function TestResultsPanel({ submission, actualOutputLabel, }: {
-    submission: TecSubmission;
+export declare function TestResultsPanel({ submission, actualOutputLabel, caseNoun, }: {
+    submission: GradedResult;
     actualOutputLabel?: string;
+    /** What the cases are called in the summary line, e.g. "sample test cases". */
+    caseNoun?: string;
 }): import("react").JSX.Element | null;
 //# sourceMappingURL=SubmissionViews.d.ts.map

package/dist/technospam/components/SubmissionViews.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubmissionViews.d.ts","sourceRoot":"","sources":["../../../src/technospam/components/SubmissionViews.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,aAAa,EAAqB,MAAM,sBAAsB,CAAC;AAE7E;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,aAAa,GACd,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,+BAuBA;AAED,2EAA2E;AAC3E,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,+BASjF;AAaD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,iBAAiC,GAClC,EAAE;IACD,UAAU,EAAE,aAAa,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,sCA0DA"}
+{"version":3,"file":"SubmissionViews.d.ts","sourceRoot":"","sources":["../../../src/technospam/components/SubmissionViews.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,aAAa,EAAqB,MAAM,sBAAsB,CAAC;AAE7E,kFAAkF;AAClF,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,aAAa,EACb,SAAS,GAAG,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,CAClF,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,aAAa,GACd,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,+BAuBA;AAED,2EAA2E;AAC3E,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,+BASjF;AAaD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,iBAAiC,EACjC,QAAuB,GACxB,EAAE;IACD,UAAU,EAAE,YAAY,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,sCA0DA"}

package/dist/technospam/components/SubmissionViews.js

@@ -55,9 +55,9 @@ function m(e) {
 		className: "text-status-error-fg"
 	};
 }
-function h({ submission: r, actualOutputLabel: a = "Your output" }) {
-	let s = r.testResults ?? [];
-	return s.length === 0 ? null : /* @__PURE__ */ u("div", {
+function h({ submission: r, actualOutputLabel: a = "Your output", caseNoun: s = "test cases" }) {
+	let c = r.testResults ?? [];
+	return c.length === 0 ? null : /* @__PURE__ */ u("div", {
 		className: "space-y-3",
 		children: [
 			/* @__PURE__ */ u("div", {
@@ -71,7 +71,8 @@ function h({ submission: r, actualOutputLabel: a = "Your output" }) {
 							r.passedCount,
 							" of ",
 							r.totalCount,
-							" test cases"
+							" ",
+							s
 						]
 					}),
 					/* @__PURE__ */ u("span", {
@@ -87,7 +88,7 @@ function h({ submission: r, actualOutputLabel: a = "Your output" }) {
 			}),
 			/* @__PURE__ */ l("div", {
 				className: "divide-y divide-border-seam overflow-hidden rounded-xl border border-border-seam",
-				children: s.map((n) => {
+				children: c.map((n) => {
 					let r = m(n.status);
 					return /* @__PURE__ */ u("div", {
 						className: "space-y-2 bg-bg-surface px-4 py-3",

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

@@ -1 +1 @@
-{"version":3,"file":"SubmissionViews.js","names":[],"sources":["../../../src/technospam/components/SubmissionViews.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { CheckCircle2, Clock, Code2, EyeOff, MinusCircle, XCircle } from 'lucide-react';\nimport { Badge } from '@burdenoff/fe-libs/ui';\nimport { StatusBadge } from './StatusBadge';\nimport { humanizeEnum } from '../utils/format';\nimport { cn } from '../utils/cn';\nimport type { TecSubmission, TecTestCaseStatus } from '../api/technospamApi';\n\n/**\n * A dark, editor-window styled code surface: mac-style traffic-light dots plus a\n * language label header over a scrollable monospace body so read-only code reads\n * like a real IDE panel rather than a flat block.\n */\nexport function CodePanel({\n  label,\n  children,\n  bodyClassName,\n}: {\n  label: string;\n  children: ReactNode;\n  bodyClassName?: string;\n}) {\n  return (\n    <div className=\"overflow-hidden rounded-xl border border-border-strong bg-bg-sunken shadow-sm\">\n      <div className=\"flex items-center justify-between gap-2 border-b border-border-seam bg-bg-canvas/40 px-4 py-2\">\n        <div className=\"flex items-center gap-1.5\">\n          <span className=\"h-2.5 w-2.5 rounded-full bg-status-error-border\" />\n          <span className=\"h-2.5 w-2.5 rounded-full bg-status-warning-border\" />\n          <span className=\"h-2.5 w-2.5 rounded-full bg-status-success-border\" />\n        </div>\n        <span className=\"inline-flex items-center gap-1.5 font-mono text-xs text-text-secondary\">\n          <Code2 size={13} /> {label}\n        </span>\n      </div>\n      <pre\n        className={cn(\n          'overflow-auto p-4 font-mono text-xs leading-relaxed text-text-primary',\n          bodyClassName\n        )}\n      >\n        {children}\n      </pre>\n    </div>\n  );\n}\n\n/** One labelled monospace input/output block inside a test-case result. */\nexport function IoBlock({ label, value }: { label: string; value?: string | null }) {\n  return (\n    <div className=\"min-w-0\">\n      <p className=\"mb-1 text-xs font-medium uppercase tracking-wide text-text-muted\">{label}</p>\n      <pre className=\"overflow-auto rounded-lg bg-bg-sunken px-3 py-2 font-mono text-xs leading-relaxed text-text-primary\">\n        {value?.length ? value : '—'}\n      </pre>\n    </div>\n  );\n}\n\n/** Icon + tone for a per-test-case status, using semantic tokens only. */\nfunction testCaseStatusTone(status: TecTestCaseStatus): { icon: ReactNode; className: string } {\n  if (status === 'PASSED') {\n    return { icon: <CheckCircle2 size={14} />, className: 'text-status-success-fg' };\n  }\n  if (status === 'SKIPPED') {\n    return { icon: <MinusCircle size={14} />, className: 'text-text-muted' };\n  }\n  return { icon: <XCircle size={14} />, className: 'text-status-error-fg' };\n}\n\n/**\n * Per-test-case grading detail for a graded submission — shared by the learner's\n * problem page and the authoring console's grading panel.\n *\n * The backend redacts HIDDEN fixtures before persisting results, so a hidden\n * row here only ever carries its name and status — never the input, the\n * expected output, or what the submitted program actually printed.\n */\nexport function TestResultsPanel({\n  submission,\n  actualOutputLabel = 'Your output',\n}: {\n  submission: TecSubmission;\n  actualOutputLabel?: string;\n}) {\n  const results = submission.testResults ?? [];\n  if (results.length === 0) return null;\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1\">\n        <StatusBadge status={submission.verdict} />\n        <span className=\"text-sm text-text-secondary\">\n          Passed {submission.passedCount} of {submission.totalCount} test cases\n        </span>\n        <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n          <Clock size={12} /> {submission.runtimeMs} ms\n        </span>\n      </div>\n\n      <div className=\"divide-y divide-border-seam overflow-hidden rounded-xl border border-border-seam\">\n        {results.map((result) => {\n          const tone = testCaseStatusTone(result.status);\n          return (\n            <div key={result.testCaseId} className=\"space-y-2 bg-bg-surface px-4 py-3\">\n              <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1\">\n                <span\n                  className={cn(\n                    'inline-flex items-center gap-1.5 text-sm font-medium',\n                    tone.className\n                  )}\n                >\n                  {tone.icon} {result.name}\n                </span>\n                <Badge variant=\"outline\">{humanizeEnum(result.status)}</Badge>\n                {result.visibility === 'HIDDEN' ? (\n                  <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n                    <EyeOff size={12} /> hidden test\n                  </span>\n                ) : null}\n                <span className=\"ml-auto text-xs text-text-muted\">{result.durationMs} ms</span>\n              </div>\n\n              {result.visibility === 'PUBLIC' && result.status !== 'SKIPPED' ? (\n                <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-3\">\n                  <IoBlock label=\"Input\" value={result.input} />\n                  <IoBlock label=\"Expected\" value={result.expectedOutput} />\n                  <IoBlock label={actualOutputLabel} value={result.actualOutput} />\n                </div>\n              ) : null}\n            </div>\n          );\n        })}\n      </div>\n\n      {submission.stderr ? (\n        <CodePanel label=\"stderr\" bodyClassName=\"max-h-48\">\n          {submission.stderr}\n        </CodePanel>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SubmissionViews.js","names":[],"sources":["../../../src/technospam/components/SubmissionViews.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { CheckCircle2, Clock, Code2, EyeOff, MinusCircle, XCircle } from 'lucide-react';\nimport { Badge } from '@burdenoff/fe-libs/ui';\nimport { StatusBadge } from './StatusBadge';\nimport { humanizeEnum } from '../utils/format';\nimport { cn } from '../utils/cn';\nimport type { TecSubmission, TecTestCaseStatus } from '../api/technospamApi';\n\n/** The grading fields the panel renders — a graded submission or a sample run. */\nexport type GradedResult = Pick<\n  TecSubmission,\n  'verdict' | 'passedCount' | 'totalCount' | 'runtimeMs' | 'stderr' | 'testResults'\n>;\n\n/**\n * A dark, editor-window styled code surface: mac-style traffic-light dots plus a\n * language label header over a scrollable monospace body so read-only code reads\n * like a real IDE panel rather than a flat block.\n */\nexport function CodePanel({\n  label,\n  children,\n  bodyClassName,\n}: {\n  label: string;\n  children: ReactNode;\n  bodyClassName?: string;\n}) {\n  return (\n    <div className=\"overflow-hidden rounded-xl border border-border-strong bg-bg-sunken shadow-sm\">\n      <div className=\"flex items-center justify-between gap-2 border-b border-border-seam bg-bg-canvas/40 px-4 py-2\">\n        <div className=\"flex items-center gap-1.5\">\n          <span className=\"h-2.5 w-2.5 rounded-full bg-status-error-border\" />\n          <span className=\"h-2.5 w-2.5 rounded-full bg-status-warning-border\" />\n          <span className=\"h-2.5 w-2.5 rounded-full bg-status-success-border\" />\n        </div>\n        <span className=\"inline-flex items-center gap-1.5 font-mono text-xs text-text-secondary\">\n          <Code2 size={13} /> {label}\n        </span>\n      </div>\n      <pre\n        className={cn(\n          'overflow-auto p-4 font-mono text-xs leading-relaxed text-text-primary',\n          bodyClassName\n        )}\n      >\n        {children}\n      </pre>\n    </div>\n  );\n}\n\n/** One labelled monospace input/output block inside a test-case result. */\nexport function IoBlock({ label, value }: { label: string; value?: string | null }) {\n  return (\n    <div className=\"min-w-0\">\n      <p className=\"mb-1 text-xs font-medium uppercase tracking-wide text-text-muted\">{label}</p>\n      <pre className=\"overflow-auto rounded-lg bg-bg-sunken px-3 py-2 font-mono text-xs leading-relaxed text-text-primary\">\n        {value?.length ? value : '—'}\n      </pre>\n    </div>\n  );\n}\n\n/** Icon + tone for a per-test-case status, using semantic tokens only. */\nfunction testCaseStatusTone(status: TecTestCaseStatus): { icon: ReactNode; className: string } {\n  if (status === 'PASSED') {\n    return { icon: <CheckCircle2 size={14} />, className: 'text-status-success-fg' };\n  }\n  if (status === 'SKIPPED') {\n    return { icon: <MinusCircle size={14} />, className: 'text-text-muted' };\n  }\n  return { icon: <XCircle size={14} />, className: 'text-status-error-fg' };\n}\n\n/**\n * Per-test-case grading detail for a graded submission — shared by the learner's\n * problem page and the authoring console's grading panel.\n *\n * The backend redacts HIDDEN fixtures before persisting results, so a hidden\n * row here only ever carries its name and status — never the input, the\n * expected output, or what the submitted program actually printed.\n */\nexport function TestResultsPanel({\n  submission,\n  actualOutputLabel = 'Your output',\n  caseNoun = 'test cases',\n}: {\n  submission: GradedResult;\n  actualOutputLabel?: string;\n  /** What the cases are called in the summary line, e.g. \"sample test cases\". */\n  caseNoun?: string;\n}) {\n  const results = submission.testResults ?? [];\n  if (results.length === 0) return null;\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1\">\n        <StatusBadge status={submission.verdict} />\n        <span className=\"text-sm text-text-secondary\">\n          Passed {submission.passedCount} of {submission.totalCount} {caseNoun}\n        </span>\n        <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n          <Clock size={12} /> {submission.runtimeMs} ms\n        </span>\n      </div>\n\n      <div className=\"divide-y divide-border-seam overflow-hidden rounded-xl border border-border-seam\">\n        {results.map((result) => {\n          const tone = testCaseStatusTone(result.status);\n          return (\n            <div key={result.testCaseId} className=\"space-y-2 bg-bg-surface px-4 py-3\">\n              <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1\">\n                <span\n                  className={cn(\n                    'inline-flex items-center gap-1.5 text-sm font-medium',\n                    tone.className\n                  )}\n                >\n                  {tone.icon} {result.name}\n                </span>\n                <Badge variant=\"outline\">{humanizeEnum(result.status)}</Badge>\n                {result.visibility === 'HIDDEN' ? (\n                  <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n                    <EyeOff size={12} /> hidden test\n                  </span>\n                ) : null}\n                <span className=\"ml-auto text-xs text-text-muted\">{result.durationMs} ms</span>\n              </div>\n\n              {result.visibility === 'PUBLIC' && result.status !== 'SKIPPED' ? (\n                <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-3\">\n                  <IoBlock label=\"Input\" value={result.input} />\n                  <IoBlock label=\"Expected\" value={result.expectedOutput} />\n                  <IoBlock label={actualOutputLabel} value={result.actualOutput} />\n                </div>\n              ) : null}\n            </div>\n          );\n        })}\n      </div>\n\n      {submission.stderr ? (\n        <CodePanel label=\"stderr\" bodyClassName=\"max-h-48\">\n          {submission.stderr}\n        </CodePanel>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/technospam/components/TechnoSpamErrorBoundary.d.ts

@@ -3,6 +3,12 @@ import { Component, ReactNode } from 'react';
 interface Props {
     children: ReactNode;
     title?: string;
+    /**
+     * Rendered instead of the default error view when a child throws. Used for
+     * small, recoverable regions (for example a lazily loaded editor chunk that
+     * failed to download) where a working fallback beats a page-level error.
+     */
+    fallback?: ReactNode;
 }
 interface State {
     hasError: boolean;

package/dist/technospam/components/TechnoSpamErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TechnoSpamErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/technospam/components/TechnoSpamErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlD,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,qBAAa,uBAAwB,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBACtD,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK;IAIpD,MAAM,IAAI,SAAS;CAapB"}
+{"version":3,"file":"TechnoSpamErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/technospam/components/TechnoSpamErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlD,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,qBAAa,uBAAwB,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBACtD,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK;IAIpD,MAAM,IAAI,SAAS;CAcpB"}

package/dist/technospam/components/TechnoSpamErrorBoundary.js

@@ -16,13 +16,13 @@ var r = class extends t {
 		};
 	}
 	render() {
-		return this.state.hasError ? /* @__PURE__ */ n("div", {
+		return this.state.hasError ? this.props.fallback === void 0 ? /* @__PURE__ */ n("div", {
 			className: "flex h-full min-h-[50vh] items-center justify-center p-6",
 			children: /* @__PURE__ */ n(e, {
 				title: this.props.title ?? "Couldn't load this page",
 				error: this.state.error ?? void 0
 			})
-		}) : this.props.children;
+		}) : this.props.fallback : this.props.children;
 	}
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"TechnoSpamErrorBoundary.js","names":[],"sources":["../../../src/technospam/components/TechnoSpamErrorBoundary.tsx"],"sourcesContent":["import { Component, type ReactNode } from 'react';\nimport { ErrorView } from './StateViews';\n\ninterface Props {\n  children: ReactNode;\n  title?: string;\n}\n\ninterface State {\n  hasError: boolean;\n  error: Error | null;\n}\n\n/**\n * Per-route error boundary for the TechnoSpam MFE.\n *\n * Catches render errors inside TechnoSpam pages (e.g. a GraphQL response with\n * an unexpectedly null connection field) and renders an explicit error state\n * inside the module chrome instead of letting the error bubble to the root\n * boundary or leaving the content area blank.\n */\nexport class TechnoSpamErrorBoundary extends Component<Props, State> {\n  constructor(props: Props) {\n    super(props);\n    this.state = { hasError: false, error: null };\n  }\n\n  static getDerivedStateFromError(error: Error): State {\n    return { hasError: true, error };\n  }\n\n  render(): ReactNode {\n    if (this.state.hasError) {\n      return (\n        <div className=\"flex h-full min-h-[50vh] items-center justify-center p-6\">\n          <ErrorView\n            title={this.props.title ?? \"Couldn't load this page\"}\n            error={this.state.error ?? undefined}\n          />\n        </div>\n      );\n    }\n    return this.props.children;\n  }\n}\n"],"mappings":";;;;AAqBA,IAAa,IAAb,cAA6C,EAAwB;CACnE,YAAY,GAAc;AAExB,EADA,MAAM,EAAM,EACZ,KAAK,QAAQ;GAAE,UAAU;GAAO,OAAO;GAAM;;CAG/C,OAAO,yBAAyB,GAAqB;AACnD,SAAO;GAAE,UAAU;GAAM;GAAO;;CAGlC,SAAoB;AAWlB,SAVI,KAAK,MAAM,WAEX,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,OAAO,KAAK,MAAM,SAAS;IAC3B,OAAO,KAAK,MAAM,SAAS,KAAA;IAC3B,CAAA;GACE,CAAA,GAGH,KAAK,MAAM"}
+{"version":3,"file":"TechnoSpamErrorBoundary.js","names":[],"sources":["../../../src/technospam/components/TechnoSpamErrorBoundary.tsx"],"sourcesContent":["import { Component, type ReactNode } from 'react';\nimport { ErrorView } from './StateViews';\n\ninterface Props {\n  children: ReactNode;\n  title?: string;\n  /**\n   * Rendered instead of the default error view when a child throws. Used for\n   * small, recoverable regions (for example a lazily loaded editor chunk that\n   * failed to download) where a working fallback beats a page-level error.\n   */\n  fallback?: ReactNode;\n}\n\ninterface State {\n  hasError: boolean;\n  error: Error | null;\n}\n\n/**\n * Per-route error boundary for the TechnoSpam MFE.\n *\n * Catches render errors inside TechnoSpam pages (e.g. a GraphQL response with\n * an unexpectedly null connection field) and renders an explicit error state\n * inside the module chrome instead of letting the error bubble to the root\n * boundary or leaving the content area blank.\n */\nexport class TechnoSpamErrorBoundary extends Component<Props, State> {\n  constructor(props: Props) {\n    super(props);\n    this.state = { hasError: false, error: null };\n  }\n\n  static getDerivedStateFromError(error: Error): State {\n    return { hasError: true, error };\n  }\n\n  render(): ReactNode {\n    if (this.state.hasError) {\n      if (this.props.fallback !== undefined) return this.props.fallback;\n      return (\n        <div className=\"flex h-full min-h-[50vh] items-center justify-center p-6\">\n          <ErrorView\n            title={this.props.title ?? \"Couldn't load this page\"}\n            error={this.state.error ?? undefined}\n          />\n        </div>\n      );\n    }\n    return this.props.children;\n  }\n}\n"],"mappings":";;;;AA2BA,IAAa,IAAb,cAA6C,EAAwB;CACnE,YAAY,GAAc;AAExB,EADA,MAAM,EAAM,EACZ,KAAK,QAAQ;GAAE,UAAU;GAAO,OAAO;GAAM;;CAG/C,OAAO,yBAAyB,GAAqB;AACnD,SAAO;GAAE,UAAU;GAAM;GAAO;;CAGlC,SAAoB;AAYlB,SAXI,KAAK,MAAM,WACT,KAAK,MAAM,aAAa,KAAA,IAE1B,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,OAAO,KAAK,MAAM,SAAS;IAC3B,OAAO,KAAK,MAAM,SAAS,KAAA;IAC3B,CAAA;GACE,CAAA,GAPsC,KAAK,MAAM,WAUpD,KAAK,MAAM"}

package/dist/technospam/components/editor/CodeEditor.d.ts

@@ -0,0 +1,26 @@
+export interface CodeEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    /** Language slug, e.g. "python"; switches syntax highlighting in place. */
+    language: string;
+    /** Accessible name for the editing surface. */
+    ariaLabel: string;
+    placeholder?: string;
+    /** Mod-Enter (Ctrl/Cmd+Enter). */
+    onRun?: () => void;
+    /** Mod-Shift-Enter. */
+    onSubmit?: () => void;
+    className?: string;
+}
+/**
+ * A CodeMirror 6 code editor (BOFF-4078): line numbers, syntax highlighting
+ * for every grader language, bracket matching/closing, undo history and Tab
+ * indentation. Press Escape and then Tab to move focus out of the editor.
+ *
+ * The editor is created once per mount; `value` and `language` changes from
+ * the parent (switching language, resetting to the starter code) are applied
+ * as transactions so the learner's undo history and cursor survive.
+ */
+export declare function CodeEditor({ value, onChange, language, ariaLabel, placeholder, onRun, onSubmit, className, }: CodeEditorProps): import("react").JSX.Element;
+export default CodeEditor;
+//# sourceMappingURL=CodeEditor.d.ts.map

package/dist/technospam/components/editor/CodeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/technospam/components/editor/CodeEditor.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,eAAe,+BAkGjB;AAED,eAAe,UAAU,CAAC"}

package/dist/technospam/components/editor/CodeEditor.js

@@ -0,0 +1,102 @@
+import { cn as e } from "../../utils/cn.js";
+import { Compartment as t, EditorState as n, Prec as r } from "../../../node_modules/@codemirror/state/dist/index.js";
+import { EditorView as i, drawSelection as a, highlightActiveLine as o, highlightActiveLineGutter as s, keymap as c, lineNumbers as l, placeholder as u } from "../../../node_modules/@codemirror/view/dist/index.js";
+import { bracketMatching as d, indentOnInput as f, syntaxHighlighting as p } from "../../../node_modules/@codemirror/language/dist/index.js";
+import { defaultKeymap as m, history as h, historyKeymap as g, indentWithTab as _ } from "../../../node_modules/@codemirror/commands/dist/index.js";
+import { closeBrackets as v, closeBracketsKeymap as y } from "../../../node_modules/@codemirror/autocomplete/dist/index.js";
+import { languageExtension as b } from "./editorLanguages.js";
+import { technospamEditorTheme as x, technospamHighlightStyle as S } from "./editorTheme.js";
+import { useEffect as C, useLayoutEffect as w, useRef as T } from "react";
+import { jsx as E } from "react/jsx-runtime";
+//#region src/technospam/components/editor/CodeEditor.tsx
+function D({ value: D, onChange: O, language: k, ariaLabel: A, placeholder: j, onRun: M, onSubmit: N, className: P }) {
+	let F = T(null), I = T(null), L = T(new t()), R = T({
+		value: D,
+		language: k,
+		ariaLabel: A,
+		placeholder: j,
+		onChange: O,
+		onRun: M,
+		onSubmit: N
+	});
+	return w(() => {
+		R.current = {
+			value: D,
+			language: k,
+			ariaLabel: A,
+			placeholder: j,
+			onChange: O,
+			onRun: M,
+			onSubmit: N
+		};
+	}), C(() => {
+		let e = F.current;
+		if (!e) return;
+		let t = R.current, C = R, w = new i({
+			parent: e,
+			state: n.create({
+				doc: t.value,
+				extensions: [
+					l(),
+					s(),
+					h(),
+					a(),
+					f(),
+					d(),
+					v(),
+					o(),
+					n.tabSize.of(4),
+					p(S),
+					x,
+					L.current.of(b(t.language)),
+					t.placeholder ? u(t.placeholder) : [],
+					i.contentAttributes.of({
+						"aria-label": t.ariaLabel,
+						"aria-multiline": "true",
+						spellcheck: "false",
+						autocorrect: "off",
+						autocapitalize: "off"
+					}),
+					r.highest(c.of([{
+						key: "Mod-Enter",
+						run: () => (C.current.onRun?.(), !!C.current.onRun)
+					}, {
+						key: "Mod-Shift-Enter",
+						run: () => (C.current.onSubmit?.(), !!C.current.onSubmit)
+					}])),
+					c.of([
+						...y,
+						...m,
+						...g,
+						_
+					]),
+					i.updateListener.of((e) => {
+						e.docChanged && C.current.onChange(e.state.doc.toString());
+					})
+				]
+			})
+		});
+		return I.current = w, () => {
+			w.destroy(), I.current = null;
+		};
+	}, []), C(() => {
+		let e = I.current;
+		if (!e) return;
+		let t = e.state.doc.toString();
+		t !== D && e.dispatch({ changes: {
+			from: 0,
+			to: t.length,
+			insert: D
+		} });
+	}, [D]), C(() => {
+		I.current?.dispatch({ effects: L.current.reconfigure(b(k)) });
+	}, [k]), /* @__PURE__ */ E("div", {
+		ref: F,
+		"data-testid": "code-editor",
+		className: e("font-mono [&_.cm-editor]:h-full [&_.cm-scroller]:overflow-auto", P)
+	});
+}
+//#endregion
+export { D as CodeEditor, D as default };
+
+//# sourceMappingURL=CodeEditor.js.map

package/dist/technospam/components/editor/CodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","names":[],"sources":["../../../../src/technospam/components/editor/CodeEditor.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react';\nimport { Compartment, EditorState, Prec } from '@codemirror/state';\nimport {\n  EditorView,\n  drawSelection,\n  highlightActiveLine,\n  highlightActiveLineGutter,\n  keymap,\n  lineNumbers,\n  placeholder as placeholderExtension,\n} from '@codemirror/view';\nimport { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';\nimport { bracketMatching, indentOnInput, syntaxHighlighting } from '@codemirror/language';\nimport { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';\nimport { languageExtension } from './editorLanguages';\nimport { technospamEditorTheme, technospamHighlightStyle } from './editorTheme';\nimport { cn } from '../../utils/cn';\n\nexport interface CodeEditorProps {\n  value: string;\n  onChange: (value: string) => void;\n  /** Language slug, e.g. \"python\"; switches syntax highlighting in place. */\n  language: string;\n  /** Accessible name for the editing surface. */\n  ariaLabel: string;\n  placeholder?: string;\n  /** Mod-Enter (Ctrl/Cmd+Enter). */\n  onRun?: () => void;\n  /** Mod-Shift-Enter. */\n  onSubmit?: () => void;\n  className?: string;\n}\n\n/**\n * A CodeMirror 6 code editor (BOFF-4078): line numbers, syntax highlighting\n * for every grader language, bracket matching/closing, undo history and Tab\n * indentation. Press Escape and then Tab to move focus out of the editor.\n *\n * The editor is created once per mount; `value` and `language` changes from\n * the parent (switching language, resetting to the starter code) are applied\n * as transactions so the learner's undo history and cursor survive.\n */\nexport function CodeEditor({\n  value,\n  onChange,\n  language,\n  ariaLabel,\n  placeholder,\n  onRun,\n  onSubmit,\n  className,\n}: CodeEditorProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const viewRef = useRef<EditorView | null>(null);\n  const languageCompartment = useRef(new Compartment());\n  // Latest props, read by the editor's long-lived listeners and by the\n  // one-time setup below (refs are written after render, never during it).\n  const latest = useRef({ value, language, ariaLabel, placeholder, onChange, onRun, onSubmit });\n  useLayoutEffect(() => {\n    latest.current = { value, language, ariaLabel, placeholder, onChange, onRun, onSubmit };\n  });\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return undefined;\n    const initial = latest.current;\n    const callbacks = latest;\n    const view = new EditorView({\n      parent: host,\n      state: EditorState.create({\n        doc: initial.value,\n        extensions: [\n          lineNumbers(),\n          highlightActiveLineGutter(),\n          history(),\n          drawSelection(),\n          indentOnInput(),\n          bracketMatching(),\n          closeBrackets(),\n          highlightActiveLine(),\n          EditorState.tabSize.of(4),\n          syntaxHighlighting(technospamHighlightStyle),\n          technospamEditorTheme,\n          languageCompartment.current.of(languageExtension(initial.language)),\n          initial.placeholder ? placeholderExtension(initial.placeholder) : [],\n          EditorView.contentAttributes.of({\n            'aria-label': initial.ariaLabel,\n            'aria-multiline': 'true',\n            spellcheck: 'false',\n            autocorrect: 'off',\n            autocapitalize: 'off',\n          }),\n          Prec.highest(\n            keymap.of([\n              {\n                key: 'Mod-Enter',\n                run: () => {\n                  callbacks.current.onRun?.();\n                  return Boolean(callbacks.current.onRun);\n                },\n              },\n              {\n                key: 'Mod-Shift-Enter',\n                run: () => {\n                  callbacks.current.onSubmit?.();\n                  return Boolean(callbacks.current.onSubmit);\n                },\n              },\n            ])\n          ),\n          keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...historyKeymap, indentWithTab]),\n          EditorView.updateListener.of((update) => {\n            if (update.docChanged) callbacks.current.onChange(update.state.doc.toString());\n          }),\n        ],\n      }),\n    });\n    viewRef.current = view;\n    return () => {\n      view.destroy();\n      viewRef.current = null;\n    };\n    // Built once per mount on purpose: later `value`/`language` changes are\n    // applied by the effects below as transactions, and the callbacks are read\n    // through `latest.current`, so rebuilding would only lose undo history.\n  }, []);\n\n  useEffect(() => {\n    const view = viewRef.current;\n    if (!view) return;\n    const current = view.state.doc.toString();\n    if (current !== value) {\n      view.dispatch({ changes: { from: 0, to: current.length, insert: value } });\n    }\n  }, [value]);\n\n  useEffect(() => {\n    viewRef.current?.dispatch({\n      effects: languageCompartment.current.reconfigure(languageExtension(language)),\n    });\n  }, [language]);\n\n  return (\n    <div\n      ref={hostRef}\n      data-testid=\"code-editor\"\n      className={cn('font-mono [&_.cm-editor]:h-full [&_.cm-scroller]:overflow-auto', className)}\n    />\n  );\n}\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;AA0CA,SAAgB,EAAW,EACzB,UACA,aACA,aACA,cACA,aAAA,GACA,UACA,aACA,gBACkB;CAClB,IAAM,IAAU,EAA8B,KAAK,EAC7C,IAAU,EAA0B,KAAK,EACzC,IAAsB,EAAO,IAAI,GAAa,CAAC,EAG/C,IAAS,EAAO;EAAE;EAAO;EAAU;EAAW,aAAA;EAAa;EAAU;EAAO;EAAU,CAAC;AAqF7F,QApFA,QAAsB;AACpB,IAAO,UAAU;GAAE;GAAO;GAAU;GAAW,aAAA;GAAa;GAAU;GAAO;GAAU;GACvF,EAEF,QAAgB;EACd,IAAM,IAAO,EAAQ;AACrB,MAAI,CAAC,EAAM;EACX,IAAM,IAAU,EAAO,SACjB,IAAY,GACZ,IAAO,IAAI,EAAW;GAC1B,QAAQ;GACR,OAAO,EAAY,OAAO;IACxB,KAAK,EAAQ;IACb,YAAY;KACV,GAAa;KACb,GAA2B;KAC3B,GAAS;KACT,GAAe;KACf,GAAe;KACf,GAAiB;KACjB,GAAe;KACf,GAAqB;KACrB,EAAY,QAAQ,GAAG,EAAE;KACzB,EAAmB,EAAyB;KAC5C;KACA,EAAoB,QAAQ,GAAG,EAAkB,EAAQ,SAAS,CAAC;KACnE,EAAQ,cAAc,EAAqB,EAAQ,YAAY,GAAG,EAAE;KACpE,EAAW,kBAAkB,GAAG;MAC9B,cAAc,EAAQ;MACtB,kBAAkB;MAClB,YAAY;MACZ,aAAa;MACb,gBAAgB;MACjB,CAAC;KACF,EAAK,QACH,EAAO,GAAG,CACR;MACE,KAAK;MACL,YACE,EAAU,QAAQ,SAAS,EACpB,EAAQ,EAAU,QAAQ;MAEpC,EACD;MACE,KAAK;MACL,YACE,EAAU,QAAQ,YAAY,EACvB,EAAQ,EAAU,QAAQ;MAEpC,CACF,CAAC,CACH;KACD,EAAO,GAAG;MAAC,GAAG;MAAqB,GAAG;MAAe,GAAG;MAAe;MAAc,CAAC;KACtF,EAAW,eAAe,IAAI,MAAW;AACvC,MAAI,EAAO,cAAY,EAAU,QAAQ,SAAS,EAAO,MAAM,IAAI,UAAU,CAAC;OAC9E;KACH;IACF,CAAC;GACH,CAAC;AAEF,SADA,EAAQ,UAAU,SACL;AAEX,GADA,EAAK,SAAS,EACd,EAAQ,UAAU;;IAKnB,EAAE,CAAC,EAEN,QAAgB;EACd,IAAM,IAAO,EAAQ;AACrB,MAAI,CAAC,EAAM;EACX,IAAM,IAAU,EAAK,MAAM,IAAI,UAAU;AACzC,EAAI,MAAY,KACd,EAAK,SAAS,EAAE,SAAS;GAAE,MAAM;GAAG,IAAI,EAAQ;GAAQ,QAAQ;GAAO,EAAE,CAAC;IAE3E,CAAC,EAAM,CAAC,EAEX,QAAgB;AACd,IAAQ,SAAS,SAAS,EACxB,SAAS,EAAoB,QAAQ,YAAY,EAAkB,EAAS,CAAC,EAC9E,CAAC;IACD,CAAC,EAAS,CAAC,EAGZ,kBAAC,OAAD;EACE,KAAK;EACL,eAAY;EACZ,WAAW,EAAG,kEAAkE,EAAU;EAC1F,CAAA"}

package/dist/technospam/components/editor/RunOutputPanel.d.ts

@@ -0,0 +1,14 @@
+import { TecSolutionRun } from '../../api/technospamApi';
+
+/**
+ * Output of the editor's Run button (BOFF-4078): a warm-up notice while the
+ * sandbox starts, the per-sample-case verdicts, or the raw stdout/stderr of a
+ * custom-input run.
+ */
+export declare function RunOutputPanel({ run, running, warming, error, }: {
+    run: TecSolutionRun | null;
+    running: boolean;
+    warming: boolean;
+    error: string | null;
+}): import("react").JSX.Element;
+//# sourceMappingURL=RunOutputPanel.d.ts.map

package/dist/technospam/components/editor/RunOutputPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunOutputPanel.d.ts","sourceRoot":"","sources":["../../../../src/technospam/components/editor/RunOutputPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAwB,MAAM,yBAAyB,CAAC;AAWpF;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,OAAO,EACP,OAAO,EACP,KAAK,GACN,EAAE;IACD,GAAG,EAAE,cAAc,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,+BA0FA"}

package/dist/technospam/components/editor/RunOutputPanel.js

@@ -0,0 +1,127 @@
+import { cn as e } from "../../utils/cn.js";
+import { CodePanel as t, IoBlock as n, TestResultsPanel as r } from "../SubmissionViews.js";
+import { AlertTriangle as i, Clock as a, Loader2 as o, Terminal as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/technospam/components/editor/RunOutputPanel.tsx
+function u(e) {
+	return e.compileFailed ? {
+		ok: !1,
+		text: "Compile error"
+	} : e.timedOut ? {
+		ok: !1,
+		text: "Time limit exceeded"
+	} : e.memoryLimitExceeded ? {
+		ok: !1,
+		text: "Memory limit exceeded"
+	} : e.exitCode === 0 ? {
+		ok: !0,
+		text: "Ran successfully"
+	} : {
+		ok: !1,
+		text: `Exited with code ${e.exitCode}`
+	};
+}
+function d({ run: d, running: f, warming: p, error: m }) {
+	if (p) return /* @__PURE__ */ l("p", {
+		role: "status",
+		className: "inline-flex items-center gap-2 text-sm text-text-secondary",
+		"data-testid": "run-warming",
+		children: [/* @__PURE__ */ c(o, {
+			size: 14,
+			className: "animate-spin"
+		}), "Starting the code sandbox — your run will start automatically in a moment."]
+	});
+	if (f && !d) return /* @__PURE__ */ l("p", {
+		role: "status",
+		className: "inline-flex items-center gap-2 text-sm text-text-secondary",
+		children: [/* @__PURE__ */ c(o, {
+			size: 14,
+			className: "animate-spin"
+		}), " Running your code…"]
+	});
+	if (m) return /* @__PURE__ */ l("p", {
+		role: "alert",
+		className: "inline-flex items-start gap-2 text-sm text-status-error-text",
+		"data-testid": "run-error",
+		children: [
+			/* @__PURE__ */ c(i, {
+				size: 14,
+				className: "mt-0.5 shrink-0"
+			}),
+			" ",
+			m
+		]
+	});
+	if (!d) return /* @__PURE__ */ c("p", {
+		className: "text-sm text-text-muted",
+		children: "Run your code against the sample test cases (or your own input) before you submit. Runs are not recorded and do not affect your score."
+	});
+	if (d.status !== "COMPLETED") return /* @__PURE__ */ l("p", {
+		role: "alert",
+		className: "inline-flex items-start gap-2 text-sm text-status-warning-text",
+		children: [/* @__PURE__ */ c(i, {
+			size: 14,
+			className: "mt-0.5 shrink-0"
+		}), "The code sandbox is not available right now. Please try again shortly."]
+	});
+	if (d.customOutput) {
+		let r = d.customOutput, i = u(r);
+		return /* @__PURE__ */ l("div", {
+			className: "space-y-3",
+			"data-testid": "run-custom-output",
+			children: [
+				/* @__PURE__ */ l("div", {
+					className: "flex flex-wrap items-center gap-x-3 gap-y-1",
+					children: [/* @__PURE__ */ l("span", {
+						className: e("inline-flex items-center gap-1.5 text-sm font-medium", i.ok ? "text-status-success-text" : "text-status-error-text"),
+						children: [
+							/* @__PURE__ */ c(s, { size: 14 }),
+							" ",
+							i.text
+						]
+					}), /* @__PURE__ */ l("span", {
+						className: "inline-flex items-center gap-1 text-xs text-text-muted",
+						children: [
+							/* @__PURE__ */ c(a, { size: 12 }),
+							" ",
+							r.durationMs,
+							" ms"
+						]
+					})]
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "grid grid-cols-1 gap-2 sm:grid-cols-2",
+					children: [/* @__PURE__ */ c(n, {
+						label: "Input",
+						value: r.stdin
+					}), /* @__PURE__ */ c(n, {
+						label: "Output",
+						value: r.stdout
+					})]
+				}),
+				r.stderr ? /* @__PURE__ */ c(t, {
+					label: "stderr",
+					bodyClassName: "max-h-48",
+					children: r.stderr
+				}) : null
+			]
+		});
+	}
+	return d.verdict ? /* @__PURE__ */ c("div", {
+		"data-testid": "run-sample-results",
+		children: /* @__PURE__ */ c(r, {
+			submission: {
+				...d,
+				verdict: d.verdict
+			},
+			caseNoun: "sample test cases"
+		})
+	}) : /* @__PURE__ */ c("p", {
+		className: "text-sm text-text-muted",
+		children: "Nothing ran."
+	});
+}
+//#endregion
+export { d as RunOutputPanel };
+
+//# sourceMappingURL=RunOutputPanel.js.map

package/dist/technospam/components/editor/RunOutputPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunOutputPanel.js","names":[],"sources":["../../../../src/technospam/components/editor/RunOutputPanel.tsx"],"sourcesContent":["import { AlertTriangle, Clock, Loader2, Terminal } from 'lucide-react';\nimport { CodePanel, IoBlock, TestResultsPanel } from '../SubmissionViews';\nimport type { TecSolutionRun, TecSolutionRunOutput } from '../../api/technospamApi';\nimport { cn } from '../../utils/cn';\n\nfunction customRunSummary(output: TecSolutionRunOutput): { ok: boolean; text: string } {\n  if (output.compileFailed) return { ok: false, text: 'Compile error' };\n  if (output.timedOut) return { ok: false, text: 'Time limit exceeded' };\n  if (output.memoryLimitExceeded) return { ok: false, text: 'Memory limit exceeded' };\n  if (output.exitCode !== 0) return { ok: false, text: `Exited with code ${output.exitCode}` };\n  return { ok: true, text: 'Ran successfully' };\n}\n\n/**\n * Output of the editor's Run button (BOFF-4078): a warm-up notice while the\n * sandbox starts, the per-sample-case verdicts, or the raw stdout/stderr of a\n * custom-input run.\n */\nexport function RunOutputPanel({\n  run,\n  running,\n  warming,\n  error,\n}: {\n  run: TecSolutionRun | null;\n  running: boolean;\n  warming: boolean;\n  error: string | null;\n}) {\n  if (warming) {\n    return (\n      <p\n        role=\"status\"\n        className=\"inline-flex items-center gap-2 text-sm text-text-secondary\"\n        data-testid=\"run-warming\"\n      >\n        <Loader2 size={14} className=\"animate-spin\" />\n        Starting the code sandbox — your run will start automatically in a moment.\n      </p>\n    );\n  }\n  if (running && !run) {\n    return (\n      <p role=\"status\" className=\"inline-flex items-center gap-2 text-sm text-text-secondary\">\n        <Loader2 size={14} className=\"animate-spin\" /> Running your code…\n      </p>\n    );\n  }\n  if (error) {\n    return (\n      <p\n        role=\"alert\"\n        className=\"inline-flex items-start gap-2 text-sm text-status-error-text\"\n        data-testid=\"run-error\"\n      >\n        <AlertTriangle size={14} className=\"mt-0.5 shrink-0\" /> {error}\n      </p>\n    );\n  }\n  if (!run) {\n    return (\n      <p className=\"text-sm text-text-muted\">\n        Run your code against the sample test cases (or your own input) before you submit. Runs are\n        not recorded and do not affect your score.\n      </p>\n    );\n  }\n  if (run.status !== 'COMPLETED') {\n    return (\n      <p role=\"alert\" className=\"inline-flex items-start gap-2 text-sm text-status-warning-text\">\n        <AlertTriangle size={14} className=\"mt-0.5 shrink-0\" />\n        The code sandbox is not available right now. Please try again shortly.\n      </p>\n    );\n  }\n\n  if (run.customOutput) {\n    const output = run.customOutput;\n    const summary = customRunSummary(output);\n    return (\n      <div className=\"space-y-3\" data-testid=\"run-custom-output\">\n        <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1\">\n          <span\n            className={cn(\n              'inline-flex items-center gap-1.5 text-sm font-medium',\n              summary.ok ? 'text-status-success-text' : 'text-status-error-text'\n            )}\n          >\n            <Terminal size={14} /> {summary.text}\n          </span>\n          <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n            <Clock size={12} /> {output.durationMs} ms\n          </span>\n        </div>\n        <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-2\">\n          <IoBlock label=\"Input\" value={output.stdin} />\n          <IoBlock label=\"Output\" value={output.stdout} />\n        </div>\n        {output.stderr ? (\n          <CodePanel label=\"stderr\" bodyClassName=\"max-h-48\">\n            {output.stderr}\n          </CodePanel>\n        ) : null}\n      </div>\n    );\n  }\n\n  if (run.verdict) {\n    return (\n      <div data-testid=\"run-sample-results\">\n        <TestResultsPanel\n          submission={{ ...run, verdict: run.verdict }}\n          caseNoun=\"sample test cases\"\n        />\n      </div>\n    );\n  }\n  return <p className=\"text-sm text-text-muted\">Nothing ran.</p>;\n}\n"],"mappings":";;;;;AAKA,SAAS,EAAiB,GAA6D;AAKrF,QAJI,EAAO,gBAAsB;EAAE,IAAI;EAAO,MAAM;EAAiB,GACjE,EAAO,WAAiB;EAAE,IAAI;EAAO,MAAM;EAAuB,GAClE,EAAO,sBAA4B;EAAE,IAAI;EAAO,MAAM;EAAyB,GAC/E,EAAO,aAAa,IACjB;EAAE,IAAI;EAAM,MAAM;EAAoB,GADX;EAAE,IAAI;EAAO,MAAM,oBAAoB,EAAO;EAAY;;AAS9F,SAAgB,EAAe,EAC7B,QACA,YACA,YACA,YAMC;AACD,KAAI,EACF,QACE,kBAAC,KAAD;EACE,MAAK;EACL,WAAU;EACV,eAAY;YAHd,CAKE,kBAAC,GAAD;GAAS,MAAM;GAAI,WAAU;GAAiB,CAAA,EAAA,6EAE5C;;AAGR,KAAI,KAAW,CAAC,EACd,QACE,kBAAC,KAAD;EAAG,MAAK;EAAS,WAAU;YAA3B,CACE,kBAAC,GAAD;GAAS,MAAM;GAAI,WAAU;GAAiB,CAAA,EAAA,sBAC5C;;AAGR,KAAI,EACF,QACE,kBAAC,KAAD;EACE,MAAK;EACL,WAAU;EACV,eAAY;YAHd;GAKE,kBAAC,GAAD;IAAe,MAAM;IAAI,WAAU;IAAoB,CAAA;;GAAE;GACvD;;AAGR,KAAI,CAAC,EACH,QACE,kBAAC,KAAD;EAAG,WAAU;YAA0B;EAGnC,CAAA;AAGR,KAAI,EAAI,WAAW,YACjB,QACE,kBAAC,KAAD;EAAG,MAAK;EAAQ,WAAU;YAA1B,CACE,kBAAC,GAAD;GAAe,MAAM;GAAI,WAAU;GAAoB,CAAA,EAAA,yEAErD;;AAIR,KAAI,EAAI,cAAc;EACpB,IAAM,IAAS,EAAI,cACb,IAAU,EAAiB,EAAO;AACxC,SACE,kBAAC,OAAD;GAAK,WAAU;GAAY,eAAY;aAAvC;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MACE,WAAW,EACT,wDACA,EAAQ,KAAK,6BAA6B,yBAC3C;gBAJH;OAME,kBAAC,GAAD,EAAU,MAAM,IAAM,CAAA;;OAAE,EAAQ;OAC3B;SACP,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA;;OAAE,EAAO;OAAW;OAClC;QACH;;IACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAS,OAAM;MAAQ,OAAO,EAAO;MAAS,CAAA,EAC9C,kBAAC,GAAD;MAAS,OAAM;MAAS,OAAO,EAAO;MAAU,CAAA,CAC5C;;IACL,EAAO,SACN,kBAAC,GAAD;KAAW,OAAM;KAAS,eAAc;eACrC,EAAO;KACE,CAAA,GACV;IACA;;;AAcV,QAVI,EAAI,UAEJ,kBAAC,OAAD;EAAK,eAAY;YACf,kBAAC,GAAD;GACE,YAAY;IAAE,GAAG;IAAK,SAAS,EAAI;IAAS;GAC5C,UAAS;GACT,CAAA;EACE,CAAA,GAGH,kBAAC,KAAD;EAAG,WAAU;YAA0B;EAAgB,CAAA"}

package/dist/technospam/components/editor/editorLanguages.d.ts

@@ -0,0 +1,11 @@
+import { Extension } from '@codemirror/state';
+
+/**
+ * Syntax support for every language slug the grading sandbox runs
+ * (wspace-technospam-svc `SUPPORTED_LANGUAGES`). Unknown slugs get plain-text
+ * editing — line numbers, brackets and history still work.
+ */
+export declare function languageExtension(language: string): Extension;
+/** Whether `languageExtension` highlights this slug (used by tests and the editor label). */
+export declare function hasSyntaxSupport(language: string): boolean;
+//# sourceMappingURL=editorLanguages.d.ts.map

package/dist/technospam/components/editor/editorLanguages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorLanguages.d.ts","sourceRoot":"","sources":["../../../../src/technospam/components/editor/editorLanguages.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAQnD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAyB7D;AAED,6FAA6F;AAC7F,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAG1D"}