@conduction/docusaurus-preset 0.1.0

package/src/components/AppMock/variants/DocuDeskMock.jsx

@@ -0,0 +1,69 @@
+/**
+ * DocuDesk abstract — three-pane document workshop.
+ *
+ * Inferred from the app's role (template-driven document generation,
+ * anonymisation, signing, archiving): centre stage shows a list of
+ * recent documents with status pips (green = signed, amber = awaiting
+ * sign, terra = anonymised, red = blocked) plus an anonymise drop-zone
+ * widget. Left nav for templates / drafts / signed / archive.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function DocuDeskMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.opencatalogi].filter(Boolean).join(' ')}>
+        <div className={styles.nav}>
+          <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
+          {[true, false, false, false, false].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: '30%'}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn + ' ' + styles.ghost}></div>
+              <div className={styles.btn}></div>
+            </div>
+          </div>
+          {/* Document list with anonymisation/sign status pips */}
+          <div className={[styles.w, styles['w-jira']].join(' ')}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div className={styles.list}>
+              <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+              <div className={[styles.item, styles.review].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+              <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+              <div className={[styles.item, styles.todo].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+              <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+            </div>
+          </div>
+          {/* Anonymise drop-zone */}
+          <div className={[styles.w, styles['w-upload']].join(' ')}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div className={styles.zone}>
+              <div className={styles.ico}></div>
+              <div className={styles.label}></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppMock/variants/LarpingAppMock.jsx

@@ -0,0 +1,59 @@
+/**
+ * LarpingApp abstract — character + scene workshop.
+ *
+ * Inferred from the app role (LARP setting management, character sheets,
+ * scenes, NPCs, factions): centre shows a character grid (3×2 cards
+ * with hex avatars in different family tones) plus a scene timeline
+ * across the top so a session organiser can move stages forward. Left
+ * nav for characters / scenes / NPCs / factions / rules / archive.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function LarpingAppMock() {
+  const charTones = ['', 'b', 'c', 'd', 'e', 'b'];
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.opencatalogi].filter(Boolean).join(' ')}>
+        <div className={styles.nav}>
+          <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
+          {[true, false, false, false, false, false].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          {/* Scene timeline (one done, one active in orange, three to-do) */}
+          <div className={[styles.w, styles['w-graph-bar']].join(' ')} style={{minHeight: 0}}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+          </div>
+          {/* Character grid */}
+          <div className={styles.grid}>
+            {charTones.map((cls, i) => (
+              <div key={i} className={[styles.card, cls && styles[cls]].filter(Boolean).join(' ')}>
+                <div className={styles.ico}></div>
+                <div className={styles.row + ' ' + styles.head}></div>
+                <div className={styles.row + ' ' + styles.short}></div>
+                <div className={styles.statusPill}>
+                  <div className={styles.h}></div><div className={styles.t}></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppMock/variants/MyDashBiMock.jsx

@@ -0,0 +1,135 @@
+/**
+ * MyDash · BI on registers variant.
+ *
+ * Demonstrates the BI-graph angle: any chart you want, drawn directly
+ * on a register without ETL. The mock shows four graph cards in a
+ * 2×2 grid (bar chart, line chart, donut KPI, second bar with a
+ * different accent), plus a ranked-list table widget on the right.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function MyDashBiMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.mydash].filter(Boolean).join(' ')}>
+        <div className={styles.grid}>
+          {/* Column 1: Bar chart on top, line chart below */}
+          <div className={styles.col}>
+            <div className={[styles.w, styles['w-graph-bar']].join(' ')}>
+              <div className={styles.wHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div className={styles.bars}>
+                <div className={styles.bar} style={{height: '40%'}}></div>
+                <div className={styles.bar} style={{height: '65%'}}></div>
+                <div className={styles.bar} style={{height: '52%'}}></div>
+                <div className={styles.bar} style={{height: '78%'}}></div>
+                <div className={[styles.bar, styles.accent].join(' ')} style={{height: '90%'}}></div>
+                <div className={styles.bar} style={{height: '60%'}}></div>
+              </div>
+              <div className={styles.axis}></div>
+            </div>
+            <div className={[styles.w, styles['w-graph-line']].join(' ')}>
+              <div className={styles.wHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div className={styles.chart}>
+                <svg viewBox="0 0 100 40" preserveAspectRatio="none">
+                  <path className={styles.fill}   d="M0,32 L14,24 L28,28 L42,18 L56,22 L70,12 L84,16 L100,8 L100,40 L0,40 Z"/>
+                  <path className={styles.stroke} d="M0,32 L14,24 L28,28 L42,18 L56,22 L70,12 L84,16 L100,8"/>
+                  <circle className={styles.dot} cx="100" cy="8" r="2.5"/>
+                </svg>
+              </div>
+              <div className={styles.axis}></div>
+            </div>
+          </div>
+          {/* Column 2: Donut KPI + second bar chart stacked */}
+          <div className={styles.col}>
+            <div className={[styles.w, styles['w-graph-donut']].join(' ')}>
+              <div className={styles.wHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div className={styles.chart}>
+                <div className={styles.donut}></div>
+                <div className={styles.legend}>
+                  <div className={styles.row}><span className={[styles.swatch, styles.a].join(' ')}></span><span className={styles.label}></span></div>
+                  <div className={styles.row}><span className={[styles.swatch, styles.b].join(' ')}></span><span className={styles.label}></span></div>
+                  <div className={styles.row}><span className={[styles.swatch, styles.c].join(' ')}></span><span className={styles.label}></span></div>
+                </div>
+              </div>
+            </div>
+            <div className={[styles.w, styles['w-graph-bar']].join(' ')}>
+              <div className={styles.wHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div className={styles.bars}>
+                <div className={styles.bar} style={{height: '70%'}}></div>
+                <div className={styles.bar} style={{height: '45%'}}></div>
+                <div className={[styles.bar, styles.accent].join(' ')} style={{height: '88%'}}></div>
+                <div className={styles.bar} style={{height: '55%'}}></div>
+                <div className={styles.bar} style={{height: '38%'}}></div>
+              </div>
+              <div className={styles.axis}></div>
+            </div>
+          </div>
+          {/* Column 3: KPI cards stack */}
+          <div className={styles.col}>
+            <div className={styles.tile}>
+              <div className={styles.tileHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div style={{display: 'flex', alignItems: 'baseline', gap: 4}}>
+                <div style={{height: 12, width: 28, background: 'var(--c-cobalt-900)', borderRadius: 1}}></div>
+                <div style={{height: 4, width: 16, background: 'var(--c-mint-500)', borderRadius: 1}}></div>
+              </div>
+              <div style={{height: 3, width: '70%', background: 'var(--c-cobalt-200)', borderRadius: 1}}></div>
+            </div>
+            <div className={styles.tile}>
+              <div className={styles.tileHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div style={{display: 'flex', alignItems: 'baseline', gap: 4}}>
+                <div style={{height: 12, width: 22, background: 'var(--c-cobalt-900)', borderRadius: 1}}></div>
+                <div style={{height: 4, width: 14, background: 'var(--c-orange-knvb)', borderRadius: 1}}></div>
+              </div>
+              <div style={{height: 3, width: '60%', background: 'var(--c-cobalt-200)', borderRadius: 1}}></div>
+            </div>
+            <div className={styles.tile}>
+              <div className={styles.tileHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div style={{display: 'flex', alignItems: 'baseline', gap: 4}}>
+                <div style={{height: 12, width: 30, background: 'var(--c-cobalt-900)', borderRadius: 1}}></div>
+                <div style={{height: 4, width: 12, background: 'var(--c-mint-500)', borderRadius: 1}}></div>
+              </div>
+              <div style={{height: 3, width: '80%', background: 'var(--c-cobalt-200)', borderRadius: 1}}></div>
+            </div>
+          </div>
+          {/* Column 4: Top-N table widget */}
+          <div className={[styles.w, styles['w-rss']].join(' ')}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div className={styles.list}>
+              <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+              <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+              <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+              <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+              <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+              <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppMock/variants/MyDashMock.jsx

@@ -0,0 +1,96 @@
+/**
+ * MyDash abstract — full-bleed cobalt background with widget grid.
+ * Reference: live screenshot at http://localhost:8080/apps/mydash/.
+ *
+ * Layout: top app strip + 4-column grid where col 1 stacks small + big
+ * primary tiles (Intranet / Calendar / Files), cols 2-4 hold info
+ * widgets with avatar lists, empty states, and an upload-drop zone.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function MyDashMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.mydash].filter(Boolean).join(' ')}>
+        <div className={styles.grid}>
+          {/* Column 1: small + big primary tiles */}
+          <div className={styles.col}>
+            <div className={styles.tile + ' ' + styles.empty}></div>
+            <div className={styles.tile + ' ' + styles.primary}>
+              <div className={styles.icon}></div>
+              <div className={styles.label}></div>
+            </div>
+            <div className={styles.tile + ' ' + styles.empty}></div>
+            <div className={styles.tile + ' ' + styles.primary}>
+              <div className={styles.icon}></div>
+              <div className={styles.label}></div>
+            </div>
+            <div className={styles.tile + ' ' + styles.primary}>
+              <div className={styles.icon}></div>
+              <div className={styles.label}></div>
+            </div>
+          </div>
+          {/* Column 2: Important mail with avatar list */}
+          <div className={styles.tile}>
+            <div className={styles.tileHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div className={styles.stack}>
+              {['b','c','a','d','e','b'].map((cls, i) => (
+                <div key={i} className={styles.item}>
+                  <div className={[styles.av, styles[cls]].join(' ')}></div>
+                  <div className={styles.lines}>
+                    <div className={styles.l1}></div>
+                    <div className={styles.l2}></div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* Column 3: Bar-chart graph card (KPI overview) */}
+          <div className={[styles.w, styles['w-graph-bar']].join(' ')}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div className={styles.bars}>
+              <div className={styles.bar} style={{height: '40%'}}></div>
+              <div className={styles.bar} style={{height: '65%'}}></div>
+              <div className={styles.bar} style={{height: '52%'}}></div>
+              <div className={styles.bar} style={{height: '78%'}}></div>
+              <div className={[styles.bar, styles.accent].join(' ')} style={{height: '90%'}}></div>
+              <div className={styles.bar} style={{height: '60%'}}></div>
+              <div className={styles.bar} style={{height: '72%'}}></div>
+            </div>
+            <div className={styles.axis}></div>
+          </div>
+          {/* Column 4: Overdue + Document Anonymizer */}
+          <div className={styles.col}>
+            <div className={styles.tile} style={{flex: 1}}>
+              <div className={styles.tileHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div style={{flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+                <div style={{width: 22, height: 25, clipPath: 'var(--hex-pointy-top)', background: 'var(--c-cobalt-200)'}}></div>
+              </div>
+            </div>
+            <div className={styles.tile}>
+              <div className={styles.tileHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div style={{height: 32, border: '1px dashed var(--c-cobalt-200)', borderRadius: 'var(--radius-sm)', background: 'var(--c-cobalt-50)'}}></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppMock/variants/MyDashTilesMock.jsx

@@ -0,0 +1,103 @@
+/**
+ * MyDash · Tiles & Grids variant.
+ *
+ * Demonstrates the Nextcloud-integration angle: large hex-icon
+ * launcher tiles that deeplink inside Nextcloud, link out to external
+ * URLs, launch a document, kick off a process, or themselves contain
+ * a sub-grid of further tiles. The mock pictures exactly that mix:
+ * four launcher tiles top-left, a 2×2 sub-grid bottom-left ("custom
+ * tile group"), and two info widgets right.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function MyDashTilesMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.mydash].filter(Boolean).join(' ')}>
+        <div className={styles.grid}>
+          {/* Column 1: Launcher tiles in cobalt + KNVB */}
+          <div className={styles.col}>
+            <div className={[styles.w, styles['w-launcher']].join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.label}></div>
+            </div>
+            <div className={[styles.w, styles['w-launcher'], styles.amber].join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.label}></div>
+            </div>
+            <div className={[styles.w, styles['w-launcher']].join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.label}></div>
+            </div>
+          </div>
+          {/* Column 2: Sub-grid (custom tile group with 4 sub-tiles) */}
+          <div className={[styles.w, styles['w-subgrid']].join(' ')}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div className={styles.grid}>
+              <div className={styles.cell}><div className={styles.ico}></div></div>
+              <div className={[styles.cell, styles.b].join(' ')}><div className={styles.ico}></div></div>
+              <div className={[styles.cell, styles.c].join(' ')}><div className={styles.ico}></div></div>
+              <div className={[styles.cell, styles.d].join(' ')}><div className={styles.ico}></div></div>
+            </div>
+          </div>
+          {/* Column 3: Files widget — deeplinks into a folder */}
+          <div className={[styles.w, styles['w-files']].join(' ')}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div className={styles.list}>
+              <div className={[styles.item, styles.folder].join(' ')}><div className={styles.ico}></div><div className={styles.l}></div></div>
+              <div className={[styles.item, styles.doc].join(' ')}><div className={styles.ico}></div><div className={styles.l}></div></div>
+              <div className={[styles.item, styles.sheet].join(' ')}><div className={styles.ico}></div><div className={styles.l}></div></div>
+              <div className={[styles.item, styles.doc].join(' ')}><div className={styles.ico}></div><div className={styles.l}></div></div>
+              <div className={styles.item}><div className={styles.ico}></div><div className={styles.l}></div></div>
+            </div>
+          </div>
+          {/* Column 4: Two stacked widgets — calendar + decks */}
+          <div className={styles.col}>
+            <div className={[styles.w, styles['w-calendar']].join(' ')}>
+              <div className={styles.wHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div className={styles.grid}>
+                {[0,0,1,0,0,0,2, 0,0,0,3,0,0,0, 0,2,0,0,0,1,0, 0,0,0,0,0,0,0].map((kind, i) => (
+                  <div key={i} className={[styles.day, kind === 1 && styles.event, kind === 2 && styles.muted, kind === 3 && styles.today].filter(Boolean).join(' ')}></div>
+                ))}
+              </div>
+            </div>
+            <div className={[styles.w, styles['w-decks']].join(' ')}>
+              <div className={styles.wHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div className={styles.columns}>
+                <div className={styles.col}>
+                  <div className={styles.card}></div>
+                  <div className={styles.card}></div>
+                </div>
+                <div className={styles.col}>
+                  <div className={[styles.card, styles.b].join(' ')}></div>
+                  <div className={styles.card}></div>
+                  <div className={styles.card}></div>
+                </div>
+                <div className={styles.col}>
+                  <div className={[styles.card, styles.c].join(' ')}></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppMock/variants/MyDashWidgetsMock.jsx

@@ -0,0 +1,123 @@
+/**
+ * MyDash · Widget integration variant.
+ *
+ * Demonstrates the cross-app widget angle: any Conduction app that
+ * registers a Nextcloud dashboard widget shows up here. The mock
+ * pictures the canonical mix:
+ *  - DocuDesk  → upload-to-anonymise dropzone widget
+ *  - Procest   → werkvoorraad (case queue) widget
+ *  - Mail      → Important mail (avatar list)
+ *  - Calendar  → upcoming-events mini grid
+ *  - Jira      → external-app status board
+ *  - RSS       → headlines feed
+ *  - Video     → video-call shortcut
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function MyDashWidgetsMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.mydash].filter(Boolean).join(' ')}>
+        <div className={styles.grid}>
+          {/* Column 1: Procest werkvoorraad + DocuDesk upload */}
+          <div className={styles.col}>
+            <div className={[styles.w, styles['w-werkvoorraad']].join(' ')}>
+              <div className={styles.wHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div className={styles.list}>
+                <div className={[styles.item, styles.now].join(' ')}><div className={styles.stage}></div><div className={styles.l1}></div><div className={styles.av}></div></div>
+                <div className={styles.item}><div className={styles.stage}></div><div className={styles.l1}></div><div className={[styles.av, styles.b].join(' ')}></div></div>
+                <div className={[styles.item, styles.late].join(' ')}><div className={styles.stage}></div><div className={styles.l1}></div><div className={[styles.av, styles.c].join(' ')}></div></div>
+                <div className={styles.item}><div className={styles.stage}></div><div className={styles.l1}></div><div className={styles.av}></div></div>
+                <div className={styles.item}><div className={styles.stage}></div><div className={styles.l1}></div><div className={[styles.av, styles.b].join(' ')}></div></div>
+              </div>
+            </div>
+            <div className={[styles.w, styles['w-upload']].join(' ')}>
+              <div className={styles.wHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div className={styles.zone}>
+                <div className={styles.ico}></div>
+                <div className={styles.label}></div>
+              </div>
+            </div>
+          </div>
+          {/* Column 2: Mail (Important mail) */}
+          <div className={[styles.w, styles['w-mail']].join(' ')}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div className={styles.list}>
+              {['','b','c','d','','e','b'].map((cls, i) => (
+                <div key={i} className={[styles.item, cls && styles[cls]].filter(Boolean).join(' ')}>
+                  <div className={styles.av}></div>
+                  <div className={styles.lines}>
+                    <div className={styles.l1}></div>
+                    <div className={styles.l2}></div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* Column 3: Jira status board + RSS feed */}
+          <div className={styles.col}>
+            <div className={[styles.w, styles['w-jira']].join(' ')}>
+              <div className={styles.wHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div className={styles.list}>
+                <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+                <div className={[styles.item, styles.review].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+                <div className={[styles.item, styles.todo].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+                <div className={[styles.item, styles.blocked].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+                <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+              </div>
+            </div>
+            <div className={[styles.w, styles['w-rss']].join(' ')}>
+              <div className={styles.wHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div className={styles.list}>
+                <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+                <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+                <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+              </div>
+            </div>
+          </div>
+          {/* Column 4: Calendar + Video call shortcut */}
+          <div className={styles.col}>
+            <div className={[styles.w, styles['w-calendar']].join(' ')}>
+              <div className={styles.wHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div className={styles.grid}>
+                {[2,2,1,0,0,0,2, 0,0,0,3,1,0,0, 0,1,0,0,0,1,0, 0,0,0,0,1,0,0].map((kind, i) => (
+                  <div key={i} className={[styles.day, kind === 1 && styles.event, kind === 2 && styles.muted, kind === 3 && styles.today].filter(Boolean).join(' ')}></div>
+                ))}
+              </div>
+            </div>
+            <div className={[styles.w, styles['w-video']].join(' ')}>
+              <div className={styles.wHead}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+              <div className={styles.frame}>
+                <div className={styles.play}></div>
+                <div className={styles.duration}></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}