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

@conduction/docusaurus-preset 2.3.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 (7) hide show

package/package.json +1 -1
package/src/components/AppMock/AppMock.jsx +9 -13
package/src/components/AppMock/AppMock.module.css +49 -21
package/src/components/AppMock/variants/OpenRegisterMock.jsx +20 -15
package/src/components/AppMock/variants/ProcestMock.jsx +6 -1
package/src/components/SidebarMock/SidebarMock.jsx +39 -23
package/src/components/SidebarMock/SidebarMock.module.css +89 -141

package/package.json CHANGED Viewed

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

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

@@ -82,25 +82,21 @@ export default function AppMock({app, size = 'md', sidebar = null, caption = fal
     );
   }
   const {Component, label} = variant;
-  // The `sidebar` prop renders any node as a Nextcloud-style overlay
-  // panel pinned to the right edge of the frame. Typically a
-  // <SidebarMock kind="..." />; the SidebarMock component automatically
-  // drops its standalone chrome via the `embedded` flag we pass here.
-  // Anything else (custom JSX, an image, etc.) renders verbatim inside
-  // the overlay slot.
+  // 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}`], renderedSidebar && styles.withSidebar].filter(Boolean).join(' ')}>
-          <Component />
-          {renderedSidebar && (
-            <div className={styles.sidebarOverlay} aria-label="Sidebar overlay">
-              {renderedSidebar}
-            </div>
-          )}
+        <div className={[styles.frame, styles[`size-${size}`]].filter(Boolean).join(' ')}>
+          <Component sidebar={renderedSidebar} />
         </div>
         {caption && <figcaption className={styles.caption}>{label}</figcaption>}
       </figure>

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

@@ -47,27 +47,6 @@
 .am .size-md { max-width: 720px; }
 .am .size-lg { max-width: 960px; }
