npm - @conduction/docusaurus-preset - Versions diffs - 2.2.0 → 2.3.1 - Mend

@conduction/docusaurus-preset 2.2.0 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js"
   },

package/src/components/AppMock/AppMock.jsx CHANGED Viewed

@@ -17,11 +17,16 @@
  *   <AppMock app="mydash" />
  *   <AppMock app="openregister" caption />
  *   <AppMock app="decidesk" size="sm" />
+ *   <AppMock app="procest" sidebar={<SidebarMock kind="procest-xwiki" />} />
  *
  * Props:
- *   - app:     'mydash' | 'opencatalogi' | 'openconnector' |
- *              'openregister' | 'procest' | 'decidesk'  (required)
+ *   - app:     keyof VARIANTS                           (required)
  *   - size:    'sm' | 'md' (default)                    — frame width
+ *   - sidebar: ReactNode                                — renders inside
+ *              the right-edge overlay of the frame. Pass a SidebarMock
+ *              JSX to model a Nextcloud sidebar opened over this app
+ *              (e.g. xWiki tab over a Procest case). Any other node
+ *              renders verbatim
  *   - caption: boolean — adds a small app-name caption below the frame
  *   - className: string
  */
@@ -65,7 +70,7 @@ const VARIANTS = {
   zaakafhandelapp:  {Component: ZaakAfhandelAppMock,  label: 'ZaakAfhandelApp'},
 };
