@bagelink/vue 1.15.125 → 1.15.129

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.125",
+  "version": "1.15.129",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/FloatingPanel.vue

@@ -88,7 +88,7 @@ defineExpose({
 	height: min(90vh, 800px);
 	margin: 1rem;
 	border-radius: 12px;
-	border: 1px solid var(--bgl-gray-20, #e0e0e0);
+	border: 1px solid var(--bgl-border-color, #e0e0e0);
 	background: var(--bgl-box-bg, #fff);
 	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
 	overflow: hidden;

package/src/components/ListItem.vue

@@ -192,7 +192,7 @@ inset-inline-end: var(--bgl-list-item-end-inset);
 z-index: 1;
 /* non-interactive meta lets clicks fall through to the row button… */
 pointer-events: none;
-padding-inline-end: 1rem;
+padding-inline-end: 0.25rem;
 }
 /* …interactive trailing controls stay clickable on top of the row button. */
 .list-item-fullrow .list-item-end :where(button, a, input, select, label, [role="button"], [tabindex]) {

package/src/components/Menu.vue

@@ -7,7 +7,7 @@ defineProps<{ items: NavLink[] }>()
 </script>
 
 <template>
-	<div class="flex space-between m_w-100vw overflow m_-ms-1 m_-me-1 m_px-1 m_pt-025 m_pb-05 bglTopMenu">
+	<div class="flex space-between m_w-100vw overflow-x overflow-y-hidden m_-ms-1 m_-me-1 m_px-1 m_pt-025 m_pb-0 bglTopMenu">
 		<div class="flex gap-025 m_gap-05">
 			<template v-for="item in items" :key="item.label">
 				<Dropdown v-if="item.children" :value="resolveI18n(item.label)" iconEnd="keyboard_arrow_down">

package/src/components/form/inputs/RichText/index.vue

@@ -26,6 +26,8 @@ const props = defineProps<{
 	debug?: boolean
 	label?: string
 	height?: number | string
+	// Make the editor fill the full height of its parent container
+	fullHeight?: boolean
 	basic?: boolean
 	simple?: boolean
 	placeholder?: string
@@ -2119,6 +2121,11 @@ const hasRTL = computed(() => RTL_REGEX.test(props.modelValue))
 
 // Computed property to handle height prop
 const editorHeight = computed(() => {
+	// When fullHeight is enabled the editor stretches to fill its parent,
+	// so we don't impose a fixed pixel height.
+	if (props.fullHeight) {
+		return '100%'
+	}
 	if (typeof props.height === 'number') {
 		return `${props.height}px`
 	} if (typeof props.height === 'string') {
@@ -3267,7 +3274,7 @@ const imgTransform = computed({
 
 <template>
 	<div
-		class="bagel-input" :class="[shellClass, { 'has-value': hasEditorValue }]" :style="shellStyle"
+		class="bagel-input" :class="[shellClass, { 'has-value': hasEditorValue, 'rich-text-full-height': fullHeight }]" :style="shellStyle"
 		v-bind="attrs"
 	>
 		<label v-if="label">{{ label }}</label>
@@ -3278,6 +3285,7 @@ const imgTransform = computed({
 					'rich-text-editor pt-05 px-05 pb-075': !basic,
 					'rich-text-editor--basic': basic,
 					'fullscreen-mode': editor.state.isFullscreen,
+					'full-height': fullHeight && !editor.state.isFullscreen,
 				},
 			]"
 		>
@@ -3867,6 +3875,38 @@ white-space: pre-wrap;
 overflow-x: auto;
 }
 
+/* Full-height mode: the editor stretches to fill its parent container.
+   The whole chain (input shell → editor → container → content-area → iframe)
+   must be a flex column so the iframe can grow to occupy the remaining space. */
+.rich-text-full-height {
+display: flex;
+flex-direction: column;
+height: 100%;
+min-height: 0;
+}
+
+.rich-text-full-height > .full-height {
+flex: 1;
+}
+
+.full-height {
+display: flex;
+flex-direction: column;
+height: 100%;
+min-height: 0;
+}
+
+.full-height .editor-container {
+flex: 1;
+min-height: 0;
+}
+
+.full-height .content-area {
+height: 100%;
+min-height: 0;
+overflow-y: auto;
+}
+
 .fullscreen-mode {
 position: fixed;
 top: 0;

package/src/components/layout/AppContent.vue

@@ -1,20 +1,85 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, useSlots } from 'vue'
 import { Btn, PageTitle } from '@bagelink/vue'
 import { useAppLayout } from './appLayoutContext'
 
+/** How the header is framed against the page body. */
+type HeaderVariant = 'border' | 'card' | 'none'
+
 interface Props {
 	title?: string
 	/** Secondary line under the title (page description / context). */
 	subtitle?: string
 	showMenuButton?: boolean
 	backTo?: string | Record<string, any>
+	/**
+	 * Header framing:
+	 *   'border' → bottom hairline under the header (default — legacy behaviour).
+	 *   'card'   → header sits as a rounded, elevated card above the body.
+	 *   'none'   → no border, no card (flush with the body).
+	 */
+	variant?: HeaderVariant
+	/**
+	 * Override the header framing on mobile (≤ breakpoint) only. Lets a header be,
+	 * say, a `card` on desktop but flush (`none`) on a phone, where the extra chrome
+	 * and margins feel heavy. Unset (default) = mobile inherits the desktop variant.
+	 */
+	mobileVariant?: HeaderVariant
+	/**
+	 * Shorthand for `variant="card"` — lets you write `<AppContent card>` instead
+	 * of `<AppContent variant="card">`. Ignored when `variant` is passed explicitly.
+	 */
+	card?: boolean
+	/**
+	 * @deprecated Use `variant` instead. `border` maps to
+	 * `variant="border"` (true, the old default) or `variant="none"` (false).
+	 * Only applied when `variant` (and `card`) are not passed.
+	 */
 	border?: boolean
+	/**
+	 * Fixed header height. Locked in on both desktop and mobile so the header's
+	 * top-start corner (and everything in it — titles, inputs, buttons) sits at
+	 * the exact same place on every page, regardless of content. Any CSS length.
+	 */
+	headerHeight?: string
+	/**
+	 * Lock the header to a single row of exactly `headerHeight` — content never
+	 * wraps to a second line; anything that overflows is clipped. Off by default:
+	 * the header keeps its fixed *minimum* height (stable start corner) but is
+	 * free to grow downward into extra rows when content needs it (common on
+	 * mobile). Turn this on only for headers you know must stay one exact line.
+	 */
+	singleRow?: boolean
+	/**
+	 * Cap the readable width of the page and center it on wide screens. Applies to
+	 * BOTH the header and the body, so the title stays aligned above the content
+	 * (no more per-view `w-1100px mx-auto`). Any CSS length, e.g. '1100px', '80rem'.
+	 * Unset (default) = full-bleed. On narrow screens the content simply fills the
+	 * available width (the cap only kicks in once the viewport is wider than it).
+	 */
+	maxWidth?: string
+	/**
+	 * Make the body's child fill the content area — the body becomes a flex column
+	 * so its child takes the full width and the remaining height (`flex:1`) and owns
+	 * its own scrolling. Saves repeating `h-100p w-100p overflow-hidden` on the
+	 * wrapper of full-height views (tables, Kanban boards, chat, split panes). Off by
+	 * default so short content (forms, empty states) still flows naturally at its own
+	 * height instead of being stretched. Use only when the child should own the whole
+	 * viewport region.
+	 */
+	fill?: boolean
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
 	showMenuButton: true,
-	border: true,
+	variant: undefined,
+	mobileVariant: undefined,
+	card: false,
+	border: undefined,
+	headerHeight: '60px',
+	singleRow: false,
+	maxWidth: undefined,
+	fill: false,
 })
 
 const { isOpen, toggleMenu, regions } = useAppLayout()
@@ -22,25 +87,61 @@ const { isOpen, toggleMenu, regions } = useAppLayout()
 // Only show the sidebar toggle when a sidebar actually exists (top/bottom-nav
 // apps have no start region → the button would darken an empty backdrop).
 const hasSidebar = computed(() => regions.value.start.present)
+
+// Resolve the effective variant, in priority order: explicit `variant` wins; then
+// the `card` shorthand; then the legacy `border` boolean; else the historical
+// default of 'border'. (So `<AppContent card :border="false">` still yields a card.)
+const resolvedVariant = computed<HeaderVariant>(() => {
+	if (props.variant) { return props.variant }
+	if (props.card) { return 'card' }
+	if (props.border !== undefined) { return props.border ? 'border' : 'none' }
+	return 'border'
+})
+
+// Mobile framing: an explicit `mobileVariant` overrides only below the breakpoint;
+// otherwise mobile just inherits the resolved desktop variant. Both variant classes
+// are always emitted (desktop + `--m-*`); the CSS media queries pick which applies.
+const resolvedMobileVariant = computed<HeaderVariant>(() => props.mobileVariant ?? resolvedVariant.value)
+
+// Lock the header to a single stable height on both breakpoints, and publish the
+// optional content max-width. Both are inline vars so overrides stay trivial.
+const headerVars = computed(() => ({
+	'--bgl-app-header-h': props.headerHeight,
+	...(props.maxWidth ? { '--bgl-app-max-width': props.maxWidth } : {}),
+}))
+
+// Only center/cap when a maxWidth was actually given (keeps default full-bleed).
+const isContained = computed(() => !!props.maxWidth)
+
+// The center slot only renders (and reserves space) when actually provided —
+// an empty middle should never force the header to wrap awkwardly.
+const slots = useSlots()
+const hasCenter = computed(() => !!slots['header-center'])
+
 </script>
 
 <template>
-	<div class="app-content h-100p flex column">
-		<!-- Header -->
+	<div class="app-content h-100p flex column" :class="{ 'app-content--contained': isContained }" :style="headerVars">
+		<!-- Header — fixed *minimum* height on every breakpoint so its start
+		     corner sits in the exact same spot on every page. When content needs
+		     more room (e.g. mobile) it wraps downward from that floor instead of
+		     being clipped. Use `singleRow` to hard-lock to one exact line. -->
 		<header
-			class="app-header flex align-items-center space-between py-1 m_pt-025 m_pb-05 min-h60px w-100p  m_flex-wrap"
-			:class="{ 'border-bottom': border }"
+			class="app-header flex w-100p"
+			:class="[
+				`app-header--${resolvedVariant}`,
+				`app-header--m-${resolvedMobileVariant}`,
+				{ 'app-header--single-row': singleRow },
+			]"
 		>
 			<!-- Left Side -->
-			<div class="flex align-items-center gap-col-075 m_flex-wrap m_pe-075">
+			<div class="app-header-side flex gap-col-075 min-w-0">
 				<!-- Menu Toggle Button -->
-			<div class="m_min-h60px flex">
-					<Btn
-						v-if="showMenuButton && hasSidebar" flat icon="dock_to_right" class="menuToggleButton "
-						:aria-expanded="isOpen" aria-controls="bgl-app-sidebar" aria-label="Toggle sidebar"
-						@click="toggleMenu"
-					/>
-			</div>
+				<Btn
+					v-if="showMenuButton && hasSidebar" flat icon="dock_to_right" class="menuToggleButton"
+					:aria-expanded="isOpen" aria-controls="bgl-app-sidebar" aria-label="Toggle sidebar"
+					@click="toggleMenu"
+				/>
 
 				<!-- Back Button -->
 				<Btn v-if="backTo" icon="arrow_back" thin :to="backTo" class="back-btn bg-bg m_-ms-05 m_-me-05 color-black" />
@@ -54,20 +155,27 @@ const hasSidebar = computed(() => regions.value.start.present)
 				<slot name="header-left" />
 			</div>
 
-			<!-- Center Content -->
-			<div class="flex align-items-center">
+			<!-- Center Content (only rendered when the slot is provided) -->
+			<div v-if="hasCenter" class="app-header-center flex min-w-0">
 				<slot name="header-center" />
 			</div>
 
 			<!-- Right Side -->
-			<div class="flex align-items-center gap-row-05 m_flex-grow-1 endNavTools">
+			<div class="app-header-side flex gap-row-05 endNavTools">
 				<slot name="header-right" />
 			</div>
 		</header>
 
-		<!-- Page Content -->
+		<!-- Page Content — the gap under the header follows the variant: a border
+		     earns a bit of breathing room, but a borderless (none/card) header
+		     sits flush so the body hugs it. -->
 		<main
-			class="pageContent flex-grow overflow pt-1 pb-05 w-100p m_py-05 m_scrollbar-gutter-auto"
+			class="pageContent flex-grow overflow pb-05 w-100p m_pb-05 m_scrollbar-gutter-auto"
+			:class="[
+				`pageContent--${resolvedVariant}`,
+				`pageContent--m-${resolvedMobileVariant}`,
+				{ 'pageContent--fill': fill },
+			]"
 		>
 			<slot name="content">
 				<!-- Default slot for content without explicit template -->
@@ -79,10 +187,18 @@ const hasSidebar = computed(() => regions.value.start.present)
 
 <style>
 
-.slide-fade-enter-from:has(.app-header),
-.slide-fade-leave-to:has(.app-header) {
-transform: translateX(0) !important;
-opacity: 1 !important;
+/* Inputs dropped straight into a header slot default to a natural, compact width
+   instead of the input wrapper's global width:100% — otherwise a bare
+   <TextInput> (no width class) tries to fill the whole side and gets bumped onto
+   its own row. Views that DO want a specific width just add a utility: w-200px /
+   w-280px set max-width (compose fine with width:auto), and full-bleed cases use
+   m_w-1000px (mobile, where this desktop rule doesn't apply). Desktop only. */
+@media screen and (min-width: 911px) {
+.app-header .bagel-input {
+width: auto;
+min-width: 220px;
+max-width: 100%;
+}
 }
 
 .slide-fade-enter-from:has(.app-header) .pageContent,
@@ -97,16 +213,223 @@ transition: all 0.15s ease-in;
 overflow: hidden;
 }
 
+/* Gutter ownership, breakpoint-aware (see AppLayout `.page-content`):
+   • Desktop — `.page-content` supplies the gutter, so an AppContent nested in it drops
+     its OWN inline padding to avoid doubling; header + body align with the parent edge.
+   • Mobile — `.page-content` drops its gutter, so AppContent keeps its own padding
+     (declared in the scoped block): the header runs edge-to-edge (its border reaches
+     the screen) while its content stays inset. A standalone AppContent (no
+     `.page-content` ancestor) always keeps its own padding — this rule simply doesn't
+     match there. Unscoped because `.page-content` belongs to AppLayout's scope. */
+@media screen and (min-width: 911px) {
+/* Repeated class (`.app-content.app-content`) lifts specificity above AppContent's
+   own scoped `.app-header[data-v]` / `.pageContent[data-v]` padding rule (which is
+   also two-specificity), so this reliably wins and zeroes the doubled gutter. */
+.page-content .app-content.app-content .app-header,
+.page-content .app-content.app-content .pageContent {
+padding-inline: 0;
+}
+}
+
 </style>
 
 <style scoped>
 
-.app-content {
-height: 100%;
+/* Both the header and the body carry the side gutter themselves (AppLayout's
+   `.page-content` no longer applies it). They read the same `--bgl-content-padding`
+   so their leading edges line up. The header keeps this padding on its OWN element
+   while its bottom border spans the full element width — since `.page-content` is
+   now flush to the screen edge, that border reaches the screen edge for free (the
+   old negative-margin hack is gone). The body insets its content by the same gutter. */
+.pageContent {
+padding-inline: var(--bgl-content-padding, 1rem);
 }
 
+/* The header holds a fixed *minimum* height on every breakpoint — its start
+   corner never shifts between pages, whatever it holds (title, input, buttons),
+   because the floor is identical everywhere. When content genuinely needs more
+   room (long toolbars, small screens) it grows downward from that same floor
+   rather than being clipped — the leading corner stays put, only the height
+   below it expands. Inline padding aligns to the page's content gutter so the
+   header's leading edge lines up with the body. */
 .app-header {
 flex-shrink: 0;
+box-sizing: border-box;
+min-height: var(--bgl-app-header-h, 60px);
+gap: 0.5rem 0.75rem;
+padding-inline: var(--bgl-content-padding, 1rem);
+padding-block: 0.5rem;
+flex-wrap: wrap;
+}
+
+/* Mobile: headers wrap to multiple rows far more often (narrow viewport), so the
+   between-row gap is tightened — the airy 0.5rem that reads fine as a rare desktop
+   wrap looks like dead space when the header routinely stacks on a phone. */
+@media screen and (max-width: 910px) {
+.app-header {
+row-gap: 0.25rem;
+}
+}
+
+/* Each side hugs its own content — it does NOT grow, so inputs and toolbars keep
+   their natural size instead of being stretched to fill the row (which would
+   otherwise push a full-width input onto its own line). When the sides can't
+   share one row they wrap onto extra rows; min-width:0 + flex-wrap let a single
+   over-wide side shrink/wrap its own children rather than spill out. The
+   row-gap gives that WITHIN-side wrapping (e.g. a toolbar of buttons breaking
+   onto two lines) extra breathing room between its rows — mobile more so. */
+.app-header-side {
+flex: 0 1 auto;
+min-width: 0;
+flex-wrap: wrap;
+max-width: 100%;
+row-gap: 0.5rem;
+}
+/* Same tightening for wrapping WITHIN a side (e.g. a toolbar of buttons breaking
+   onto two lines) on mobile. */
+@media screen and (max-width: 910px) {
+.app-header-side {
+row-gap: 0.25rem;
+flex-grow: 1;
+}
+}
+
+/* The trailing toolbar is pushed to the end of a shared row by an auto margin
+   (no flex growth needed, so it never steals width from the leading side). When
+   it can't fit and wraps onto its own line the auto margin collapses and it sits
+   at the start of that row; justify-content keeps its actions end-aligned either
+   way. This holds on every breakpoint — the sides stay on one row whenever they
+   fit (the common case: compact left + 1-2 buttons right) and only wrap when the
+   content genuinely doesn't fit. A search input that wants a full-width row on
+   mobile opts in per-view with `m_w-1000px` ON THE INPUT (its width then exceeds
+   the row and it wraps), rather than the header force-stacking every left side. */
+.endNavTools {
+margin-inline-start: auto;
+justify-content: flex-end;
+}
+/* Mobile: don't push the trailing side to the far edge — let it sit right after the
+   leading side (no auto margin, start-aligned) so the header reads as one compact
+   group instead of splitting title and actions to opposite screen edges. */
+@media screen and (max-width: 910px) {
+.endNavTools {
+margin-inline-start: 0;
+justify-content: flex-start;
+}
+}
+
+/* ── Variants ──────────────────────────────────────────────────────────────
+   border → hairline under the header (legacy default)
+   card   → header floats as a rounded, elevated card above the body
+   none   → flush, no chrome
+
+   The desktop variant classes are scoped to the wide breakpoint and the mobile
+   `--m-*` classes to the narrow one, so a header can carry both (e.g. card on
+   desktop, none on mobile) and the right one wins purely by media query — no
+   specificity juggling. Shared framing lives in a mixin-style duplicate below. */
+@media screen and (min-width: 911px) {
+.app-header--border {
+border-bottom: 1px solid var(--bgl-border-color);
+}
+.app-header--card {
+background: var(--bgl-box-bg);
+border: 1px solid var(--bgl-border-color);
+border-radius: var(--bgl-radius, 0.75rem);
+box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+margin: 0.5rem;
+padding-inline: 0.75rem;
+}
+}
+@media screen and (max-width: 910px) {
+.app-header--m-border {
+border-bottom: 1px solid var(--bgl-border-color);
+}
+.app-header--m-card {
+background: var(--bgl-box-bg);
+border: 1px solid var(--bgl-border-color);
+border-radius: var(--bgl-radius, 0.75rem);
+box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+margin: 0.5rem;
+padding-inline: 0.75rem;
+}
+/* `none` on mobile: make sure no inherited chrome lingers. */
+.app-header--m-none {
+border-bottom: 0;
+background: none;
+box-shadow: none;
+}
+}
+
+/* Hard-lock to a single row of exactly `headerHeight` — no wrapping, overflow
+   clipped. Turns the min-height floor into an exact height. */
+.app-header--single-row {
+height: var(--bgl-app-header-h, 60px);
+flex-wrap: nowrap;
+}
+.app-header--single-row .app-header-side {
+overflow: hidden;
+}
+
+/* Contained mode (`maxWidth` prop): cap + center ONCE on the shared parent, so
+   the header and body inherit the same width and are aligned by construction —
+   no per-child centering margins to keep in sync. The effective width keeps a
+   safety gutter below the cap (`100% - 2*gutter`) and hits `maxWidth` above it.
+   The inner column is centered with a single auto margin. */
+.app-content--contained {
+width: min(100% - 2 * var(--bgl-content-padding, 1rem), var(--bgl-app-max-width, 100%));
+margin-inline: auto;
+}
+/* Contained already supplies the side whitespace via the centered column, so the
+   header/body drop their own inline gutter and sit flush to the capped edge. */
+.app-content--contained .app-header,
+.app-content--contained .pageContent {
+padding-inline: 0;
+}
+/* …except a card header, whose rounded frame still needs its inner inset. */
+.app-content--contained .app-header--card {
+padding-inline: 0.75rem;
+}
+
+/* Gap under the header, per variant. A bordered header keeps some breathing room
+   below the hairline; a card keeps a small gap so the body doesn't touch the
+   card's frame; a borderless (none) header sits fully flush so the body hugs it.
+   Desktop and mobile are tuned separately — the mobile gaps are tighter (a phone
+   has little vertical room to spare, and a single-row header felt too airy). */
+@media screen and (min-width: 911px) {
+.pageContent--border {
+padding-top: 1rem;
+}
+.pageContent--card {
+padding-top: 0.25rem;
+}
+.pageContent--none {
+padding-top: 0;
+}
+}
+@media screen and (max-width: 910px) {
+.pageContent--m-border {
+padding-top: 0.25rem;
+}
+.pageContent--m-card {
+padding-top: 0.25rem;
+}
+.pageContent--m-none {
+padding-top: 0;
+}
+}
+
+/* `fill` mode: the body becomes a flex column so its single child fills the whole
+   region (full width, remaining height) and owns its own scrolling — no need to
+   repeat `h-100p w-100p overflow-hidden` on the child. The `> *` targets the one
+   direct child; multiple children still each span full width and stack. */
+.pageContent--fill {
+display: flex;
+flex-direction: column;
+overflow: hidden;
+}
+.pageContent--fill > * {
+flex: 1 1 auto;
+min-height: 0;
+width: 100%;
 }
 
 main {

package/src/components/layout/AppLayout.vue

@@ -318,11 +318,23 @@ transition: margin 300ms ease;
 	min-height: 0;
 }
 
-/* The single content gutter lives here — the one element common to every
-   archetype (with/without AppContent, any nav placement). */
+/* Content gutter, breakpoint-aware:
+   • Desktop — `.page-content` applies the side gutter (as it always did), so every
+     view (with or without AppContent) is inset and aligned. An AppContent header
+     therefore lines up with its body here; edge-to-edge is opt-in via `edgeHeader`.
+   • Mobile — the gutter is dropped from `.page-content` so an AppContent header can
+     run flush to the screen edge (full-width divider — the common mobile look). The
+     header/body still inset their CONTENT because AppContent applies the same
+     `--bgl-content-padding` on its own elements; direct-in-slot views keep their own
+     mobile spacing (`m_p-*`). The var stays the single gutter knob. */
 .page-content {
 	overflow: auto;
 	padding-inline: var(--bgl-content-padding, 1rem);
 }
+@media screen and (max-width: 910px) {
+	.page-content {
+		padding-inline: 0;
+	}
+}
 
 </style>

package/src/components/layout/appLayoutContext.ts

@@ -66,6 +66,15 @@ function inertRegions(): Ref<Record<RegionSide, RegionState>> {
 	})
 }
 
+/**
+ * True when called from inside a real `<AppLayout>` (a provider is present).
+ * Lets a child (e.g. AppContent) adapt its layout when it's nested in the shell
+ * vs. used standalone — without emitting the dev warning `useAppLayout` does.
+ */
+export function useIsInsideAppLayout(): boolean {
+	return inject(AppLayoutKey, null) !== null
+}
+
 /**
  * Access the AppLayout context (region state, sidebar open state, mobile flag).
  * Works inside AppLayout's slots — including custom header buttons.

package/src/styles/layout.css

@@ -7765,4 +7765,14 @@
     .mobile-only {
         display: none !important;
     }
+}
+
+.page-gutter {
+    /* The app's side gutter as a utility. AppLayout's `.page-content` no longer
+       applies `padding-inline` itself; the content supplies it, so an AppContent
+       header can sit flush to the screen edge. AppContent's body does this
+       internally; a view rendered DIRECTLY in the layout slot (no AppContent
+       wrapper) adds `.page-gutter` to its root for the same inset. Reads the
+       `--bgl-content-padding` var from AppLayout (falls back to 1rem elsewhere). */
+    padding-inline: var(--bgl-content-padding, 1rem);
 }