docs: present AI strategy as a diagram-first story

src/components/ArchifyDiagram/index.tsx

@@ -1,13 +1,37 @@
 import React, {useEffect, useId, useRef, useState} from 'react';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import {useLocation} from '@docusaurus/router';
 
-export default function ArchifyDiagram({name, title, compact = false}: {name: string; title: string; compact?: boolean}): React.ReactElement {
+export default function ArchifyDiagram({name, title, compact = false, story = false}: {name: string; title: string; compact?: boolean; story?: boolean}): React.ReactElement {
   if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(name)) throw new Error('Invalid diagram name');
   const source = useBaseUrl(`/diagrams/${name}/`);
+  const mobileSource = useBaseUrl(`/diagrams/${name}-mobile/`);
   const dialog = useRef<HTMLDialogElement>(null);
   const opener = useRef<HTMLButtonElement>(null);
   const headingId = useId();
   const [expanded, setExpanded] = useState(false);
+  const {pathname, hash} = useLocation();
+  useEffect(() => {
+    if (!story || !hash) return;
+    let id: string;
+    try {id = decodeURIComponent(hash.slice(1));} catch {return;}
+    const frame = requestAnimationFrame(() => {
+      const target = document.getElementById(id);
+      if (!target?.closest('.strategy-content')) return;
+      let detail = target.closest('details');
+      if (!detail) return;
+      while (detail) {
+        if (detail.dataset.collapsed === 'true') {
+          detail.querySelector<HTMLElement>(':scope > summary')?.click();
+        } else if (!detail.hasAttribute('data-collapsed')) {
+          detail.open = true;
+        }
+        detail = detail.parentElement?.closest('details') ?? null;
+      }
+      target.scrollIntoView();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [story, pathname, hash]);
   useEffect(() => {
     if (!expanded) return;
     dialog.current?.showModal();
@@ -16,9 +40,12 @@ export default function ArchifyDiagram({name, title, compact = false}: {name: st
     return () => {document.body.style.overflow = previousOverflow;};
   }, [expanded]);
   const close = () => {dialog.current?.close();};
-  return <section className={`archify-panel${compact ? ' archify-panel--compact' : ''}`} aria-label={title}>
+  return <section className={`archify-panel${compact ? ' archify-panel--compact' : ''}${story ? ' archify-panel--story' : ''}`} data-diagram={name} aria-label={title}>
     <div className="archify-toolbar"><button ref={opener} type="button" className="archify-expand" aria-label={`Expand ${title}`} title="Expand diagram" onClick={() => setExpanded(true)}><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M8 3H3v5M16 3h5v5M21 16v5h-5M8 21H3v-5" /></svg></button></div>
-    <iframe src={source} title={title} sandbox="allow-scripts allow-downloads" loading="lazy" referrerPolicy="no-referrer" />
+    {story ? <>
+      <iframe className="story-desktop" src={`${source}?embed=1&theme=light`} title={title} sandbox="allow-scripts" loading="lazy" referrerPolicy="no-referrer" />
+      <iframe className="story-mobile" src={`${mobileSource}?embed=1&theme=light`} title={`${title} — narrow layout`} sandbox="allow-scripts" loading="lazy" referrerPolicy="no-referrer" />
+    </> : <iframe src={source} title={title} sandbox="allow-scripts allow-downloads" loading="lazy" referrerPolicy="no-referrer" />}
     <dialog ref={dialog} className="archify-modal" aria-labelledby={headingId} onClose={() => {setExpanded(false); opener.current?.focus();}}>
       <div className="archify-modal-toolbar"><strong id={headingId}>{title}</strong><button type="button" onClick={close} autoFocus aria-label="Close full-screen diagram"><span aria-hidden="true">×</span></button></div>
       {expanded && <iframe src={source} title={`${title} — expanded`} sandbox="allow-scripts allow-downloads" referrerPolicy="no-referrer" />}