@conduction/nextcloud-vue 2.121.0 → 2.123.0

package/l10n/en.json

@@ -2219,7 +2219,9 @@
     "Nothing to check.": "Nothing to check.",
     "This could not be read: {reason}": "This could not be read: {reason}",
     "Still open": "Still open",
-    "The checklist could not be read.": "The checklist could not be read."
+    "The checklist could not be read.": "The checklist could not be read.",
+    "Flag it with a reason, so it stands out to everyone who works on it.": "Flag it with a reason, so it stands out to everyone who works on it.",
+    "Clear the flag with a reason once it no longer needs attention.": "Clear the flag with a reason once it no longer needs attention."
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -2469,7 +2469,9 @@
     "Nothing to check.": "Er is niets te controleren.",
     "This could not be read: {reason}": "Dit kon niet worden gelezen: {reason}",
     "Still open": "Nog open",
-    "The checklist could not be read.": "De lijst kon niet worden gelezen."
+    "The checklist could not be read.": "De lijst kon niet worden gelezen.",
+    "Flag it with a reason, so it stands out to everyone who works on it.": "Markeer het met een reden, zodat het opvalt bij iedereen die eraan werkt.",
+    "Clear the flag with a reason once it no longer needs attention.": "Haal de markering weg met een reden zodra het geen aandacht meer nodig heeft."
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.121.0",
+  "version": "2.123.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -2278,6 +2278,7 @@ export default {
 				getManifest: () => (this.manifestEditor ? this.manifestEditor.source.value : this.manifest),
 				getLanguage: () => this.language || getLanguage(),
 				translate: (text, vars) => this.translate(text, vars),
+				library: (text, vars) => t('nextcloud-vue', text, vars),
 			})
 		},
 

package/src/components/CnAttentionFlagWidget/CnAttentionFlagWidget.vue

@@ -40,7 +40,26 @@
 				data-testid="cn-attention-flag-review-due">{{ label('reviewDue') }}</span>
 		</p>
 
-		<div class="cn-attention-flag__act">
+		<template v-if="behindButton && !composing">
+			<h4 class="cn-attention-flag__heading" data-testid="cn-attention-flag-heading">
+				{{ reasonLabel }}
+			</h4>
+			<p class="cn-attention-flag__hint" data-testid="cn-attention-flag-hint">
+				{{ raised ? label('hintClear') : label('hintRaise') }}
+			</p>
+			<NcButton
+				variant="secondary"
+				wide
+				data-testid="cn-attention-flag-compose"
+				@click="composing = true">
+				<template #icon>
+					<FlagOutline :size="20" />
+				</template>
+				{{ raised ? label('clear') : label('raise') }}
+			</NcButton>
+		</template>
+
+		<div v-else class="cn-attention-flag__act">
 			<NcTextField
 				:modelValue="reason"
 				:label="reasonLabel"
@@ -84,6 +103,7 @@ import { emit } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcButton, NcTextField } from '@nextcloud/vue'
+import FlagOutline from 'vue-material-design-icons/FlagOutline.vue'
 import { interpolateUrlTokens } from '../../composables/useEndpointSource.js'
 import { dispatchObjectsChanged } from '../../utils/objectSignals.js'
 import { readPath } from '../../utils/readPath.js'
