@conduction/docusaurus-preset 2.4.0 → 2.4.2

package/package.json

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

package/src/components/MockScene/MockScene.jsx

@@ -1,66 +1,86 @@
 /**
  * <MockScene />
  *
- * Marketing-surface composition. A SidebarMock anchors the centre,
- * three to five WidgetMocks float around it on a tinted cobalt-50
- * surface with a soft hex-network watermark. Reach for this when a
- * card or hero needs to show "data surfaced across the whole
- * workspace": one sidebar + several widgets, each carrying a real
- * integration icon, all lit on the same surface.
+ * Free-form positioning surface for assembling overlap shots out of
+ * WidgetMocks and SidebarMocks. The scene itself is a transparent
+ * stage; the caller decides the canvas size and where each item
+ * lands. Multiple sidebars and widgets can share a scene, can be
+ * different sizes, and can overlap as needed.
  *
- * Sibling to AppMock + WidgetMock + SidebarMock in the mock family.
- * AppMock paints a single product surface with chassis chrome.
- * WidgetMock paints a single dashboard tile. SidebarMock paints a
- * single detail panel. MockScene paints the overlap.
+ * Sibling to AppMock + WidgetMock + SidebarMock. AppMock paints a
+ * single product surface, WidgetMock one tile, SidebarMock one detail
+ * panel; MockScene paints the overlap. No background, no rotation,
+ * no centred-anchor pattern; each item carries its own shadow and
+ * lifts off whatever card the scene sits inside.
  *
  * Usage:
  *
  *   <MockScene
- *     sidebar={<SidebarMock kind="openregister-metadata" />}
- *     widgets={[
- *       { node: <WidgetMock kind="nextcloud-mail" />,     pos: 'top-left' },
- *       { node: <WidgetMock kind="nextcloud-files" />,    pos: 'top-right' },
- *       { node: <WidgetMock kind="openregister-activity" />, pos: 'bottom-right' },
+ *     width={960}
+ *     height={420}
+ *     items={[
+ *       { type: 'widget',  kind: 'nextcloud-mail',         x: 0,   y: 0,   size: 'sm' },
+ *       { type: 'sidebar', kind: 'openregister-metadata',  x: 220, y: 30,  size: 'md' },
+ *       { type: 'widget',  kind: 'openregister-activity',  x: 540, y: 80,  size: 'md' },
+ *       { type: 'sidebar', kind: 'procest-xwiki',          x: 700, y: 0,   size: 'sm' },
  *     ]}
  *   />
  *
- * Each widget entry is { node, pos } where `pos` selects a corner of
- * the stage:
- *   'top-left' | 'top-right' |
- *   'middle-left' | 'middle-right' |
- *   'bottom-left' | 'bottom-right'
+ * Each item:
+ *   - type:  'widget' | 'sidebar'
+ *   - kind:  variant slug (see WidgetMock or SidebarMock VARIANTS)
+ *   - x, y:  pixel offset from the scene's top-left corner
+ *   - size:  'sm' | 'md' | 'lg' (defaults to 'md' for both types)
+ *   - z:     z-index override (defaults to array order, later items
+ *             render on top)
  *
- * Default rotations and offsets give each widget a slight tilt so
- * the composition reads as playfully arranged rather than gridded.
+ * Caller can also pass a `style` field on an item for inline overrides
+ * beyond what `size` provides (custom widths, transforms, etc.). The
+ * inline style is merged onto the item wrapper, so anything
+ * position-related on the wrapper (left, top, z-index) takes
+ * precedence over the caller's style.
  *
  * Props:
- *   - sidebar: ReactNode                      (typically <SidebarMock />)
- *   - widgets: Array<{node: ReactNode, pos: string}>
- *   - compact: boolean (default false)        — tighter scene for use
- *                                               inside a card
+ *   - items:     Array of item descriptors (see above)
+ *   - width:     scene width in px (default 960)
+ *   - height:    scene height in px (default 420)
  *   - className: string
  */
 
 import React from 'react';
 import styles from './MockScene.module.css';
 import amStyles from '../AppMock/AppMock.module.css';
+import WidgetMock from '../WidgetMock/WidgetMock.jsx';
+import SidebarMock from '../SidebarMock/SidebarMock.jsx';
 
