feat(docs): add flexible-alerts plugin and callout styles

3 files changed, 117 insertions, 14 deletions

diff --git a/docs/css/dev-dark.css b/docs/css/dev-dark.css
index b3d065a..d5456ce 100644
--- a/docs/css/dev-dark.css
+++ b/docs/css/dev-dark.css
@@ -548,6 +548,34 @@ code .token {
     min-height: 24px;
 }
 
+/* ── Flexible alerts ── */
+.alert.callout {
+    border-radius: 6px;
+}
+.alert.callout.note {
+    border: 1px solid #58a6ff;
+    background: rgba(88, 166, 255, 0.08);
+}
+.alert.callout.tip {
+    border: 1px solid #3fb950;
+    background: rgba(63, 185, 80, 0.08);
+}
+.alert.callout.important {
+    border: 1px solid #a371f7;
+    background: rgba(163, 113, 247, 0.08);
+}
+.alert.callout.warning {
+    border: 1px solid #d29922;
+    background: rgba(210, 153, 34, 0.08);
+}
+.alert.callout.attention {
+    border: 1px solid #f85149;
+    background: rgba(248, 81, 73, 0.08);
+}
+.alert.callout code {
+    background-color: transparent;
+}
+
 /* ── Search panel ── */
 .search {
     border-bottom: 1px solid #30363d;
diff --git a/docs/css/dev-light.css b/docs/css/dev-light.css
index 4de3083..4122f25 100644
--- a/docs/css/dev-light.css
+++ b/docs/css/dev-light.css
@@ -33,7 +33,8 @@ img.emoji {
     vertical-align: middle;
 }
 span.emoji {
-    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    font-family:
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
         "Noto Color Emoji";
     font-size: 1.2em;
     vertical-align: middle;
@@ -47,7 +48,9 @@ span.emoji {
     position: fixed;
     right: 0;
     top: 0;
-    transition: width 0.2s, opacity 0.4s;
+    transition:
+        width 0.2s,
+        opacity 0.4s;
     width: 0%;
     z-index: 999999;
 }
@@ -72,8 +75,14 @@ body {
     -webkit-font-smoothing: antialiased;
     background-color: #ffffff;
     color: #24292f;
-    font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans",
-        Helvetica, Arial, sans-serif;
+    font-family:
+        system-ui,
+        -apple-system,
+        "Segoe UI",
+        "Noto Sans",
+        Helvetica,
+        Arial,
+        sans-serif;
     font-size: 15px;
     line-height: 1.7;
     letter-spacing: 0;
@@ -100,8 +109,14 @@ kbd {
 
 /* ── Nav bar (top) ── */
 .app-nav {
-    font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans",
-        Helvetica, Arial, sans-serif;
+    font-family:
+        system-ui,
+        -apple-system,
+        "Segoe UI",
+        "Noto Sans",
+        Helvetica,
+        Arial,
+        sans-serif;
     margin: 0 0 0 auto;
     position: fixed;
     right: 30px;
@@ -372,9 +387,9 @@ body.sticky .sidebar-toggle {
 .markdown-section code {
     background: rgba(27, 31, 36, 0.06);
     border-radius: 4px;
-    font-family: "JetBrains Mono", "Fira Code", "Cascadia Code",
-        "SF Mono", "Fira Mono", "Source Code Pro", Menlo, Consolas,
-        "DejaVu Sans Mono", monospace;
+    font-family:
+        "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", "Fira Mono",
+        "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
     font-size: 13px;
     margin: 0;
     padding: 2px 6px;
@@ -386,9 +401,9 @@ body.sticky .sidebar-toggle {
     background: #f6f8fa;
     border: 1px solid #d0d7de;
     border-radius: 6px;
-    font-family: "JetBrains Mono", "Fira Code", "Cascadia Code",
-        "SF Mono", "Fira Mono", "Source Code Pro", Menlo, Consolas,
-        "DejaVu Sans Mono", monospace;
+    font-family:
+        "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", "Fira Mono",
+        "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
     font-size: 13px;
     line-height: 1.6;
     margin: 16px 0;
@@ -526,6 +541,34 @@ code .token {
     min-height: 24px;
 }
 
+/* ── Flexible alerts ── */
+.alert.callout {
+    border-radius: 6px;
+}
+.alert.callout.note {
+    border: 1px solid #0969da;
+    background: rgba(9, 105, 218, 0.06);
+}
+.alert.callout.tip {
+    border: 1px solid #1a7f37;
+    background: rgba(26, 127, 55, 0.06);
+}
+.alert.callout.important {
+    border: 1px solid #8250df;
+    background: rgba(130, 80, 223, 0.06);
+}
+.alert.callout.warning {
+    border: 1px solid #d29922;
+    background: rgba(210, 153, 34, 0.06);
+}
+.alert.callout.attention {
+    border: 1px solid #cf222e;
+    background: rgba(207, 34, 46, 0.06);
+}
+.alert.callout code {
+    background-color: transparent;
+}
+
 /* ── Search panel ── */
 .search {
     border-bottom: 1px solid #d0d7de;
@@ -539,8 +582,14 @@ code .token {
     border: 1px solid #d0d7de;
     border-radius: 6px;
     color: #24292f;
-    font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans",
-        Helvetica, Arial, sans-serif;
+    font-family:
+        system-ui,
+        -apple-system,
+        "Segoe UI",
+        "Noto Sans",
+        Helvetica,
+        Arial,
+        sans-serif;
     font-size: 14px;
     outline: none;
     padding: 6px 32px 6px 12px;
diff --git a/docs/dev-docs/index.html b/docs/dev-docs/index.html
index c3fd04a..e62268d 100644
--- a/docs/dev-docs/index.html
+++ b/docs/dev-docs/index.html
@@ -147,6 +147,31 @@
                     noData: "No matches found.",
                     depth: 2,
                 },
+                plugins: [
+                    function (hook) {
+                        hook.beforeEach(function (content) {
+                            return content
+                                .split("\n")
+                                .filter(function (line) {
+                                    return !line.startsWith("@@@");
+                                })
+                                .join("\n");
+                        });
+                    },
+                    [
+                        "flexible-alerts",
+                        {
+                            style: "flat",
+                            labels: {
+                                NOTE: "Note",
+                                TIP: "Tip",
+                                IMPORTANT: "Important",
+                                WARNING: "Warning",
+                                CAUTION: "Caution",
+                            },
+                        },
+                    ],
+                ],
             };
         </script>
 
@@ -156,6 +181,7 @@
         <script src="../scripts/prism-toml.min.js"></script>
         <script src="../scripts/prism-rust.js"></script>
         <script src="../scripts/docsify-corner.js"></script>
+        <script src="../scripts/docsify-plugin-flexible-alerts.js"></script>
         <script src="../scripts/day-night-switch.js"></script>
     </body>
 </html>