@@ -100,6 +120,8 @@ function defaultLabels() {
 		reviewDue: t('nextcloud-vue', 'Due for review'),
 		reasonRaise: t('nextcloud-vue', 'Why this needs attention'),
 		reasonClear: t('nextcloud-vue', 'Why it no longer needs attention'),
+		hintRaise: t('nextcloud-vue', 'Flag it with a reason, so it stands out to everyone who works on it.'),
+		hintClear: t('nextcloud-vue', 'Clear the flag with a reason once it no longer needs attention.'),
 		raise: t('nextcloud-vue', 'Flag for attention'),
 		clear: t('nextcloud-vue', 'Clear the flag'),
 		raised: t('nextcloud-vue', 'Raised'),
@@ -130,7 +152,8 @@ const LEVELS = {
  *     "clearPath": "/clear",
  *     "markersPath": "attentionMarkers",
  *     "panelLabels": { "item-files": "Files" },
- *     "assessment": { "path": "riskAssessment", "levelMap": { "high": "High" }, "reviewDateField": "reviewDate" }
+ *     "assessment": { "path": "riskAssessment", "levelMap": { "high": "High" }, "reviewDateField": "reviewDate" },
+ *     "behindButton": true
  *   }
  * }
  * ```
@@ -142,7 +165,9 @@ const LEVELS = {
  * as written. Markers and the assessment are read off the record the page
  * already holds. An assessment the reader may not see is absent from the
  * record, so it is absent here rather than blank. A failed read draws
- * nothing. After a raise or a clear the widget emits `object-changed`, says
+ * nothing. With `behindButton` the strip shows the act as a heading, a hint
+ * (`labels.hintRaise` / `labels.hintClear`) and one button, and the reason
+ * field opens when that button is pressed. After a raise or a clear the widget emits `object-changed`, says
  * so to every list (`dispatchObjectsChanged`) and asks the page to refresh.
  *
  * @spec openspec/changes/dq-abstract-record-widgets/specs/record-widgets/spec.md#requirement-a-record-can-carry-an-attention-flag
@@ -150,7 +175,7 @@ const LEVELS = {
 export default {
 	name: 'CnAttentionFlagWidget',
 
-	components: { NcButton, NcTextField },
+	components: { FlagOutline, NcButton, NcTextField },
 
 	inject: {
 		cnTranslate: { default: () => (key) => key },
@@ -162,7 +187,8 @@ export default {
 		 * `raisePath` (default `/raise`), `clearPath` (default `/clear`),
 		 * `labels` (overrides of the default words), `markersPath`,
 		 * `panelLabels` (marker tab id to label) and `assessment`
-		 * (`{ path, levelMap?, levelField?, groundField?, reviewDateField? }`).
+		 * (`{ path, levelMap?, levelField?, groundField?, reviewDateField? }`)
+		 * and `behindButton` (the reason field opens from a button).
 		 */
 		content: {
 			type: Object,
@@ -205,6 +231,7 @@ export default {
 			history: [],
 			reason: '',
 			refusal: '',
+			composing: false,
 		}
 	},
 
@@ -222,6 +249,11 @@ export default {
 			return interpolateUrlTokens(raw, { objectId: this.objectId, object: this.objectData || {} })
 		},
 
+		/** @return {boolean} Whether the reason field waits behind a button. */
+		behindButton() {
+			return this.content?.behindButton === true
+		},
+
 		/** @return {string} What the raise or clear was for, in the flag's own words. */
 		flagReason() {
 			return String(this.flag?.reason ?? '')
@@ -370,6 +402,7 @@ export default {
 				const response = await axios.post(generateUrl(this.endpoint + tail), { reason })
 				this.apply(response?.data)
 				this.reason = ''
+				this.composing = false
 				this.announce()
 			} catch (error) {
 				const said = String(error?.response?.data?.error ?? error?.response?.data?.message ?? '')
@@ -450,6 +483,18 @@ function hasPassed(date) {
 	font-weight: bold;
 }
 
+.cn-attention-flag__heading {
+	margin: 0;
+	font-size: 14px;
+	font-weight: bold;
+}
+
+.cn-attention-flag__hint {
+	margin: 0 0 8px;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
 .cn-attention-flag__muted {
 	color: var(--color-text-maxcontrast);
 }

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -2908,9 +2908,11 @@ export default {
 }
 
 /* A cell is a span: its ink also goes to --nldesign-color-on-surface, which a
-   theme that forces the body ink onto every span (thematiq) reads. The light
-   levels (1 to 3) take a dark ink; white only on level 4, the full primary,
-   where it reaches 4.5:1 (on level 3's 65% tint it is about 2.9:1). */
+   theme that forces the body ink onto every span (thematiq) reads. The four
+   levels are the boards' tones (DqProcesanalyse): the light primary, the
+   primary at 35% and at 70%, and level 1 inverted. Levels 1 to 3 take a dark
+   ink; the board's white on level 3 is about 3.1:1, and 70% is as deep as the
+   dark ink stays at 4.5:1 in Nextcloud's dark theme. */
 .cn-chart-widget__matrix-cell--1 {
 	--nldesign-color-on-surface: var(--color-primary-element-light-text);
 	background: var(--color-primary-element-light);
@@ -2918,20 +2920,20 @@ export default {
 }
 
 .cn-chart-widget__matrix-cell--2 {
-	background: color-mix(in srgb, var(--color-primary-element) 30%, var(--color-main-background));
+	background: color-mix(in srgb, var(--color-primary-element) 35%, var(--color-main-background));
 	color: var(--color-main-text);
 }
 
 .cn-chart-widget__matrix-cell--3 {
 	--nldesign-color-on-surface: var(--color-main-text);
-	background: color-mix(in srgb, var(--color-primary-element) 65%, var(--color-main-background));
+	background: color-mix(in srgb, var(--color-primary-element) 70%, var(--color-main-background));
 	color: var(--color-main-text);
 }
 
 .cn-chart-widget__matrix-cell--4 {
-	--nldesign-color-on-surface: var(--color-primary-element-text);
-	background: var(--color-primary-element);
-	color: var(--color-primary-element-text);
+	--nldesign-color-on-surface: var(--color-primary-element-light);
+	background: var(--color-primary-element-light-text);
+	color: var(--color-primary-element-light);
 }
 
 .cn-chart-widget__empty {

package/src/components/CnDetailPage/CnDetailPage.md

@@ -432,6 +432,16 @@ Four levels of action and the case surfaces around them. All opt in. See [the re
 | `accessPurpose` | Object | `null` | Ask for a purpose before the record opens (manifest `config.accessPurpose`): `{ when, options, url, title?, description? }`. `when` is a `visibleWhen` condition on the record and its `visibilityContext` records; `options` are the purposes offered (`{ value, label }`; "Other" with a written purpose is always added); `url` is the app endpoint that records the purpose (POST `{ purpose, note }`, `{objectId}` filled in). Nothing of the record shows until the endpoint accepts, and the same record is not asked again in the same browser session. A refusal keeps the record closed. `null` asks nothing. |
 | `isAdmin` | Boolean \| null | `null` | Shows `adminOnly` header actions. `null` reads it from Nextcloud. |
 
+## A body widget's own cards in the side column
+
+A widget in the body can show cards about what is selected in it in the side column, in place of the generic side cards (DqDocumentenBeheer: "Wie mag dit zien: <file>" and "Controlegetal" while files are ticked). The page provides `cnDetailSideColumn`:
+
+| Member | Meaning |
+|---|---|
+| `available` | Whether the page draws a side column. Without one the widget keeps its cards where they were. |
+| `target` | A selector for the slot at the top of the side column, to `<Teleport>` the cards to. |
+| `claim(owner, on)` | Start (`true`) or stop (`false`) showing cards there. While any owner claims, the generic side cards stand aside; they come back when the last one lets go. Release on unmount. |
+
 ## The record as a place
 
 `listNavigation`, `primaryAction` and `tabInAddress` make a record somewhere a handler stays. All three are off by default. See [the reference page](../../../docs/components/cn-detail-page.md#the-record-as-a-place).

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -1088,8 +1088,14 @@
 			class="cn-detail-page__side"
 			:aria-label="sideColumnLabel"
 			data-testid="cn-detail-page-side">
+			<!-- Where a body widget puts its own cards about what is selected in
+			     it (`cnDetailSideColumn`); while it does, the generic cards
+			     below stand aside. -->
+			<div :id="sideTakeoverId"
+				class="cn-detail-page__side-takeover"
+				data-testid="cn-detail-page-side-takeover" />
 			<div
-				v-for="widget in sideColumnWidgets"
+				v-for="widget in sideClaims.length > 0 ? [] : sideColumnWidgets"
 				:key="`side-${widget.id}`"
 				class="cn-detail-page__side-item"
 				:class="{ 'cn-detail-page__side-item--notice': isBoard && widget.type === 'banner', 'cn-detail-page__side-item--history': isBoard && widget.id === sideHistoryId, 'cn-detail-page__side-item--with-identifier': isBoard && widget.id === sideHistoryId && identifierLine !== '' }"
@@ -1421,6 +1427,9 @@ const INTEGRATION_SURFACES = ['user-dashboard', 'app-dashboard', 'detail-page',
 /** The session storage key that lists the records whose access purpose is recorded. */
 const ACCESS_PURPOSE_SESSION_KEY = 'cn-access-purposes'
 
+/** Counter for unique side column slot ids across instances. */
+let sideTakeoverCounter = 0
+
 /**
  * The records whose access purpose this browser session recorded. Empty when
  * session storage cannot be read (a private window, blocked site data).
@@ -1612,7 +1621,22 @@ export default {
 		const tabsLabel = computed(() => this.resolvedTabsLabel)
 		const visibilityRows = computed(() => (this.visibilityRowsPending ? null : this.visibilityRows))
 		const canCheckItems = computed(() => this.recordCanCheckItems)
+		const sideAvailable = computed(() => this.showsSideColumn)
 		return {
+			// The side column, for a widget in the body that describes what is
+			// selected in it (a files list's cards about the selected file).
+			// `available` says whether the page draws a side column; `target`
+			// is the selector to teleport the cards to; `claim(owner, on)`
+			// puts the generic side cards aside while an owner shows its own.
+			cnDetailSideColumn: {
+				get available() {
+					return sideAvailable.value
+				},
+
+				target: `#${this.sideTakeoverId}`,
+				claim: (owner, on) => this.claimSideColumn(owner, on),
+			},
+
 			// The page's own look reaches the tabs, the cards and the activity
 			// below it, also when it came from the `look` prop and not the app.
 			cnLook: computed(() => (isBoard.value ? 'board' : 'nextcloud')),