-/* Sidebar overlay: when AppMock receives a `sidebar` prop, the
-   passed JSX renders pinned to the right edge of the frame, full
-   height, modeling a Nextcloud detail panel sliding over the app.
-   The .withSidebar modifier on .frame is a hook for variants that
-   want to dim the underlying canvas; today it doesn't add any
-   styles itself. */
-.am .frame .sidebarOverlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 32%;
-  min-width: 200px;
-  background: white;
-  border-left: 1px solid var(--c-cobalt-200);
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
 .am .caption {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
@@ -163,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 CHANGED Viewed

@@ -8,24 +8,32 @@
  * 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 panel in <div class="am sm"> with
- *   a .smFrame card around it. Use in kit-page specimens or marketing
- *   copy that talks about a single sidebar surface in isolation.
+ *   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 frame so the panel slots directly into the
- *   .sidebarOverlay slot inside an AppMock frame. Set automatically
- *   by AppMock when the `sidebar` prop is a SidebarMock JSX element.
+ *   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" />} />
  *
- * Header bar (title + close) and tab strip are chassis. Body content
- * is per-variant: the JSX file under variants/ provides just the body
- * children, the chassis wraps it.
- *
  * Status colour map matches WidgetMock and AppMock atoms:
  *   mint     = stable / done / signed
  *   orange   = active / pending / due soon
@@ -34,9 +42,10 @@
  *
  * Props:
  *   - kind:     one of VARIANTS keys      (required)
- *   - embedded: boolean (default false)   — drop the standalone chrome
- *                                           so this can render inside
- *                                           an AppMock overlay slot
+ *   - embedded: boolean (default false)   — drop the standalone
+ *                                           .smFrame chrome so the
+ *                                           panel slots into
+ *                                           AppMock's .body layout
  *   - className: string
  */
@@ -56,10 +65,10 @@ import NextcloudActivity             from './variants/NextcloudActivity.jsx';
 /**
  * Each VARIANTS entry carries:
- *   Component: the JSX that fills the body
+ *   Component: the JSX that fills the .sb-body
  *   label:     human-readable name (used in caption / kit page)
- *   tabs:      ordered list of tab labels with one marked active. The
- *              labels are decorative (kit page renders width-fixed pills)
+ *   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 = {
@@ -162,19 +171,26 @@ export default function SidebarMock({ kind, embedded = false, className }) {
   }
   const { Component, tabs } = variant;
   const panel = (
-    <div className={styles.smPanel}>
-      <div className={styles.smHead}>
-        <div className={styles.smTitle}></div>
-        <div className={styles.smClose}></div>
+    <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={styles.smTabs}>
+        <div className={amStyles['sb-tabs']}>
           {tabs.map((t, i) => (
-            <div key={t.id || i} className={[styles.smTab, t.active && styles.smTabActive].filter(Boolean).join(' ')}></div>
+            <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={styles.smBody}>
+      <div className={amStyles['sb-body']}>
         <Component />
       </div>
     </div>

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

@@ -1,29 +1,34 @@
 /**
  * <SidebarMock /> styles.
  *
- * Models the Nextcloud right-side detail panel (the surface where
- * apps register tabs: Activity, Comments, plus app-specific extensions
- * like Procest's xWiki tab or DocuDesk's Signatures tab).
+ * 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.
  *
- * Two render modes share the same panel internals:
+ * What lives here:
  *
- *   1. STANDALONE (default): the panel renders inside <div class="am sm">
- *      with .smFrame around it (white card, shadow, border-radius). Used
- *      in kit-page specimens and inline marketing copy.
+ *   .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.
  *
- *   2. EMBEDDED: the panel renders inside an <AppMock>'s .sidebarOverlay
- *      via the AppMock `sidebar` prop. The overlay positions absolutely
- *      against the right of the frame and extends full height. SidebarMock
- *      drops the frame/shadow/radius in this mode so it slots cleanly.
- *
- * Both modes pass through the same atom toolkit defined under .smBody
- * here (rows, lists, kvs, log lines). Body content is per-variant.
+ *   .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 chrome ---- */
+/* 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;
@@ -36,110 +41,46 @@
   flex-direction: column;
 }
-/* ---- Panel internals (used in both modes) ---- */
-.am .smPanel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-  background: white;
-}
-/* Header: title bar plus close button. */
-.am .smHead {
-  padding: 10px 12px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-bottom: 1px solid var(--c-cobalt-100);
-  flex-shrink: 0;
-}
-.am .smHead .smTitle {
-  flex: 1;
-  height: 5px;
-  background: var(--c-cobalt-700);
-  border-radius: 1px;
-}
-.am .smHead .smClose {
-  width: 10px;
-  height: 10px;
-  background: var(--c-cobalt-300);
-  border-radius: 1px;
-  flex-shrink: 0;
-}
-/* Tab strip: each tab is a width-fixed pill. Active tab is cobalt with
-   a 2px underline that crosses the .smTabs bottom border. */
-.am .smTabs {
-  display: flex;
-  padding: 0 12px;
-  gap: 8px;
-  border-bottom: 1px solid var(--c-cobalt-100);
-  flex-shrink: 0;
-}
-.am .smTab {
-  height: 4px;
-  width: 28px;
-  background: var(--c-cobalt-200);
-  border-radius: 1px;
-  margin: 10px 0 8px;
-  position: relative;
-}
-.am .smTab.smTabActive {
-  background: var(--c-blue-cobalt);
-}
-.am .smTab.smTabActive::after {
-  content: "";
-  position: absolute;
-  bottom: -8px;
-  left: -2px;
-  right: -2px;
-  height: 2px;
-  background: var(--c-blue-cobalt);
-  border-radius: 1px;
-}
-/* Body: scrolling region with stacked sections. */
-.am .smBody {
+/* 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;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-height: 0;
-  overflow: hidden;
+  border-left: none;
 }
-/* ---- Body atoms ---- */
+/* ---- Body atoms beyond the AppMock-provided sb-input / sb-filter ---- */
-/* Generic row. Defaults to a thin neutral bar. Modifiers below tweak it. */
-.am .smBody .row {
+/* 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 .smBody .row.head {
+.am .sb-body .row.head {
   height: 5px;
   width: 55%;
   background: var(--c-cobalt-700);
   margin-bottom: 4px;
 }
-.am .smBody .row.short { width: 35%; }
-.am .smBody .row.med   { width: 70%; }
-.am .smBody .row.dark  { background: var(--c-cobalt-700); }
-.am .smBody .row.accent { background: var(--c-orange-knvb); }
+.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: horizontal rule with a bit of vertical breathing. */
-.am .smBody .smBreak {
+/* Section break: thin horizontal rule between sub-sections. */
+.am .sb-body .smBreak {
   height: 1px;
   background: var(--c-cobalt-100);
   margin: 4px 0;
 }
-/* Subhead: small block-level title that introduces a section. */
-.am .smBody .smSub {
+/* Subhead: short bold-weight bar that introduces a new section. */
+.am .sb-body .smSub {
   height: 4px;
   width: 40%;
   background: var(--c-cobalt-700);
@@ -147,106 +88,113 @@
   margin-top: 4px;
 }
-/* Key-value list (used for metadata sidebars). Each row is a label +
-   value pair. Label is a short cobalt-400 bar, value is a longer
-   cobalt-700 bar. */
-.am .smBody .smKv {
+/* 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 .smBody .smKv .k {
+.am .sb-body .smKv .k {
   height: 3px;
   width: 30%;
   background: var(--c-cobalt-400);
   border-radius: 1px;
   flex-shrink: 0;
 }
-.am .smBody .smKv .v {
+.am .sb-body .smKv .v {
   flex: 1;
   height: 3px;
   background: var(--c-cobalt-700);
   border-radius: 1px;
 }
-/* Person row (used for signatures, comments, talk). Avatar plus two
-   text rows plus an optional status pip on the right. */
-.am .smBody .smPerson {
+/* 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 .smBody .smPerson .av {
+.am .sb-body .smPerson .av {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: var(--c-mint-300);
   flex-shrink: 0;
 }
-.am .smBody .smPerson.b .av { background: var(--c-lavender-300); }
-.am .smBody .smPerson.c .av { background: var(--c-orange-knvb); }
-.am .smBody .smPerson.d .av { background: var(--c-forest-300); }
-.am .smBody .smPerson.e .av { background: var(--c-terracotta-300); }
-.am .smBody .smPerson .lines {
+.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 .smBody .smPerson .l1 { height: 3px; width: 70%; background: var(--c-cobalt-700); border-radius: 1px; }
-.am .smBody .smPerson .l2 { height: 2px; width: 50%; background: var(--c-cobalt-300); border-radius: 1px; }
-.am .smBody .smPerson .pip {
+.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 .smBody .smPerson.pending .pip { background: var(--c-orange-knvb); }
-.am .smBody .smPerson.blocked .pip { background: var(--c-red-vermillion); }
+.am .sb-body .smPerson.pending .pip { background: var(--c-orange-knvb); }
+.am .sb-body .smPerson.blocked .pip { background: var(--c-red-vermillion); }
-/* Stage timeline: vertical list with a left-side rail and stage hexes. */
-.am .smBody .smStage {
+/* 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 .smBody .smStage .h {
+.am .sb-body .smStage .h {
   width: 10px;
   height: 11px;
   clip-path: var(--hex-pointy-top);
   background: var(--c-mint-500);
   flex-shrink: 0;
 }
-.am .smBody .smStage.now .h    { background: var(--c-orange-knvb); }
-.am .smBody .smStage.todo .h   { background: var(--c-cobalt-200); }
-.am .smBody .smStage.late .h   { background: var(--c-red-vermillion); }
-.am .smBody .smStage .lines    { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.am .smBody .smStage .l1       { height: 3px; width: 60%; background: var(--c-cobalt-700); border-radius: 1px; }
-.am .smBody .smStage .l2       { height: 2px; width: 40%; background: var(--c-cobalt-300); border-radius: 1px; }
-/* Log line: monospace-ish row with a status colour at the start. */
-.am .smBody .smLog {
+.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 .smBody .smLog .ts { width: 22px; height: 3px; background: var(--c-cobalt-400); border-radius: 1px; flex-shrink: 0; }
-.am .smBody .smLog .msg { flex: 1; height: 3px; background: var(--c-cobalt-700); border-radius: 1px; }
-.am .smBody .smLog.warn .ts { background: var(--c-orange-knvb); }
-.am .smBody .smLog.error .ts { background: var(--c-red-vermillion); }
+.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 tag: a small inline pill for redacted content. */
-.am .smBody .smPiiBlock {
+/* 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 .smBody .smPii {
+.am .sb-body .smPii {
   height: 6px;
   background: var(--c-cobalt-200);
   border-radius: 1px;
 }
-.am .smBody .smPii.redacted { background: var(--c-red-vermillion); }
-.am .smBody .smPii.suggested { background: var(--c-orange-knvb); }
+.am .sb-body .smPii.redacted { background: var(--c-red-vermillion); }
+.am .sb-body .smPii.suggested { background: var(--c-orange-knvb); }