Cila: Home page MDX rewrite, Mermaid mobile touch fix, AsciinemaPlayer cols tuning, MDX list style isolation

Author: remrearas

www/public/openapi.json

@@ -2,7 +2,7 @@
   "openapi": "3.1.0",
   "info": {
     "title": "phantom-daemon",
-    "version": "1.0.0"
+    "version": "1.0.5"
   },
   "paths": {
     "/api/core/backup/export": {

www/src/pages/docs/api/pages/index/index.en.mdx

@@ -13,10 +13,6 @@ Technical reference for the endpoints served by ***Phantom Daemon*** over Unix D
   A -->|"UDS"| D["Phantom Daemon"]
 `} />
 
-<Mermaid chart={`flowchart
-  Q["Request"] -->|"UDS · daemon.sock"| D["Phantom Daemon"]
-`} />
-
 <InlineNotification
   kind="info"
   title="Modular Architecture"
@@ -27,4 +23,10 @@ Technical reference for the endpoints served by ***Phantom Daemon*** over Unix D
 
 ---
 
+## Daemon OpenAPI Reference
+
+<Mermaid chart={`flowchart
+  Q["Request"] -->|"UDS · daemon.sock"| D["Phantom Daemon"]
+`} />
+
 <OpenApiDoc />

www/src/pages/docs/api/pages/index/index.mdx

@@ -13,10 +13,6 @@ import { InlineNotification } from '@carbon/react';
   A -->|"UDS"| D["Phantom Daemon"]
 `} />
 
-<Mermaid chart={`flowchart
-  Q["Sorgu"] -->|"UDS · daemon.sock"| D["Phantom Daemon"]
-`} />
-
 <InlineNotification
   kind="info"
   title="Modüler Mimari"
@@ -27,4 +23,10 @@ import { InlineNotification } from '@carbon/react';
 
 ---
 
+## Daemon OpenAPI Reference
+
+<Mermaid chart={`flowchart
+  Q["Request"] -->|"UDS · daemon.sock"| D["Phantom Daemon"]
+`} />
+
 <OpenApiDoc />

www/src/pages/docs/home/pages/index/index.en.mdx

@@ -79,7 +79,7 @@ When the service starts, kernel state (nftables rules, routing policies) is rebu
 curl -sSL get.phantom.tc | bash
 ```
 
-<AsciinemaPlayer src="/assets/phantom-wg-install.cast" />
+<AsciinemaPlayer src="/assets/phantom-wg-install.cast" cols={160} />
 
 ### Configuration
 

www/src/pages/docs/home/pages/index/index.mdx

@@ -79,7 +79,7 @@ Servis başlatıldığında kernel state (nftables kuralları, routing policy'le
 curl -sSL get.phantom.tc | bash
 ```
 
-<AsciinemaPlayer src="/assets/phantom-wg-install.cast" />
+<AsciinemaPlayer src="/assets/phantom-wg-install.cast" cols={160} />
 
 ### Yapılandırma
 

www/src/shared/components/content/styles/MDXContent.scss

@@ -31,22 +31,23 @@
     margin-bottom: spacing.$spacing-05;
   }
 
-  ul, ol {
+  > ul, > ol {
     @include type.type-style('body-01');
     color: var(--cds-text-secondary);
     margin-bottom: spacing.$spacing-05;
     padding-left: spacing.$spacing-07;
   }
 
-  ul {
+  > ul {
     list-style-type: disc;
   }
 
-  ol {
+  > ol {
     list-style-type: decimal;
   }
 
-  li {
+  > ul > li,
+  > ol > li {
     margin-bottom: spacing.$spacing-03;
   }
 

www/src/shared/components/visualization/Mermaid.tsx

@@ -50,6 +50,17 @@ const MermaidInner: React.FC<MermaidProps> = ({ chart }) => {
   const MAX_ZOOM = 2;
   const MIN_ZOOM = 0.5;
   const MAX_PAN = 300;
+  const MOBILE_BREAKPOINT = 672;
+
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`);
+    setIsMobile(mq.matches);
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
 
   const getCurrentTheme = useCallback((): 'neutral' | 'dark' => {
     const carbonTheme = document.documentElement.getAttribute('data-carbon-theme');
@@ -495,11 +506,13 @@ const MermaidInner: React.FC<MermaidProps> = ({ chart }) => {
             onMouseMove={handleMouseMove}
             onMouseUp={handleMouseUp}
             onMouseLeave={handleMouseLeave}
-            onTouchStart={handleTouchStart}
-            onTouchMove={handleTouchMove}
-            onTouchEnd={handleTouchEnd}
+            {...(!isMobile && {
+              onTouchStart: handleTouchStart,
+              onTouchMove: handleTouchMove,
+              onTouchEnd: handleTouchEnd,
+            })}
             style={{
-              cursor: loadingState === 'success' ? (isDragging ? 'grabbing' : 'grab') : 'default',
+              cursor: loadingState === 'success' && !isMobile ? (isDragging ? 'grabbing' : 'grab') : 'default',
               display: loadingState === 'success' ? 'flex' : 'none',
               ...(containerHeight && {
                 height: `${containerHeight}px`,

www/src/shared/components/visualization/styles/AsciinemaPlayer.scss

@@ -1,7 +1,6 @@
 @use '@carbon/react/scss/spacing' as sp;
 
 .asciinema-player-wrapper {
-  max-width: 820px;
   margin-bottom: sp.$spacing-07;
   border-radius: 8px;
   overflow: hidden;