@@ -3051,6 +3075,10 @@ export default {
 
 	data() {
 		return {
+			/** The id of the side column's slot for a body widget's own cards. */
+			sideTakeoverId: `cn-detail-side-takeover-${++sideTakeoverCounter}`,
+			/** The body widgets that show their own cards in the side column now. */
+			sideClaims: [],
 			/** The session keys of the records whose access purpose is recorded. */
 			accessPurposeGranted: readGrantedPurposes(),
 			/** Whether the purpose dialog is open; closing it without a purpose keeps the record closed. */
@@ -5347,6 +5375,19 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A body widget starts or stops showing its own cards in the side
+		 * column. While any does, the generic side cards stand aside.
+		 *
+		 * @param {string|number} owner Who claims, unique per widget.
+		 * @param {boolean} on Whether it shows its cards now.
+		 * @return {void}
+		 */
+		claimSideColumn(owner, on) {
+			const rest = this.sideClaims.filter((id) => id !== owner)
+			this.sideClaims = on ? [...rest, owner] : rest
+		},
+
 		/**
 		 * A text of the access purpose gate through the app's translate, '' when unset.
 		 *

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -305,6 +305,32 @@
 				@selectObject="onSelectObject" />
 		</CnWidgetWrapper>
 
+		<!-- A titled `sections` widget in the side column or a tab stack: its
+		     sections stack inside one titled card, as the other cards there
+		     are drawn. A grid cell has its own card, and `content.cards` makes
+		     every section a card of its own, so both stay as they are. -->
+		<CnWidgetWrapper
+			v-else-if="renderer && wrapsSections"
+			:title="widget.title"
+			:subtitle="widgetSubtitle"
+			:showTitle="effectiveShowCardTitle"
+			titleIconPosition="left"
+			:showActions="false"
+			:showRefresh="false"
+			:showRequestFeature="false"
+			:headerLink="cardHeaderLink"
+			class="cn-detail-page__sections-card"
+			data-testid="cn-detail-widget-sections-card">
+			<template v-if="widget.icon" #title-icon>
+				<CnIcon :name="widget.icon" :size="20" />
+			</template>
+			<component
+				:is="renderer"
+				ref="renderer"
+				v-bind="rendererProps"
+				@selectObject="onSelectObject" />
+		</CnWidgetWrapper>
+
 		<!-- Every other content-driven catalog widget, and every bare-mode
 		     catalog widget. These self-fetch from OpenRegister. The object
 		     context is forwarded too (the same shape CnWidgetGrid merges on the
@@ -857,6 +883,19 @@ export default {
 			return typeof entry === 'object' && entry.chrome === 'card'
 		},
 
+		/**
+		 * Whether a `sections` widget gets one titled card: on a card surface
+		 * outside a body grid cell, with a title, and not in `cards` mode.
+		 *
+		 * @return {boolean}
+		 */
+		wrapsSections() {
+			if (this.isBare || this.inGridCell || !this.widget || this.widget.type !== 'sections' || !this.widget.title) {
+				return false
+			}
+			return !(this.widget.content && this.widget.content.cards)
+		},
+
 		/** @return {boolean} true when the registry entry declares `card`. */
 		isCard() {
 			return isCardWidgetDef(this.widget)

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -280,7 +280,7 @@
 		     sidebar) is left out, and Show in Files covers it. -->
 		<div v-else
 			class="cn-files-browser__body"
-			:class="{ 'cn-files-browser__body--with-side': sideNode !== null }">
+			:class="{ 'cn-files-browser__body--with-side': sideNode !== null && !sideInPage }">
 			<table class="cn-files-browser__table" data-testid="cn-files-browser-table">
 				<thead>
 					<tr>
@@ -560,43 +560,50 @@
 				</tbody>
 			</table>
 
-			<!-- `sideCards`: cards about the last selected file, beside the list. -->
-			<aside v-if="sideNode !== null"
-				class="cn-files-browser__side"
-				:aria-label="t('nextcloud-vue', 'About {name}', { name: sideNode.basename })"
-				data-testid="cn-files-browser-side">
-				<section v-for="card in sideCardsFor(sideNode)"
-					:key="card.id"
-					class="cn-files-browser__side-card"
-					:data-testid="`cn-files-browser-side-card-${card.id}`">
-					<h3 class="cn-files-browser__side-title">
-						{{ card.title }}
-					</h3>
-					<dl v-if="card.fields.length > 0" class="cn-files-browser__side-facts">
-						<template v-for="field in card.fields" :key="field.key">
-							<dt>{{ field.label }}</dt>
-							<dd :class="field.tone ? `cn-files-browser__tone cn-files-browser__tone--${field.tone}` : ''">
-								<CnCellRenderer
-									:value="field.value"
-									:formatter="field.formatter || null"
-									:formatterOptions="field.formatterOptions || null"
-									:row="sideNode" />
-							</dd>
-						</template>
-					</dl>
-					<div v-if="card.actions.length > 0" class="cn-files-browser__side-actions">
-						<NcButton v-for="action in card.actions"
-							:key="action.id"
-							:data-testid="`cn-files-browser-side-action-${action.id}`"
-							@click="runHostAction(action, sideNode)">
-							<template v-if="action.icon" #icon>
-								<CnIcon :name="action.icon" :size="20" />
+			<!-- `sideCards`: cards about the last selected file, beside the list,
+			     or in the detail page's side column (`sideCardsPlacement`). -->
+			<Teleport v-if="sideNode !== null"
+				:to="pageSideTarget"
+				:disabled="!sideInPage"
+				defer>
+				<aside
+					class="cn-files-browser__side"
+					:class="{ 'cn-files-browser__side--in-page': sideInPage }"
+					:aria-label="t('nextcloud-vue', 'About {name}', { name: sideNode.basename })"
+					data-testid="cn-files-browser-side">
+					<section v-for="card in sideCardsFor(sideNode)"
+						:key="card.id"
+						class="cn-files-browser__side-card"
+						:data-testid="`cn-files-browser-side-card-${card.id}`">
+						<h3 class="cn-files-browser__side-title">
+							{{ card.title }}
+						</h3>
+						<dl v-if="card.fields.length > 0" class="cn-files-browser__side-facts">
+							<template v-for="field in card.fields" :key="field.key">
+								<dt>{{ field.label }}</dt>
+								<dd :class="field.tone ? `cn-files-browser__tone cn-files-browser__tone--${field.tone}` : ''">
+									<CnCellRenderer
+										:value="field.value"
+										:formatter="field.formatter || null"
+										:formatterOptions="field.formatterOptions || null"
+										:row="sideNode" />
+								</dd>
 							</template>
-							{{ hostLabel(action) }}
-						</NcButton>
-					</div>
-				</section>
-			</aside>
+						</dl>
+						<div v-if="card.actions.length > 0" class="cn-files-browser__side-actions">
+							<NcButton v-for="action in card.actions"
+								:key="action.id"
+								:data-testid="`cn-files-browser-side-action-${action.id}`"
+								@click="runHostAction(action, sideNode)">
+								<template v-if="action.icon" #icon>
+									<CnIcon :name="action.icon" :size="20" />
+								</template>
+								{{ hostLabel(action) }}
+							</NcButton>
+						</div>
+					</section>
+				</aside>
+			</Teleport>
 		</div>
 
 		<p v-if="dropHint && canChange && !loading && error === ''"
@@ -819,6 +826,8 @@ export default {
 		// action or column the manifest declares is authored in English as
 		// the catalogue key, and read through this in the user's language.
 		cnTranslate: { default: () => (key) => key },
+		// The detail page's side column (CnDetailPage), for side cards placed there.
+		cnDetailSideColumn: { default: null },
 	},
 
 	props: {
@@ -1213,6 +1222,17 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * Where the side cards stand: `beside` (default) next to the list, or
+		 * `page-side` in the detail page's side column, in place of its
+		 * generic cards while a file is selected. Without a page side column
+		 * they stay beside the list.
+		 */
+		sideCardsPlacement: {
+			type: String,
+			default: 'beside',
+		},
+
 		/**
 		 * The key of a declared column to group the files on: a heading row
 		 * per value, in the order each is first met, with its count. Files
@@ -1487,6 +1507,21 @@ export default {
 		 * @return {object|null}
 		 * @spec openspec/changes/files-browser-side-cards/specs/files-browser/spec.md#requirement-cards-beside-the-list-describe-the-selected-file
 		 */
+		/** @return {boolean} Whether the side cards fill the page's side column now. */
+		sideClaimed() {
+			return this.sideInPage && this.sideNode !== null
+		},
+
+		/** @return {boolean} Whether the side cards stand in the page's side column. */
+		sideInPage() {
+			return this.sideCardsPlacement === 'page-side' && this.cnDetailSideColumn !== null && this.cnDetailSideColumn.available === true
+		},
+
+		/** @return {string} Where the side cards are teleported to in the page. */
+		pageSideTarget() {
+			return this.cnDetailSideColumn?.target || 'body'
+		},
+
 		sideNode() {
 			if (!Array.isArray(this.sideCards) || this.sideCards.length === 0 || this.selectedIds.length === 0) {
 				return null
@@ -1658,6 +1693,17 @@ export default {
 	},
 
 	watch: {
+		/**
+		 * Tell the page whether the side cards stand in its side column now,
+		 * so its generic cards stand aside meanwhile.
+		 */
+		sideClaimed: {
+			immediate: true,
+			handler(on) {
+				this.cnDetailSideColumn?.claim?.(this.$.uid, on)
+			},
+		},
+
 		rootPath(next) {
 			this.currentPath = next
 			this.refresh()
@@ -1681,6 +1727,7 @@ export default {
 	},
 
 	beforeUnmount() {
+		this.cnDetailSideColumn?.claim?.(this.$.uid, false)
 		for (const channel of FOLDER_CHANGED_CHANNELS) {
 			unsubscribe(channel, this.onFolderChanged)
 		}
@@ -3072,6 +3119,17 @@ export default {
 	gap: 12px;
 }
 
+/* In the detail page's side column the cards take its gap and its card
+   anatomy, as the page's own side cards are drawn. */
+.cn-files-browser__side--in-page {
+	gap: calc(5 * var(--default-grid-baseline));
+}
+
+.cn-files-browser__side--in-page .cn-files-browser__side-card {
+	padding: var(--cn-board-card-padding, 16px 18px);
+	border-radius: var(--cn-board-card-radius, var(--border-radius-large));
+}
+
 .cn-files-browser__side-card {
 	display: flex;
 	flex-direction: column;

package/src/components/CnFlowDetail/CnFlowDetail.vue

@@ -202,6 +202,7 @@
 			:edges="canvasEdgesWithRunState"
 			:minZoom="minZoom"
 			:maxZoom="maxZoom"
+			:fitMaxZoom="fitMaxZoom"
 			@zoomChange="zoom = $event"
 			@nodeSelect="onNodeSelect"
 			@nodeActivate="onNodeActivate"
@@ -448,6 +449,25 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Which way the automatic layout runs: `right` (default) left to
+		 * right, `down` top to bottom with branches side by side.
+		 */
+		layoutDirection: {
+			type: String,
+			default: 'right',
+			validator: (value) => ['right', 'down'].includes(value),
+		},
+
+		/**
+		 * The most the first fit may zoom in. 0 lets it zoom to `maxZoom`; 1
+		 * keeps a small graph at its own size instead of blowing it up.
+		 */
+		fitMaxZoom: {
+			type: Number,
+			default: 0,
+		},
+
 		/**
 		 * Show Save, Run and Check in the canvas toolbar. Off when the host
 		 * draws them itself, as the board look does in its page header.
@@ -1523,6 +1543,7 @@ export default {
 	 * @return {void}
 	 */
 	created() {
+		this.store.layoutDirection = this.layoutDirection
 		this.store.beginBootstrap(this.run)
 	},