@conduction/docusaurus-preset 2.1.1 → 2.3.0

package/src/components/SidebarMock/variants/NextcloudActivity.jsx

@@ -0,0 +1,44 @@
+/**
+ * Nextcloud · stock activity feed.
+ *
+ * Every Nextcloud sidebar's first tab. Shown so MKB readers can
+ * place where Conduction tabs sit. List of person + action rows
+ * with avatars in the family palette mix.
+ */
+import React from 'react';
+import styles from '../SidebarMock.module.css';
+
+export default function NextcloudActivity() {
+  return (
+    <>
+      <div className={styles.smPerson}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+      </div>
+      <div className={[styles.smPerson, styles.b].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+      </div>
+      <div className={[styles.smPerson, styles.c].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+      </div>
+      <div className={[styles.smPerson, styles.d].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+      </div>
+      <div className={styles.smPerson}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+      </div>
+      <div className={[styles.smPerson, styles.e].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+      </div>
+      <div className={[styles.smPerson, styles.b].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+      </div>
+    </>
+  );
+}

package/src/components/SidebarMock/variants/OpenCatalogiPublicationHistory.jsx

@@ -0,0 +1,44 @@
+/**
+ * OpenCatalogi · publication sidebar, History tab.
+ *
+ * Version history of a publication. Each row is a person who made
+ * the edit (avatar) plus the version label and timestamp. Latest
+ * (mint pip) at the top, withdrawn version (red pip) further down.
+ */
+import React from 'react';
+import styles from '../SidebarMock.module.css';
+
+export default function OpenCatalogiPublicationHistory() {
+  return (
+    <>
+      <div className={[styles.row, styles.head].join(' ')}></div>
+      <div className={[styles.row, styles.short].join(' ')}></div>
+      <div className={styles.smBreak}></div>
+      <div className={styles.smPerson}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+        <div className={styles.pip}></div>
+      </div>
+      <div className={[styles.smPerson, styles.b].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+        <div className={styles.pip}></div>
+      </div>
+      <div className={[styles.smPerson, styles.d].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+        <div className={styles.pip}></div>
+      </div>
+      <div className={[styles.smPerson, styles.c, styles.blocked].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+        <div className={styles.pip}></div>
+      </div>
+      <div className={[styles.smPerson, styles.e].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+        <div className={styles.pip}></div>
+      </div>
+    </>
+  );
+}

package/src/components/SidebarMock/variants/OpenConnectorRunDetail.jsx

@@ -0,0 +1,27 @@
+/**
+ * OpenConnector · run sidebar, Logs tab.
+ *
+ * Single integration run inspected: header with run id and timing,
+ * then a vertical log stream with severity-coded timestamps. Last
+ * line is a warn or error so the eye lands on it.
+ */
+import React from 'react';
+import styles from '../SidebarMock.module.css';
+
+export default function OpenConnectorRunDetail() {
+  return (
+    <>
+      <div className={[styles.row, styles.head].join(' ')}></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smBreak}></div>
+      <div className={styles.smSub}></div>
+      <div className={styles.smLog}><div className={styles.ts}></div><div className={styles.msg}></div></div>
+      <div className={styles.smLog}><div className={styles.ts}></div><div className={styles.msg}></div></div>
+      <div className={styles.smLog}><div className={styles.ts}></div><div className={styles.msg}></div></div>
+      <div className={[styles.smLog, styles.warn].join(' ')}><div className={styles.ts}></div><div className={styles.msg}></div></div>
+      <div className={styles.smLog}><div className={styles.ts}></div><div className={styles.msg}></div></div>
+      <div className={[styles.smLog, styles.error].join(' ')}><div className={styles.ts}></div><div className={styles.msg}></div></div>
+    </>
+  );
+}

package/src/components/SidebarMock/variants/OpenRegisterMetadata.jsx

@@ -0,0 +1,29 @@
+/**
+ * OpenRegister · object sidebar, Metadata tab.
+ *
+ * Object frontmatter as a key/value list: register, schema, slug,
+ * created, updated, owner. Plus a section break and the object's
+ * primary identifiers. Reads as "what is this object" at a glance.
+ */
+import React from 'react';
+import styles from '../SidebarMock.module.css';
+
+export default function OpenRegisterMetadata() {
+  return (
+    <>
+      <div className={[styles.row, styles.head].join(' ')}></div>
+      <div className={[styles.row, styles.short].join(' ')}></div>
+      <div className={styles.smBreak}></div>
+      <div className={styles.smSub}></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smBreak}></div>
+      <div className={styles.smSub}></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+    </>
+  );
+}

package/src/components/SidebarMock/variants/ProcestTimeline.jsx

@@ -0,0 +1,40 @@
+/**
+ * Procest · case sidebar, Timeline tab.
+ *
+ * The case stage history vertical, with one done, one active in
+ * orange, three to-do. Same .now / .late / .todo modifiers as the
+ * AppMock procest timeline, just stacked instead of horizontal.
+ */
+import React from 'react';
+import styles from '../SidebarMock.module.css';
+
+export default function ProcestTimeline() {
+  return (
+    <>
+      <div className={styles.smStage}>
+        <div className={styles.h}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+      </div>
+      <div className={styles.smStage}>
+        <div className={styles.h}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+      </div>
+      <div className={[styles.smStage, styles.now].join(' ')}>
+        <div className={styles.h}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+      </div>
+      <div className={[styles.smStage, styles.todo].join(' ')}>
+        <div className={styles.h}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+      </div>
+      <div className={[styles.smStage, styles.todo].join(' ')}>
+        <div className={styles.h}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+      </div>
+      <div className={[styles.smStage, styles.todo].join(' ')}>
+        <div className={styles.h}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+      </div>
+    </>
+  );
+}

package/src/components/SidebarMock/variants/ProcestXWiki.jsx

@@ -0,0 +1,33 @@
+/**
+ * Procest · case sidebar, xWiki tab.
+ *
+ * The xWiki integration: Procest pulls the case-handling protocol
+ * page out of xWiki and shows it next to the live case. Body reads
+ * as wiki text: a heading, two paragraphs, a subheading, a list of
+ * checked steps. Worth saying out loud since it is the integration
+ * point most likely to surprise readers (xWiki under Nextcloud is
+ * not a standard pairing).
+ */
+import React from 'react';
+import styles from '../SidebarMock.module.css';
+
+export default function ProcestXWiki() {
+  return (
+    <>
+      <div className={[styles.row, styles.head].join(' ')}></div>
+      <div className={styles.row}></div>
+      <div className={styles.row}></div>
+      <div className={[styles.row, styles.med].join(' ')}></div>
+      <div className={styles.smBreak}></div>
+      <div className={styles.smSub}></div>
+      <div className={styles.row}></div>
+      <div className={[styles.row, styles.med].join(' ')}></div>
+      <div className={[styles.row, styles.short].join(' ')}></div>
+      <div className={styles.smBreak}></div>
+      <div className={styles.smSub}></div>
+      <div className={styles.row}></div>
+      <div className={styles.row}></div>
+      <div className={[styles.row, styles.short].join(' ')}></div>
+    </>
+  );
+}

package/src/components/WidgetMock/WidgetMock.jsx

@@ -0,0 +1,94 @@
+/**
+ * <WidgetMock />
+ *
+ * Standalone abstract of a Nextcloud dashboard widget that a
+ * Conduction app registers (DocuDesk anonymise, Procest werkvoorraad,
+ * OpenRegister activity, etc.) plus a few of the stock Nextcloud
+ * widgets we frame around (Mail, Calendar, Files, Decks, RSS).
+ *
+ * Companion to <AppMock />: AppMock paints the whole product surface
+ * (topbar + nav + col + optional sidebar); WidgetMock paints just one
+ * tile, sized for inline use in marketing copy or docs that talk
+ * about a single integration point.
+ *
+ * Visual reference: every Conduction widget renders against a dashboard
+ * background (cobalt-900 in MyDash, white in stock Nextcloud). The
+ * WidgetMock chrome is cobalt to match MyDash since most Conduction
+ * widgets are built for that surface; the same widget atoms render
+ * fine on white when reused there.
+ *
+ * Usage:
+ *
+ *   <WidgetMock kind="procest-werkvoorraad" />
+ *   <WidgetMock kind="docudesk-anonymise" caption />
+ *   <WidgetMock kind="nextcloud-calendar" size="sm" />
+ *
+ * Props:
+ *   - kind:    one of VARIANTS keys                   (required)
+ *   - size:    'sm' | 'md' (default) | 'lg'           — frame width
+ *   - caption: boolean                                — adds a small
+ *                                                       label below
+ *                                                       the frame
+ *   - className: string
+ */
+
+import React from 'react';
+import styles from './WidgetMock.module.css';
+import amStyles from '../AppMock/AppMock.module.css';
+
+import DocuDeskAnonymise       from './variants/DocuDeskAnonymise.jsx';
+import DocuDeskPendingSign     from './variants/DocuDeskPendingSign.jsx';
+import ProcestWerkvoorraad     from './variants/ProcestWerkvoorraad.jsx';
+import ProcestDueToday         from './variants/ProcestDueToday.jsx';
+import OpenRegisterActivity    from './variants/OpenRegisterActivity.jsx';
+import OpenCatalogiPublications from './variants/OpenCatalogiPublications.jsx';
+import OpenConnectorRuns       from './variants/OpenConnectorRuns.jsx';
+import DeciDeskActions         from './variants/DeciDeskActions.jsx';
+import PipelinQDeals           from './variants/PipelinQDeals.jsx';
+import NextcloudMail           from './variants/NextcloudMail.jsx';
+import NextcloudCalendar       from './variants/NextcloudCalendar.jsx';
+import NextcloudFiles          from './variants/NextcloudFiles.jsx';
+import NextcloudDecks          from './variants/NextcloudDecks.jsx';
+import NextcloudRss            from './variants/NextcloudRss.jsx';
+
+const VARIANTS = {
+  'docudesk-anonymise':       { Component: DocuDeskAnonymise,       label: 'DocuDesk · Anonymise drop' },
+  'docudesk-pending-sign':    { Component: DocuDeskPendingSign,     label: 'DocuDesk · Pending signatures' },
+  'procest-werkvoorraad':     { Component: ProcestWerkvoorraad,     label: 'Procest · Werkvoorraad' },
+  'procest-due-today':        { Component: ProcestDueToday,         label: 'Procest · Due today' },
+  'openregister-activity':    { Component: OpenRegisterActivity,    label: 'OpenRegister · Activity' },
+  'opencatalogi-publications':{ Component: OpenCatalogiPublications,label: 'OpenCatalogi · Recent publications' },
+  'openconnector-runs':       { Component: OpenConnectorRuns,       label: 'OpenConnector · Recent runs' },
+  'decidesk-actions':         { Component: DeciDeskActions,         label: 'DeciDesk · Action items' },
+  'pipelinq-deals':           { Component: PipelinQDeals,           label: 'PipelinQ · Deals closing' },
+  'nextcloud-mail':           { Component: NextcloudMail,           label: 'Nextcloud · Important mail' },
+  'nextcloud-calendar':       { Component: NextcloudCalendar,       label: 'Nextcloud · Calendar' },
+  'nextcloud-files':          { Component: NextcloudFiles,          label: 'Nextcloud · Recent files' },
+  'nextcloud-decks':          { Component: NextcloudDecks,          label: 'Nextcloud · Decks' },
+  'nextcloud-rss':            { Component: NextcloudRss,            label: 'Nextcloud · RSS feed' },
+};
+
+export default function WidgetMock({ kind, size = 'md', caption = false, className }) {
+  const variant = VARIANTS[kind];
+  const wrap = [amStyles.am, styles.wm].filter(Boolean).join(' ');
+  if (!variant) {
+    return (
+      <div className={wrap}>
+        <div className={[styles.wmFrame, styles[`wm-size-${size}`]].filter(Boolean).join(' ')}>
+          <div style={{ color: 'var(--c-cobalt-200)', fontSize: 11 }}>Unknown widget: {kind}</div>
+        </div>
+      </div>
+    );
+  }
+  const { Component, label } = variant;
+  return (
+    <div className={wrap}>
+      <figure className={[styles.wmFigure, className].filter(Boolean).join(' ')}>
+        <div className={[styles.wmFrame, styles[`wm-size-${size}`]].filter(Boolean).join(' ')}>
+          <Component />
+        </div>
+        {caption && <figcaption className={styles.wmCaption}>{label}</figcaption>}
+      </figure>
+    </div>
+  );
+}

package/src/components/WidgetMock/WidgetMock.module.css

@@ -0,0 +1,61 @@
+/**
+ * <WidgetMock /> styles.
+ *
+ * The widget atoms themselves (.w, .w-mail, .w-calendar, .w-files,
+ * .w-decks, .w-rss, .w-jira, .w-video, .w-upload, .w-werkvoorraad,
+ * .w-launcher, .w-subgrid, .w-graph-bar / .w-graph-line / .w-graph-donut)
+ * live in AppMock/AppMock.module.css under the `.am` parent scope.
+ * They were authored there because MyDash variants render dashboard
+ * grids full of them. WidgetMock standalonises a single widget:
+ * same atoms, new chrome.
+ *
+ * To get both rule sets, every WidgetMock instance wraps content in
+ * <div className={[styles.am, styles.wm].join(' ')}>. The static
+ * kit page uses <div class="am wm"> for the same effect.
+ *
+ * The .wm parent here is `display: contents` so the wrapper doesn't
+ * affect layout. .wmFrame is the container that gives the widget its
+ * native dashboard background (cobalt-900) and a shadow, so it reads
+ * as a tile lifted off the page.
+ */
+
+.am.wm { display: contents; }
+
+.am .wmFigure {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  align-items: flex-start;
+}
+
+.am .wmFrame {
+  background: var(--c-cobalt-900);
+  border-radius: var(--radius-md);
+  padding: 12px;
+  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+}
+
+/* Widget sizes. The .w block inside fills the frame. */
+.am .wmFrame.wm-size-sm { width: 220px; aspect-ratio: 5 / 4; }
+.am .wmFrame.wm-size-md { width: 300px; aspect-ratio: 5 / 4; }
+.am .wmFrame.wm-size-lg { width: 380px; aspect-ratio: 5 / 4; }
+
+/* The widget atom (.w) inside should fill the frame and not have its
+   own outer shadow, since wmFrame already provides one. */
+.am .wmFrame > .w {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+
+.am .wmCaption {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  margin: 0;
+}

package/src/components/WidgetMock/variants/DeciDeskActions.jsx

@@ -0,0 +1,27 @@
+/**
+ * DeciDesk · Action items widget.
+ *
+ * Action items assigned to the viewer, sorted by due date. .w-jira
+ * atom: id slot is the source decision, pip slot is status (orange =
+ * due this week, red = overdue, mint = done, cobalt-200 = upcoming).
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function DeciDeskActions() {
+  return (
+    <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, styles.blocked].join(' ')}><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.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>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/DocuDeskAnonymise.jsx

@@ -0,0 +1,24 @@
+/**
+ * DocuDesk · Anonymise drop widget.
+ *
+ * Drop a document into the dashboard tile, get back a redacted copy.
+ * Visual: dashed cobalt drop-zone with a hex glyph. Status-pill is
+ * absent: this widget is action-first, not status-first.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function DocuDeskAnonymise() {
+  return (
+    <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>
+  );
+}

package/src/components/WidgetMock/variants/DocuDeskPendingSign.jsx

@@ -0,0 +1,28 @@
+/**
+ * DocuDesk · Pending signatures widget.
+ *
+ * Documents waiting on someone's signature, ranked by oldest. Reuses
+ * the .w-jira atom (id + title + status pip): id slot reads as a
+ * document type tag, pip slot reads as a status (orange = waiting,
+ * red = blocked, mint = done in the last day, cobalt-200 = no action).
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function DocuDeskPendingSign() {
+  return (
+    <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, styles.review].join(' ')}><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.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 className={[styles.item, styles.todo].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/NextcloudCalendar.jsx

@@ -0,0 +1,37 @@
+/**
+ * Nextcloud · Calendar widget (stock, framed for context).
+ *
+ * 7-column day grid covering four weeks. .today = orange (the
+ * dashboard's "right now"), .event = cobalt-300 dot, .muted = leading
+ * or trailing days from neighbouring months.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+const DAYS = [
+  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,
+];
+
+export default function NextcloudCalendar() {
+  return (
+    <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}>
+        {DAYS.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>
+  );
+}

package/src/components/WidgetMock/variants/NextcloudDecks.jsx

@@ -0,0 +1,33 @@
+/**
+ * Nextcloud · Decks widget (stock, framed for context).
+ *
+ * Three kanban columns with cards. Coloured borders mark priority
+ * (.b = orange / urgent, .c = mint / done).
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function NextcloudDecks() {
+  return (
+    <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>
+  );
+}

package/src/components/WidgetMock/variants/NextcloudFiles.jsx

@@ -0,0 +1,26 @@
+/**
+ * Nextcloud · Recent files widget (stock, framed for context).
+ *
+ * File list with type-coloured icons: .folder = orange, .doc =
+ * terracotta, .sheet = forest. Last item plain (image / unknown).
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function NextcloudFiles() {
+  return (
+    <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>
+  );
+}

package/src/components/WidgetMock/variants/NextcloudMail.jsx

@@ -0,0 +1,28 @@
+/**
+ * Nextcloud · Important mail widget (stock, framed for context).
+ *
+ * Avatar list with two text lines (sender + subject). Class colour
+ * variants on .item give the avatar palette mix. We frame this as
+ * "the surface Conduction widgets sit next to" so MKB readers see
+ * the integration point clearly.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function NextcloudMail() {
+  return (
+    <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}>
+        <div className={styles.item}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+        <div className={[styles.item, styles.b].join(' ')}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+        <div className={[styles.item, styles.c].join(' ')}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+        <div className={[styles.item, styles.d].join(' ')}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+        <div className={styles.item}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/NextcloudRss.jsx

@@ -0,0 +1,26 @@
+/**
+ * Nextcloud · RSS feed widget (stock, framed for context).
+ *
+ * Three-column row: source badge, title, when. Mostly text, no avatar
+ * or pip needed since the feed metadata IS the status.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function NextcloudRss() {
+  return (
+    <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>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/OpenCatalogiPublications.jsx

@@ -0,0 +1,28 @@
+/**
+ * OpenCatalogi · Recent publications widget.
+ *
+ * The five most recent items federated to the public catalogue, each
+ * with a publication-type id badge, title, and status pip (mint =
+ * published, orange = pending review, vermillion = withdrawn).
+ * Reuses .w-jira atom.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function OpenCatalogiPublications() {
+  return (
+    <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}><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.blocked].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+      </div>
+    </div>
+  );
+}