-export default function AppMock({app, size = 'md', caption = false, className}) {
+export default function AppMock({app, size = 'md', sidebar = null, caption = false, className}) {
   const variant = VARIANTS[app];
   if (!variant) {
     return (
@@ -77,11 +82,21 @@ export default function AppMock({app, size = 'md', caption = false, className})
     );
   }
   const {Component, label} = variant;
+  // The `sidebar` prop is forwarded to the variant Component, which
+  // renders it as a flex sibling of `.col` inside the variant's
+  // `.body`, taking the `.detail` slot. SidebarMock children get
+  // `embedded: true` so they drop their standalone .smFrame chrome
+  // and render as the bare `.detail.rich` panel that slots into
+  // .body. Variants that don't accept a sidebar prop (e.g. MyDash)
+  // ignore it; this keeps the change additive.
+  const renderedSidebar = React.isValidElement(sidebar)
+    ? React.cloneElement(sidebar, { embedded: true })
+    : sidebar;
   return (
     <div className={styles.am}>
       <figure className={[styles.figure, className].filter(Boolean).join(' ')}>
         <div className={[styles.frame, styles[`size-${size}`]].filter(Boolean).join(' ')}>
-          <Component />
+          <Component sidebar={renderedSidebar} />
         </div>
         {caption && <figcaption className={styles.caption}>{label}</figcaption>}
       </figure>

package/src/components/AppMock/AppMock.module.css CHANGED Viewed

@@ -142,6 +142,55 @@
   flex-shrink: 0;
 }
+/* Sidebar (enriched .detail) matches the real Nextcloud sidepanel:
+   header (icon + title + description + close), tabs, then content.
+   Used by SidebarMock embedded mode (slots into <body>'s flex layout
+   as a sibling of .col, taking the .detail slot) and by the kit
+   page templates section. */
+.am .detail.rich { padding: 0; gap: 0; }
+.am .detail.rich .sb-head {
+  display: flex; align-items: center; gap: 6px;
+  padding: 10px;
+  border-bottom: 1px solid var(--c-cobalt-100);
+}
+.am .detail.rich .sb-head .ico {
+  width: 16px; height: 16px;
+  border-radius: 50%;
+  background: var(--c-cobalt-50);
+  border: 1px solid var(--c-cobalt-200);
+  flex-shrink: 0;
+}
+.am .detail.rich .sb-head .meta {
+  flex: 1; display: flex; flex-direction: column; gap: 3px;
+  min-width: 0;
+}
+.am .detail.rich .sb-head .title { height: 6px; background: var(--c-cobalt-900); border-radius: 1px; width: 50%; }
+.am .detail.rich .sb-head .desc  { height: 3px; background: var(--c-cobalt-300); border-radius: 1px; width: 85%; }
+.am .detail.rich .sb-head .close { width: 8px; height: 8px; background: var(--c-cobalt-300); flex-shrink: 0; }
+.am .detail.rich .sb-tabs {
+  display: flex;
+  padding: 0 10px;
+  border-bottom: 1px solid var(--c-cobalt-100);
+}
+.am .detail.rich .sb-tab {
+  flex: 1; padding: 6px 0;
+  display: flex; flex-direction: column; align-items: center; gap: 3px;
+  border-bottom: 2px solid transparent;
+}
+.am .detail.rich .sb-tab.active { border-bottom-color: var(--c-blue-cobalt); }
+.am .detail.rich .sb-tab .ico { width: 7px; height: 7px; border-radius: 50%; background: var(--c-cobalt-300); }
+.am .detail.rich .sb-tab.active .ico { background: var(--c-cobalt-700); }
+.am .detail.rich .sb-tab .l { height: 3px; background: var(--c-cobalt-300); width: 24px; border-radius: 1px; }
+.am .detail.rich .sb-tab.active .l { background: var(--c-cobalt-700); }
+.am .detail.rich .sb-body { padding: 10px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
+.am .detail.rich .sb-label { height: 4px; background: var(--c-cobalt-700); width: 40%; border-radius: 1px; }
+.am .detail.rich .sb-input { height: 14px; background: white; border: 1px solid var(--c-cobalt-200); border-radius: 3px; }
+.am .detail.rich .sb-filter { display: flex; flex-direction: column; gap: 4px; }
+.am .detail.rich .sb-filter .lbl  { height: 3px; background: var(--c-cobalt-400); width: 30%; border-radius: 1px; }
+.am .detail.rich .sb-filter .field { height: 12px; background: white; border: 1px solid var(--c-cobalt-200); border-radius: 2px; }
 /* Generic content panel — white card with rounded corners. */
 .am .panel {
   background: white;

package/src/components/AppMock/variants/OpenRegisterMock.jsx CHANGED Viewed

@@ -10,7 +10,7 @@
 import React from 'react';
 import styles from '../AppMock.module.css';
-export default function OpenRegisterMock() {
+export default function OpenRegisterMock({ sidebar = null }) {
   return (
     <>
       <div className={styles.topbar}>
@@ -80,20 +80,25 @@ export default function OpenRegisterMock() {
             </div>
           </div>
         </div>
-        {/* Right detail rail */}
-        <div className={styles.detail}>
-          <div className={styles.row + ' ' + styles.head}></div>
-          <div className={styles.row}></div>
-          <div className={styles.row + ' ' + styles.short}></div>
-          <div style={{height: 8}}></div>
-          <div className={styles.row + ' ' + styles.head}></div>
-          <div className={styles.row + ' ' + styles.dark}></div>
-          <div className={styles.row}></div>
-          <div className={styles.row}></div>
-          <div className={styles.row + ' ' + styles.short}></div>
-          <div className={styles.row + ' ' + styles.accent}></div>
-          <div className={styles.row + ' ' + styles.short}></div>
-        </div>
+        {/* Right detail rail. When AppMock passes a `sidebar` prop
+            (typically a <SidebarMock kind="..." embedded />), it
+            renders as the rich detail rail instead of the placeholder
+            rows. */}
+        {sidebar || (
+          <div className={styles.detail}>
+            <div className={styles.row + ' ' + styles.head}></div>
+            <div className={styles.row}></div>
+            <div className={styles.row + ' ' + styles.short}></div>
+            <div style={{height: 8}}></div>
+            <div className={styles.row + ' ' + styles.head}></div>
+            <div className={styles.row + ' ' + styles.dark}></div>
+            <div className={styles.row}></div>
+            <div className={styles.row}></div>
+            <div className={styles.row + ' ' + styles.short}></div>
+            <div className={styles.row + ' ' + styles.accent}></div>
+            <div className={styles.row + ' ' + styles.short}></div>
+          </div>
+        )}
       </div>
     </>
   );

package/src/components/AppMock/variants/ProcestMock.jsx CHANGED Viewed

@@ -11,7 +11,7 @@
 import React from 'react';
 import styles from '../AppMock.module.css';
-export default function ProcestMock() {
+export default function ProcestMock({ sidebar = null }) {
   return (
     <>
       <div className={styles.topbar}>
@@ -81,6 +81,11 @@ export default function ProcestMock() {
             </div>
           </div>
         </div>
+        {/* Optional sidebar (typically a <SidebarMock kind="..." />)
+            renders here as a flex sibling of .col, taking the .detail
+            slot. Procest's case detail view doesn't ship a default
+            detail rail, so without the prop nothing extra renders. */}
+        {sidebar}
       </div>
     </>
   );

package/src/components/SidebarMock/SidebarMock.jsx ADDED Viewed

@@ -0,0 +1,208 @@
+/**
+ * <SidebarMock />
+ *
+ * Token-painted abstract of the Nextcloud right-side detail panel.
+ * Each Conduction app registers tabs into specific Nextcloud
+ * sidebars (Procest adds xWiki + Timeline tabs to the case sidebar,
+ * DocuDesk adds Signatures + PII Map to the document sidebar, and
+ * so on). A SidebarMock variant represents one such sidebar with
+ * one tab active.
+ *
+ * Markup matches the existing .detail.rich pattern that already
+ * lived in the AppMock kit anatomy: a .sb-head row (icon + meta of
+ * title + description + close), a .sb-tabs strip (one per registered
+ * tab, active marker on the current one), and a .sb-body. All
+ * styles live in AppMock.module.css under .am .detail.rich; the
+ * body atoms (smKv / smPerson / smStage / smLog / smPii) live in
+ * SidebarMock.module.css under .am .sb-body so they only apply
+ * inside a sidebar.
+ *
+ * Two render modes:
+ *
+ *   STANDALONE (default): wraps the .detail.rich panel in
+ *   <div class="am sm"> + .smFrame so it reads as a card on the
+ *   kit page. Use in marketing copy that talks about a single
+ *   sidebar surface in isolation.
+ *
+ *     <SidebarMock kind="procest-xwiki" />
+ *
+ *   EMBEDDED: drops the .smFrame wrapper, leaving just
+ *   <div class="detail rich">…</div>. Slots into the .body flex
+ *   layout of an AppMock variant as a sibling of .col, taking the
+ *   detail-rail position. Set automatically by AppMock when the
+ *   `sidebar` prop is a SidebarMock JSX element.
+ *
+ *     <AppMock app="procest" sidebar={<SidebarMock kind="procest-xwiki" />} />
+ *
+ * Status colour map matches WidgetMock and AppMock atoms:
+ *   mint     = stable / done / signed
+ *   orange   = active / pending / due soon
+ *   red      = blocked / overdue / failed
+ *   cobalt-200 = upcoming / idle / no action
+ *
+ * Props:
+ *   - kind:     one of VARIANTS keys      (required)
+ *   - embedded: boolean (default false)   — drop the standalone
+ *                                           .smFrame chrome so the
+ *                                           panel slots into
+ *                                           AppMock's .body layout
+ *   - className: string
+ */
+import React from 'react';
+import styles from './SidebarMock.module.css';
+import amStyles from '../AppMock/AppMock.module.css';
+import ProcestXWiki                  from './variants/ProcestXWiki.jsx';
+import ProcestTimeline               from './variants/ProcestTimeline.jsx';
+import DocuDeskSignatures            from './variants/DocuDeskSignatures.jsx';
+import DocuDeskPiiMap                from './variants/DocuDeskPiiMap.jsx';
+import OpenRegisterMetadata          from './variants/OpenRegisterMetadata.jsx';
+import OpenCatalogiPublicationHistory from './variants/OpenCatalogiPublicationHistory.jsx';
+import OpenConnectorRunDetail        from './variants/OpenConnectorRunDetail.jsx';
+import DeciDeskDecision              from './variants/DeciDeskDecision.jsx';
+import NextcloudActivity             from './variants/NextcloudActivity.jsx';
+/**
+ * Each VARIANTS entry carries:
+ *   Component: the JSX that fills the .sb-body
+ *   label:     human-readable name (used in caption / kit page)
+ *   tabs:      ordered list of tabs with one .active. The id is
+ *              decorative (rendered as a placeholder bar in .sb-tab .l)
+ *              but the active flag drives the highlight.
+ */
+const VARIANTS = {
+  'procest-xwiki': {
+    Component: ProcestXWiki,
+    label: 'Procest · Case sidebar, xWiki tab',
+    tabs: [
+      { id: 'activity',  active: false },
+      { id: 'xwiki',     active: true  },
+      { id: 'timeline',  active: false },
+      { id: 'documents', active: false },
+    ],
+  },
+  'procest-timeline': {
+    Component: ProcestTimeline,
+    label: 'Procest · Case sidebar, Timeline tab',
+    tabs: [
+      { id: 'activity',  active: false },
+      { id: 'xwiki',     active: false },
+      { id: 'timeline',  active: true  },
+      { id: 'documents', active: false },
+    ],
+  },
+  'docudesk-signatures': {
+    Component: DocuDeskSignatures,
+    label: 'DocuDesk · Document sidebar, Signatures tab',
+    tabs: [
+      { id: 'activity',      active: false },
+      { id: 'signatures',    active: true  },
+      { id: 'pii',           active: false },
+      { id: 'versions',      active: false },
+    ],
+  },
+  'docudesk-pii-map': {
+    Component: DocuDeskPiiMap,
+    label: 'DocuDesk · Document sidebar, PII map tab',
+    tabs: [
+      { id: 'activity',      active: false },
+      { id: 'signatures',    active: false },
+      { id: 'pii',           active: true  },
+      { id: 'versions',      active: false },
+    ],
+  },
+  'openregister-metadata': {
+    Component: OpenRegisterMetadata,
+    label: 'OpenRegister · Object sidebar, Metadata tab',
+    tabs: [
+      { id: 'activity', active: false },
+      { id: 'metadata', active: true  },
+      { id: 'audit',    active: false },
+    ],
+  },
+  'opencatalogi-publication-history': {
+    Component: OpenCatalogiPublicationHistory,
+    label: 'OpenCatalogi · Publication sidebar, History tab',
+    tabs: [
+      { id: 'activity', active: false },
+      { id: 'history',  active: true  },
+      { id: 'sources',  active: false },
+    ],
+  },
+  'openconnector-run-detail': {
+    Component: OpenConnectorRunDetail,
+    label: 'OpenConnector · Run sidebar, Logs tab',
+    tabs: [
+      { id: 'activity', active: false },
+      { id: 'logs',     active: true  },
+      { id: 'mapping',  active: false },
+    ],
+  },
+  'decidesk-decision': {
+    Component: DeciDeskDecision,
+    label: 'DeciDesk · Decision sidebar, Detail tab',
+    tabs: [
+      { id: 'activity', active: false },
+      { id: 'detail',   active: true  },
+      { id: 'actions',  active: false },
+    ],
+  },
+  'nextcloud-activity': {
+    Component: NextcloudActivity,
+    label: 'Nextcloud · Stock activity feed',
+    tabs: [
+      { id: 'activity', active: true  },
+      { id: 'comments', active: false },
+    ],
+  },
+};
+export default function SidebarMock({ kind, embedded = false, className }) {
+  const variant = VARIANTS[kind];
+  if (!variant) {
+    return (
+      <div className={[amStyles.am, styles.sm].filter(Boolean).join(' ')}>
+        <div className={styles.smFrame}>
+          <div style={{ padding: 12, color: 'var(--c-cobalt-400)', fontSize: 11 }}>Unknown sidebar: {kind}</div>
+        </div>
+      </div>
+    );
+  }
+  const { Component, tabs } = variant;
+  const panel = (
+    <div className={[amStyles.detail, amStyles.rich].join(' ')}>
+      <div className={amStyles['sb-head']}>
+        <div className={amStyles.ico}></div>
+        <div className={amStyles.meta}>
+          <div className={amStyles.title}></div>
+          <div className={amStyles.desc}></div>
+        </div>
+        <div className={amStyles.close}></div>
+      </div>
+      {tabs && tabs.length > 0 && (
+        <div className={amStyles['sb-tabs']}>
+          {tabs.map((t, i) => (
+            <div key={t.id || i} className={[amStyles['sb-tab'], t.active && amStyles.active].filter(Boolean).join(' ')}>
+              <div className={amStyles.ico}></div>
+              <div className={amStyles.l}></div>
+            </div>
+          ))}
+        </div>
+      )}
+      <div className={amStyles['sb-body']}>
+        <Component />
+      </div>
+    </div>
+  );
+  if (embedded) return panel;
+  return (
+    <div className={[amStyles.am, styles.sm, className].filter(Boolean).join(' ')}>
+      <div className={styles.smFrame}>
+        {panel}
+      </div>
+    </div>
+  );
+}

package/src/components/SidebarMock/SidebarMock.module.css ADDED Viewed

@@ -0,0 +1,200 @@
+/**
+ * <SidebarMock /> styles.
+ *
+ * The sidebar chassis (.detail.rich, .sb-head, .sb-tabs, .sb-body and
+ * its built-in atoms .sb-input / .sb-filter / .sb-label) lives in
+ * AppMock/AppMock.module.css. SidebarMock reuses that module so the
+ * panel renders identically whether it is embedded inside an AppMock
+ * (taking the .detail slot in .body's flex layout) or rendered
+ * standalone for kit-page specimens.
+ *
+ * What lives here:
+ *
+ *   .smFrame  — the standalone wrapper card (white box, shadow,
+ *               radius, fixed size). Used only when rendering the
+ *               sidebar standalone in marketing copy or kit pages;
+ *               embedded mode skips it so the panel slots into
+ *               .body's flex layout untouched.
+ *
+ *   .am .sb-body atoms — extra body-level atoms beyond what
+ *               AppMock.module.css already provides under .sb-body
+ *               (.sb-input, .sb-filter, .sb-label). The atoms here
+ *               cover the rest of the marketing surfaces: key/value
+ *               pairs (smKv), person rows with status pip (smPerson),
+ *               stage timelines (smStage), log lines (smLog), and
+ *               PII-redaction pill maps (smPii).
+ */
+.am.sm { display: contents; }
+/* Standalone wrapper card. Inside, the .detail.rich panel renders
+   identically to its embedded twin, just clipped to the smFrame box. */
+.am .smFrame {
+  width: 300px;
+  height: 400px;
+  background: white;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--c-cobalt-100);
+  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+/* Inside .smFrame the .detail.rich child needs to fill the box; the
+   default .detail width: 26% rule is meant for an embedded layout so
+   we override here. */
+.am .smFrame > .detail.rich {
+  width: 100%;
+  min-width: 0;
+  flex: 1;
+  border-left: none;
+}
+/* ---- Body atoms beyond the AppMock-provided sb-input / sb-filter ---- */
+/* Generic row block. Sized by class modifier; defaults to thin neutral. */
+.am .sb-body .row {
+  height: 3px;
+  background: var(--c-cobalt-200);
+  border-radius: 1px;
+  flex-shrink: 0;
+  width: 100%;
+}
+.am .sb-body .row.head {
+  height: 5px;
+  width: 55%;
+  background: var(--c-cobalt-700);
+  margin-bottom: 4px;
+}
+.am .sb-body .row.short { width: 35%; }
+.am .sb-body .row.med   { width: 70%; }
+.am .sb-body .row.dark  { background: var(--c-cobalt-700); }
+.am .sb-body .row.accent { background: var(--c-orange-knvb); }
+/* Section break: thin horizontal rule between sub-sections. */
+.am .sb-body .smBreak {
+  height: 1px;
+  background: var(--c-cobalt-100);
+  margin: 4px 0;
+}
+/* Subhead: short bold-weight bar that introduces a new section. */
+.am .sb-body .smSub {
+  height: 4px;
+  width: 40%;
+  background: var(--c-cobalt-700);
+  border-radius: 1px;
+  margin-top: 4px;
+}
+/* Key-value list (used for metadata tabs). Label cobalt-400 short bar
+   plus longer cobalt-700 value bar on the same row. */
+.am .sb-body .smKv {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.am .sb-body .smKv .k {
+  height: 3px;
+  width: 30%;
+  background: var(--c-cobalt-400);
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+.am .sb-body .smKv .v {
+  flex: 1;
+  height: 3px;
+  background: var(--c-cobalt-700);
+  border-radius: 1px;
+}
+/* Person row (signatures, comments, history). Avatar + two text rows
+   + optional status pip. .b/.c/.d/.e modifiers shift the avatar to
+   the matching family colour. .pending / .blocked modifiers shift
+   the pip to orange / red. */
+.am .sb-body .smPerson {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.am .sb-body .smPerson .av {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--c-mint-300);
+  flex-shrink: 0;
+}
+.am .sb-body .smPerson.b .av { background: var(--c-lavender-300); }
+.am .sb-body .smPerson.c .av { background: var(--c-orange-knvb); }
+.am .sb-body .smPerson.d .av { background: var(--c-forest-300); }
+.am .sb-body .smPerson.e .av { background: var(--c-terracotta-300); }
+.am .sb-body .smPerson .lines {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.am .sb-body .smPerson .l1 { height: 3px; width: 70%; background: var(--c-cobalt-700); border-radius: 1px; }
+.am .sb-body .smPerson .l2 { height: 2px; width: 50%; background: var(--c-cobalt-300); border-radius: 1px; }
+.am .sb-body .smPerson .pip {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--c-mint-500);
+  flex-shrink: 0;
+}
+.am .sb-body .smPerson.pending .pip { background: var(--c-orange-knvb); }
+.am .sb-body .smPerson.blocked .pip { background: var(--c-red-vermillion); }
+/* Stage timeline (case sidebar, Timeline tab). Vertical list with a
+   stage hex on the left and two text rows. Modifiers .now / .late /
+   .todo shift the hex colour. */
+.am .sb-body .smStage {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.am .sb-body .smStage .h {
+  width: 10px;
+  height: 11px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-mint-500);
+  flex-shrink: 0;
+}
+.am .sb-body .smStage.now .h    { background: var(--c-orange-knvb); }
+.am .sb-body .smStage.todo .h   { background: var(--c-cobalt-200); }
+.am .sb-body .smStage.late .h   { background: var(--c-red-vermillion); }
+.am .sb-body .smStage .lines    { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.am .sb-body .smStage .l1       { height: 3px; width: 60%; background: var(--c-cobalt-700); border-radius: 1px; }
+.am .sb-body .smStage .l2       { height: 2px; width: 40%; background: var(--c-cobalt-300); border-radius: 1px; }
+/* Log line (run-detail sidebar). Short timestamp bar + message bar.
+   .warn / .error tint the timestamp to orange / red so the eye can
+   scan severity at a glance. */
+.am .sb-body .smLog {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.am .sb-body .smLog .ts { width: 22px; height: 3px; background: var(--c-cobalt-400); border-radius: 1px; flex-shrink: 0; }
+.am .sb-body .smLog .msg { flex: 1; height: 3px; background: var(--c-cobalt-700); border-radius: 1px; }
+.am .sb-body .smLog.warn .ts { background: var(--c-orange-knvb); }
+.am .sb-body .smLog.error .ts { background: var(--c-red-vermillion); }
+/* PII redaction map (DocuDesk PII tab). Inline pills marking spans
+   in a paragraph; .redacted = applied (red), .suggested = proposed
+   (orange), default = neutral text. */
+.am .sb-body .smPiiBlock {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.am .sb-body .smPii {
+  height: 6px;
+  background: var(--c-cobalt-200);
+  border-radius: 1px;
+}
+.am .sb-body .smPii.redacted { background: var(--c-red-vermillion); }
+.am .sb-body .smPii.suggested { background: var(--c-orange-knvb); }

package/src/components/SidebarMock/variants/DeciDeskDecision.jsx ADDED Viewed

@@ -0,0 +1,36 @@
+/**
+ * DeciDesk · decision sidebar, Detail tab.
+ *
+ * Body of a single decision: title, decision summary paragraph, then
+ * structured fields (date, source meeting, decision-maker) and an
+ * action-items section showing who owns the follow-up.
+ */
+import React from 'react';
+import styles from '../SidebarMock.module.css';
+export default function DeciDeskDecision() {
+  return (
+    <>
+      <div className={[styles.row, styles.head].join(' ')}></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.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.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, styles.pending].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/DocuDeskPiiMap.jsx ADDED Viewed

@@ -0,0 +1,36 @@
+/**
+ * DocuDesk · document sidebar, PII map tab.
+ *
+ * Inline pills marking redacted spans (red) and suggested redactions
+ * (orange) within paragraphs. Reads as "here is what got covered up".
+ * Below: a key/value list of PII categories detected (BSN, IBAN, etc.)
+ * with counts.
+ */
+import React from 'react';
+import styles from '../SidebarMock.module.css';
+export default function DocuDeskPiiMap() {
+  return (
+    <>
+      <div className={[styles.row, styles.head].join(' ')}></div>
+      <div className={styles.smPiiBlock}>
+        <div className={styles.smPii} style={{ width: 30 }}></div>
+        <div className={[styles.smPii, styles.redacted].join(' ')} style={{ width: 22 }}></div>
+        <div className={styles.smPii} style={{ width: 40 }}></div>
+        <div className={[styles.smPii, styles.suggested].join(' ')} style={{ width: 18 }}></div>
+        <div className={styles.smPii} style={{ width: 26 }}></div>
+        <div className={[styles.smPii, styles.redacted].join(' ')} style={{ width: 30 }}></div>
+        <div className={styles.smPii} style={{ width: 16 }}></div>
+        <div className={[styles.smPii, styles.suggested].join(' ')} style={{ width: 34 }}></div>
+        <div className={styles.smPii} style={{ width: 22 }}></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>
+      <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/DocuDeskSignatures.jsx ADDED Viewed

@@ -0,0 +1,43 @@
+/**
+ * DocuDesk · document sidebar, Signatures tab.
+ *
+ * List of recipients with status pip: signed (mint), pending (orange),
+ * blocked / declined (red). Avatar colour mix matches AppMock palette.
+ */
+import React from 'react';
+import styles from '../SidebarMock.module.css';
+export default function DocuDeskSignatures() {
+  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.c, styles.pending].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, styles.pending].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, 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>
+    </>
+  );
+}

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>
+    </>
+  );
+}