Publish curated MobilityOps source snapshot

frontend/src/components/ArchitectureFlow.tsx

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Icon, type IconName } from "./Icons";
+import "../styles-architecture-flow.css";
+
+type ArchitectureStepId = "Frontend" | "Api" | "Database" | "Outbox" | "External";
+type ArchitectureZone = "intent" | "transaction" | "edge";
+
+const ARCHITECTURE_STEPS: Array<{
+  id: ArchitectureStepId;
+  icon: IconName;
+  zone: ArchitectureZone;
+}> = [
+  { id: "Frontend", icon: "user", zone: "intent" },
+  { id: "Api", icon: "shield", zone: "transaction" },
+  { id: "Database", icon: "audit", zone: "transaction" },
+  { id: "Outbox", icon: "activity", zone: "transaction" },
+  { id: "External", icon: "integrations", zone: "edge" },
+];
+
+const ZONE_TRANSLATION_KEYS: Record<ArchitectureZone, string> = {
+  intent: "architectureZoneIntent",
+  transaction: "architectureZoneTransaction",
+  edge: "architectureZoneEdge",
+};
+
+export function ArchitectureFlow() {
+  const { t } = useTranslation("demo");
+  const [activeStepId, setActiveStepId] = useState<ArchitectureStepId>("Database");
+  const activeIndex = ARCHITECTURE_STEPS.findIndex((step) => step.id === activeStepId);
+  const activeStep = ARCHITECTURE_STEPS[activeIndex];
+
+  return (
+    <div className="architecture-explorer">
+      <div className="architecture-zones" aria-label={t("about.architectureZonesLabel")}>
+        <span className="zone-intent"><Icon name="user" /> {t("about.architectureZoneIntent")}</span>
+        <span className="zone-transaction"><Icon name="shield" /> {t("about.architectureZoneTransaction")}</span>
+        <span className="zone-edge"><Icon name="integrations" /> {t("about.architectureZoneEdge")}</span>
+      </div>
+
+      <ol className="architecture-flow" aria-label={t("about.architectureFlowLabel")}>
+        {ARCHITECTURE_STEPS.map((step, index) => {
+          const isActive = step.id === activeStepId;
+          const isCommitBoundary = step.id === "Outbox";
+          return (
+            <li
+              className={`architecture-step architecture-step-${step.zone}${isActive ? " is-active" : ""}`}
+              key={step.id}
+            >
+              <button
+                type="button"
+                aria-pressed={isActive}
+                aria-controls="architecture-active-detail"
+                onClick={() => setActiveStepId(step.id)}
+              >
+                <span className="architecture-step-top">
+                  <span className="architecture-step-number">0{index + 1}</span>
+                  <span className="architecture-step-icon"><Icon name={step.icon} /></span>
+                </span>
+                <strong>{t(`about.architecture${step.id}`)}</strong>
+                <small>{t(`about.architectureDetails.${step.id}.summary`)}</small>
+                <span className="architecture-step-meta">
+                  <span className="architecture-zone-tag">{t(`about.${ZONE_TRANSLATION_KEYS[step.zone]}`)}</span>
+                  {isCommitBoundary ? <span className="architecture-commit-note">→ {t("about.architectureCommitBoundary")}</span> : null}
+                </span>
+              </button>
+              {index < ARCHITECTURE_STEPS.length - 1 ? (
+                <span className={`architecture-connector${isCommitBoundary ? " is-commit-boundary" : ""}`} aria-hidden="true">
+                  <span className="architecture-signal" />
+                </span>
+              ) : null}
+            </li>
+          );
+        })}
+      </ol>
+
+      <p className="architecture-interaction-hint">{t("about.architectureInteractionHint")}</p>
+      <section
+        className={`architecture-active-detail architecture-active-detail-${activeStep.zone}`}
+        id="architecture-active-detail"
+        aria-live="polite"
+      >
+        <div className="architecture-active-copy">
+          <span>{t("about.architectureSelectedStep", { current: activeIndex + 1, total: ARCHITECTURE_STEPS.length })}</span>
+          <h3>{t(`about.architecture${activeStep.id}`)}</h3>
+          <p>{t(`about.architectureDetails.${activeStep.id}.body`)}</p>
+        </div>
+        <dl className="architecture-active-evidence">
+          <div>
+            <dt>{t("about.architectureBoundaryLabel")}</dt>
+            <dd>{t(`about.${ZONE_TRANSLATION_KEYS[activeStep.zone]}`)}</dd>
+          </div>
+          <div>
+            <dt>{t("about.architectureEvidenceLabel")}</dt>
+            <dd>
+              <span>{t(`about.architectureDetails.${activeStep.id}.proofOne`)}</span>
+              <span>{t(`about.architectureDetails.${activeStep.id}.proofTwo`)}</span>
+            </dd>
+          </div>
+        </dl>
+      </section>
+    </div>
+  );
+}