-export default function MockScene({ sidebar, widgets = [], compact = false, className }) {
+function renderItem(item) {
+  const size = item.size || 'md';
+  if (item.type === 'widget') {
+    return <WidgetMock kind={item.kind} size={size} />;
+  }
+  if (item.type === 'sidebar') {
+    return <SidebarMock kind={item.kind} size={size} />;
+  }
+  return item.node || null;
+}
+
+export default function MockScene({ items = [], width = 960, height = 420, className }) {
   return (
     <div className={[amStyles.am, styles.scene, className].filter(Boolean).join(' ')}>
-      <div className={[styles.sceneFrame, compact && styles.compact].filter(Boolean).join(' ')}>
-        <div className={styles.sceneStage}>
-          {widgets.map((w, i) => (
-            <div key={i} className={styles.sceneFloat} data-pos={w.pos || 'top-left'}>
-              {w.node}
-            </div>
-          ))}
-          {sidebar && (
-            <div className={styles.sceneCenter}>
-              {sidebar}
+      <div className={styles.sceneFrame} style={{ width, height }}>
+        {items.map((item, i) => {
+          const wrapperStyle = {
+            ...(item.style || {}),
+            left: item.x || 0,
+            top: item.y || 0,
+            zIndex: item.z != null ? item.z : i,
+          };
+          return (
+            <div key={i} className={styles.sceneItem} style={wrapperStyle}>
+              {renderItem(item)}
             </div>
-          )}
-        </div>
+          );
+        })}
       </div>
     </div>
   );

package/src/components/MockScene/MockScene.module.css

@@ -1,99 +1,40 @@
 /**
  * <MockScene /> styles.
  *
- * Marketing-surface composition. A single sidebar sits at the centre
- * (slightly larger than its standalone size), with three to five
- * widgets floating around it at staggered offsets and rotations.
- * Background: a tinted cobalt-50 surface with a soft hex-network
- * watermark, so the scene reads as "the workspace" without committing
- * to a specific app frame.
+ * Free-form positioning surface. Each item in the items[] prop renders
+ * inside a `.sceneItem` wrapper that's absolutely positioned via
+ * inline style (`left`, `top`, `z-index`). The scene itself is a
+ * transparent stage; layout is up to the caller.
  *
- * Use as the illustration on a card that talks about cross-cutting
- * integration ("typed data, surfaced everywhere"; "every register,
- * every workspace surface"). The scene is layout-only; the props pass
- * through fully-formed SidebarMock + WidgetMock JSX.
+ * No background, no padding, no rotation. The mocks themselves carry
+ * their own borders and shadows so they read as panels lifted off
+ * the surrounding card.
  */
 
 .am.scene { display: contents; }
 
 .am .sceneFrame {
   position: relative;
-  background: var(--c-cobalt-50);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--c-cobalt-100);
-  padding: var(--space-8);
-  min-height: 360px;
-  overflow: hidden;
-  isolation: isolate;
+  /* Width and height come from inline style on the rendered element
+     so the caller decides the canvas size per scene. */
 }
 
-/* Soft hex-network watermark using radial gradients on top of cobalt-50.
-   Cheap visual texture; no need to bring HexNetwork in for this. */
-.am .sceneFrame::before {
-  content: "";
+.am .sceneItem {
   position: absolute;
-  inset: 0;
-  background-image:
-    radial-gradient(circle at 20% 25%, var(--c-cobalt-100) 0, transparent 35%),
-    radial-gradient(circle at 80% 70%, var(--c-cobalt-100) 0, transparent 35%),
-    radial-gradient(circle at 50% 90%, var(--c-cobalt-100) 0, transparent 30%);
-  opacity: 0.5;
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* Stage holds the sidebar at the centre and widgets at offsets.
-   position: relative so child position: absolute resolves here. */
-.am .sceneStage {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 360px;
-  z-index: 1;
-}
-
-/* Centre sidebar: anchored, slightly enlarged, drop-shadow for lift. */
-.am .sceneCenter {
-  position: relative;
-  z-index: 4;
-  filter: drop-shadow(0 16px 32px rgba(15, 35, 75, 0.2));
-}
-.am .sceneCenter > .am > .smFrame,
-.am .sceneCenter > .smFrame {
-  width: 320px;
-  height: 440px;
-}
-
-/* Floating widget wrappers. Each one positions absolutely relative
-   to .sceneStage; the data-pos attribute maps to a corner. */
-.am .sceneFloat {
-  position: absolute;
-  z-index: 2;
-  filter: drop-shadow(0 12px 22px rgba(15, 35, 75, 0.15));
-  transition: transform 200ms;
-}
-
-.am .sceneFloat[data-pos="top-left"]     { top: 0;       left: 0;       transform: rotate(-3deg); }
-.am .sceneFloat[data-pos="top-right"]    { top: 4%;      right: 0;      transform: rotate(2deg); }
-.am .sceneFloat[data-pos="bottom-left"]  { bottom: 0;    left: 6%;      transform: rotate(2deg); }
-.am .sceneFloat[data-pos="bottom-right"] { bottom: 0;    right: 0;      transform: rotate(-2deg); }
-.am .sceneFloat[data-pos="middle-left"]  { top: 40%;     left: 0;       transform: translateY(-50%) rotate(-2deg); }
-.am .sceneFloat[data-pos="middle-right"] { top: 40%;     right: 0;      transform: translateY(-50%) rotate(2deg); }
-
-/* Widget frames inside floats: scale down a hair and drop their own
-   shadow so the float-level shadow does the heavy lifting. */
-.am .sceneFloat .wmFrame {
-  box-shadow: none;
-  width: 240px;
-}
-
-/* Tighter scenes for cards: pass `compact` to the component. */
-.am .sceneFrame.compact {
-  padding: var(--space-6);
-  min-height: 300px;
+  /* `left`, `top`, and optionally `z-index` are set inline by the
+     component from the item's x/y/z values. */
+}
+
+/* Widgets inside a scene drop their MyDash-style cobalt-900 dashboard
+   chrome. WidgetMock by default frames its tile in dark cobalt to
+   simulate "this widget is sitting on a MyDash board"; that read is
+   useful in widget-mock.html (the kit context) but inside a scene the
+   surrounding card already provides context, and the dark frame just
+   reads as a heavy border. So inside .sceneItem the .wmFrame becomes
+   white-on-white with a soft shadow, matching the SidebarMock chrome. */
+.am .sceneItem .wmFrame {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  padding: 12px;
+  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.1);
 }
-.am .sceneFrame.compact .sceneStage { min-height: 300px; }
-.am .sceneFrame.compact .sceneCenter > .am > .smFrame,
-.am .sceneFrame.compact .sceneCenter > .smFrame { width: 260px; height: 360px; }
-.am .sceneFrame.compact .sceneFloat .wmFrame { width: 200px; }

package/src/components/SidebarMock/SidebarMock.jsx

@@ -42,6 +42,13 @@
  *
  * Props:
  *   - kind:     one of VARIANTS keys      (required)
+ *   - size:     'sm' | 'md' (default) | 'lg'   — standalone frame size
+ *                                                 (240x320 / 300x400 /
+ *                                                 360x480). Ignored in
+ *                                                 embedded mode (the
+ *                                                 panel sizes itself
+ *                                                 to AppMock's .body
+ *                                                 layout)
  *   - embedded: boolean (default false)   — drop the standalone
  *                                           .smFrame chrome so the
  *                                           panel slots into
@@ -168,12 +175,12 @@ const VARIANTS = {
   },
 };
 
-export default function SidebarMock({ kind, embedded = false, className }) {
+export default function SidebarMock({ kind, size = 'md', embedded = false, className }) {
   const variant = VARIANTS[kind];
   if (!variant) {
     return (
       <div className={[amStyles.am, styles.sm].filter(Boolean).join(' ')}>
-        <div className={styles.smFrame}>
+        <div className={[styles.smFrame, styles[`sb-size-${size}`]].filter(Boolean).join(' ')}>
           <div style={{ padding: 12, color: 'var(--c-cobalt-400)', fontSize: 11 }}>Unknown sidebar: {kind}</div>
         </div>
       </div>
@@ -214,7 +221,7 @@ export default function SidebarMock({ kind, embedded = false, className }) {
 
   return (
     <div className={[amStyles.am, styles.sm, className].filter(Boolean).join(' ')}>
-      <div className={styles.smFrame}>
+      <div className={[styles.smFrame, styles[`sb-size-${size}`]].filter(Boolean).join(' ')}>
         {panel}
       </div>
     </div>

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

@@ -28,10 +28,9 @@
 .am.sm { display: contents; }
 
 /* Standalone wrapper card. Inside, the .detail.rich panel renders
-   identically to its embedded twin, just clipped to the smFrame box. */
+   identically to its embedded twin, just clipped to the smFrame box.
+   Width/height come from the .sb-size-* modifier on the same element. */
 .am .smFrame {
-  width: 300px;
-  height: 400px;
   background: white;
   border-radius: var(--radius-md);
   border: 1px solid var(--c-cobalt-100);
@@ -40,6 +39,9 @@
   display: flex;
   flex-direction: column;
 }
+.am .smFrame.sb-size-sm { width: 240px; height: 320px; }
+.am .smFrame.sb-size-md { width: 300px; height: 400px; }
+.am .smFrame.sb-size-lg { width: 360px; height: 480px; }
 
 /* Inside .smFrame the .detail.rich child needs to fill the box; the
    default .detail width: 26% rule is meant for an embedded layout so