fix(blog): optimize component share logic, typography, and modal layouts

apps/web/src/components/DiagramSequence.tsx

@@ -3,6 +3,11 @@
 import React from "react";
 import { Mermaid } from "./Mermaid";
 
+interface SequenceParticipant {
+  id: string;
+  label?: string;
+}
+
 interface SequenceMessage {
   from: string;
   to: string;
@@ -10,9 +15,22 @@ interface SequenceMessage {
   type?: "solid" | "dotted" | "async";
 }
 
+interface SequenceNote {
+  over: string | string[];
+  text: string;
+}
+
+type SequenceStep = SequenceMessage | SequenceNote;
+
+function isNote(step: SequenceStep): step is SequenceNote {
+  return "over" in step;
+}
+
 interface DiagramSequenceProps {
-  participants: string[];
-  messages: SequenceMessage[];
+  participants: (string | SequenceParticipant)[];
+  steps?: SequenceStep[];
+  messages?: SequenceMessage[];
+  children?: React.ReactNode;
   title?: string;
   caption?: string;
   id?: string;
@@ -22,7 +40,9 @@ interface DiagramSequenceProps {
 
 export const DiagramSequence: React.FC<DiagramSequenceProps> = ({
   participants,
+  steps,
   messages,
+  children,
   title,
   caption,
   id,
@@ -32,17 +52,38 @@ export const DiagramSequence: React.FC<DiagramSequenceProps> = ({
   const getArrow = (type?: string) => {
     switch (type) {
       case "dotted":
-        return "-->";
+        return "-->>";
       case "async":
         return "->>";
       default:
-        return "->";
+        return "->>";
     }
   };
 
-  const sequenceGraph = `sequenceDiagram
-${(participants || []).map((p) => `    participant ${p}`).join("\n")}
-${(messages || []).map((m) => `    ${m.from}${getArrow(m.type)}${m.to}: ${m.message}`).join("\n")}`;
+  const participantLines = (participants || []).map((p) => {
+    if (typeof p === "string") return `    participant ${p}`;
+    return p.label
+      ? `    participant ${p.id} as ${p.label}`
+      : `    participant ${p.id}`;
+  });
+
+  // Support both `steps` (mixed messages + notes) and legacy `messages`
+  const allSteps = steps || (messages || []);
+
+  const stepLines = allSteps.map((step) => {
+    if (isNote(step)) {
+      const over = Array.isArray(step.over) ? step.over.join(",") : step.over;
+      return `    Note over ${over}: ${step.text}`;
+    }
+    return `    ${step.from}${getArrow(step.type)}${step.to}: ${step.message}`;
+  });
+
+  const participantLinesSection = participantLines.length > 0 ? `${participantLines.join("\n")}\n` : "";
+  const generatedStepsSection = stepLines.length > 0 ? stepLines.join("\n") : "";
+
+  const sequenceGraph = children
+    ? (typeof children === "string" ? children : "")
+    : `sequenceDiagram\n${participantLinesSection}${generatedStepsSection}`;
 
   return (
     <div className="my-12">
@@ -61,3 +102,4 @@ ${(messages || []).map((m) => `    ${m.from}${getArrow(m.type)}${m.to}: ${m.mess
     </div>
   );
 };
+