@bagelink/vue 1.15.127 → 1.15.129

package/package.json

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

package/src/components/layout/AppContent.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, useSlots } from 'vue'
 import { Btn, PageTitle } from '@bagelink/vue'
-import { useAppLayout, useIsInsideAppLayout } from './appLayoutContext'
+import { useAppLayout } from './appLayoutContext'
 
 /** How the header is framed against the page body. */
 type HeaderVariant = 'border' | 'card' | 'none'
@@ -118,16 +118,10 @@ const isContained = computed(() => !!props.maxWidth)
 const slots = useSlots()
 const hasCenter = computed(() => !!slots['header-center'])
 
-// AppLayout already wraps the default slot in `.page-content`, which applies the
-// content gutter (`--bgl-content-padding`). When AppContent lives inside that
-// slot it would add its OWN gutter on top → doubled padding on the header and a
-// misaligned body. Detect the nesting so the template can neutralise the parent
-// gutter and own the spacing itself (keeping header + body aligned).
-const insideLayout = useIsInsideAppLayout()
 </script>
 
 <template>
-	<div class="app-content h-100p flex column" :class="{ 'app-content--nested': insideLayout, 'app-content--contained': isContained }" :style="headerVars">
+	<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
@@ -219,17 +213,36 @@ 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>
 
-/* When nested inside AppLayout, the surrounding `.page-content` already applies
-   the content gutter. Drop AppContent's own inline padding so the gutter isn't
-   doubled — the header and body then share the single parent gutter and line up
-   with its edge. (Standalone AppContent keeps its own padding, below.) */
-.app-content--nested .app-header,
-.app-content--nested .pageContent {
-padding-inline: 0;
+/* 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
@@ -277,6 +290,7 @@ row-gap: 0.5rem;
 @media screen and (max-width: 910px) {
 .app-header-side {
 row-gap: 0.25rem;
+flex-grow: 1;
 }
 }
 
@@ -293,6 +307,15 @@ row-gap: 0.25rem;
 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)

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