@bagelink/vue 1.15.188 → 1.15.192

package/dist/utils/index.d.ts

@@ -46,6 +46,8 @@ export { getOptionIcon, getOptionLabel, getOptionValue, normalizeOption } from '
 export type { ComparisonOperator, FilterCondition, LogicalOperator, QueryConditions, QueryFilter } from './queryFilter';
 export { anyOf, buildQuery, evaluateQuery, parseQuery, queryFilter, range, search } from './queryFilter';
 export type { ShowdownConverter, ShowdownOptions } from './showdown';
+/** Override the base URL used to resolve uploaded file path keys. */
+export declare function setFileBaseUrl(baseUrl: string): void;
 export declare function pathKeyToURL(pathKey?: string | null): string | undefined;
 export declare function getNestedValue(obj: any, path?: string, defaultValue?: any): any;
 export declare function tryRun<T>(func: () => T, callback?: (error: Error) => void): T | undefined;

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAI1E,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAyBjD;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,EAC7C,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EACxB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC;;EAwBP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,GAAI,YAAY,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,OAAO,CAAC,EAAE,MAAM,EAAE,GAChB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAKD,wBAAsB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CA2CxF;AAED;;;;;;;GAOG;AACH,wBAAsB,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,OAAgB,EAAE,QAAa,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAStJ;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,YAAY,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE1F,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACvH,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACxG,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAQpE,qEAAqE;AACrE,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAEpD;AAED,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CA2BxE;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,GAAE,GAAe,GAAG,GAAG,CAa1F;AAID,wBAAgB,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,CAAC,GAAG,SAAS,CAQzF;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,QA6BpE;AAED,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAKrD,YAAY,EACX,iBAAiB,EACjB,qBAAqB,EACrB,iBAAiB,EACjB,YAAY,EACZ,uBAAuB,EACvB,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,aAAa,GACb,MAAM,QAAQ,CAAA;AACf,OAAO,EACN,CAAC,EACD,SAAS,EACT,QAAQ,EACR,GAAG,EACH,OAAO,EACP,UAAU,EACV,eAAe,EACf,cAAc,EACd,IAAI,EACJ,KAAK,EACL,MAAM,EACN,EAAE,EACF,MAAM,EACN,SAAS,EACT,GAAG,EACH,IAAI,GACJ,MAAM,QAAQ,CAAA;AACf,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAMxC,iGAAiG;AACjG,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,GAAG,CAAC,CAAA;AAE7D,gFAAgF;AAChF,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAAE,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,CAAA;AAE3G;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAChE,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,EAAE,GAAG;IAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAA;CAAE,CAAC,EACxE,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,GACjC,aAAa,CAAC,CAAC,CAAC,CA0BlB;AACD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}

package/package.json

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

package/src/components/form/inputs/RadioGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="ContextObjType extends { [key: string]: any }">
 import type { Option } from '@bagelink/vue'
 import { Btn, Icon, resolveI18n, sanitizeHtml } from '@bagelink/vue'
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { normalizeOption } from '../../../utils/options'
 import type { BagelInputShellProps } from './bagelInputShell'
 import { useBagelInputShell } from './bagelInputShell'
@@ -84,6 +84,38 @@ const visibleOptions = computed<NormalizedRadioOption<ContextObjType>[]>(() => {
 	return raw.map(opt => normalizeOption<RadioOption<ContextObjType>>(opt as any) as unknown as NormalizedRadioOption<ContextObjType>)
 })
 
+const inlineWrapper = ref<HTMLElement | null>(null)
+const inlineItemBasis = ref('90px')
+let inlineResizeObserver: ResizeObserver | undefined
+
+function updateInlineLayout() {
+	const wrapper = inlineWrapper.value
+	const itemCount = visibleOptions.value.length
+	if (!props.inline || !wrapper || !itemCount) { return }
+
+	const gap = Number.parseFloat(getComputedStyle(wrapper).columnGap) || 0
+	const minItemWidth = 100
+	const maxItemsPerRow = Math.max(1, Math.min(itemCount, Math.floor((wrapper.clientWidth + gap) / (minItemWidth + gap))))
+	const rowCount = Math.ceil(itemCount / maxItemsPerRow)
+	const itemsPerRow = Math.ceil(itemCount / rowCount)
+	const totalGap = gap * (itemsPerRow - 1)
+
+	inlineItemBasis.value = `calc((100% - ${totalGap}px) / ${itemsPerRow})`
+}
+
+onMounted(() => {
+	inlineResizeObserver = new ResizeObserver(updateInlineLayout)
+	if (inlineWrapper.value) { inlineResizeObserver.observe(inlineWrapper.value) }
+	updateInlineLayout()
+})
+
+onBeforeUnmount(() => inlineResizeObserver?.disconnect())
+
+watch([() => visibleOptions.value.length, () => props.inline], async () => {
+	await nextTick()
+	updateInlineLayout()
+})
+
 async function loadOptionsIfNeeded() {
 	if (typeof props.options === 'function') {
 		try {
@@ -144,7 +176,8 @@ function handleChange() {
 		<p v-if="label" :id="`${name}-label`" class="group-label">
 			{{ resolveI18n(label) }} <span v-if="required">*</span>
 		</p>
-<div class="radio-group-wrap" :class="[wrapperClass, { 'radio-group-wrap--inline': inline }]">
+<div ref="inlineWrapper" class="radio-group-wrap" :class="[wrapperClass, { 'radio-group-wrap--inline': inline }]"
+	:style="inline ? { '--rg-item-basis': inlineItemBasis } : undefined">
 	<label v-for="(opt, index) in visibleOptions" :key="opt.id || `${name}-${index}`" class="border rounded flex active-list-item hover mb-05" :for="opt.id || `${name}-${index}`"
 		:class="{ 'p-05 gap-025': thin, 'py-1 gap-075': !thin, 'ps-05': !hideRadio, 'px-1': hideRadio && !thin, 'bg-gray-light': !bgColor && !flat, 'align-items-start': align === 'start' || align === 'top', 'align-items-center': align === 'center', 'align-items-end': align === 'end' || align === 'bottom', invertedActive, 'is-option-disabled': disabled || opt.disabled }"
 				:style="{ backgroundColor: bgColor, borderColor }">
@@ -154,9 +187,9 @@ function handleChange() {
 					'hideRadio': hideRadio,
 }" @focus="handleFocus" @blur="handleBlur" @change="handleChange">
 				<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025"
-					:class="{ 'txt-center justify-content-center': textAlign === 'center', 'txt-end justify-content-end': textAlign === 'right', 'txt-start justify-content-start': textAlign === 'left' }"
+					:class="{ 'txt-center justify-content-center mx-auto': textAlign === 'center', 'txt-end justify-content-end': textAlign === 'right', 'txt-start justify-content-start': textAlign === 'left' }"
 					:style="{ color: textColor }">
-					<img v-if="opt.imgSrc" class="py-025 radius-05 m_w40 object-fit" height="40" width="40" :src="opt.imgSrc" :alt="opt.imgAlt">
+					<img v-if="opt.imgSrc" class="py-025 radius-05 m_w40 object-fit" height="40" width="40" :src="opt.imgSrc" :alt="opt.imgAlt || opt.label || ''">
 					<Icon v-else-if="opt.icon" :icon="opt.icon" :size="1" />
 					<div class="">
 						<div v-if="opt.label" class="m-0 m_txt-14 line-height-14" v-html="sanitizeHtml(opt.label)" />
@@ -208,7 +241,8 @@ gap: 0.5rem;
 }
 
 .radio-group-wrap--inline > label {
-flex: 1 1 0;
+flex: 1 1 var(--rg-item-basis, 90px);
+min-width: 0;
 margin-bottom: 0 !important;
 }
 

package/src/components/layout/AppContent.vue

@@ -86,7 +86,9 @@ 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)
+// Only a real navigation sidebar gets a menu-toggle — not a chat dock that merely
+// occupies the `start` rail (role: 'dock'). Undefined role = sidebar (back-compat).
+const hasSidebar = computed(() => regions.value.start.present && regions.value.start.role !== 'dock')
 
 // Resolve the effective variant, in priority order: explicit `variant` wins; then
 // the `card` shorthand; then the legacy `border` boolean; else the historical

package/src/components/layout/AppLayout.vue

@@ -16,10 +16,12 @@
   0.5rem) insets .page-content — the single element common to every archetype, so
   spacing is identical with or without AppContent. Use "0" for full-bleed.
 
-  Docked panels (ChatDock) position themselves fixed and read the published vars
+  Push rails are REAL in-flow boxes: a child (AppSidebar/ChatDock) reports
+  {present, open, mode:'push', size} via setStart/setEnd and simply fills the box
+  (width/height:100%). AppLayout owns the reserved width + the drag-resize handle;
+  the app never mirrors width by hand. Overlay rails (mobile sidebar drawer,
+  floating/full chat) report mode:'overlay' and position themselves fixed, reading
   `--bgl-region-top` / `--bgl-region-bottom` to sit below/above the nav bands.
-  They report {present, open, mode, size} via the injected setEnd() — the layout
-  does the inset math; the app never mirrors width/open by hand.
 
   Full-page views (e.g. /ai) are just routes; hide the dock there to avoid double UI.
 -->
@@ -67,7 +69,11 @@ const props = withDefaults(defineProps<Props>(), {
 	contentPaddingMobile: '0.5rem',
 })
 
-const emit = defineEmits<{ 'update:open': [value: boolean] }>()
+const emit = defineEmits<{
+	'update:open': [value: boolean]
+	/** Fired live during a drag-resize of a resizable start/end region. */
+	resize: [payload: { side: RegionSide, size: string }]
+}>()
 // Explicit type breaks a vue-tsc dts circular-inference (TS7022) where `slots`
 // is referenced inside the `regions` ref initializer below.
 const slots: Slots = useSlots()
@@ -185,27 +191,108 @@ function slotHasContent(fn?: (...args: any[]) => any): boolean {
 		return true
 	})
 }
-const endHasContent = computed(() => slotHasContent(slots.end) || slotHasContent(slots.aside))
+// A side's slot renders real content right now. Applies to BOTH start and end so a
+// rail auto-releases its reserved box when its child is `v-if`'d away (e.g. the dock
+// hidden on the full-page /ai route) — without the child having to report present:false
+// on unmount. AppSidebar always renders real content when mounted, so this is a no-op
+// for a normal sidebar and only bites when a slot goes empty.
+function sideHasContent(side: RegionSide): boolean {
+	if (side === 'start') { return slotHasContent(slots.start) || slotHasContent(slots.sidebar) }
+	if (side === 'end') { return slotHasContent(slots.end) || slotHasContent(slots.aside) }
+	return true
+}
+
+// ── Region sizing ─────────────────────────────────────────────────────────────
+// A push start/end region is a real IN-FLOW box in the row: it occupies `reserved`
+// width and the child fills it. An overlay region (mobile drawer, floating chat)
+// floats fixed and reserves nothing. `reserved` is the box's flex-basis — the center
+// naturally fills whatever's left, so there's no margin trick anymore.
+function isOverlay(side: RegionSide): boolean {
+	const r = regions.value[side]
+	// A region is an overlay when it says so, or when it's the sidebar on mobile
+	// (the drawer always slides over content there).
+	return r.mode === 'overlay' || (side === 'start' && isMobile.value)
+}
 
-// ── Center inset math — reserve room only for present + open + push regions ────
 function reserved(side: RegionSide): string {
 	const r = regions.value[side]
-	// The sidebar overlays (drawer) on mobile → reserves nothing.
-	const overlay = r.mode === 'overlay' || (side === 'start' && isMobile.value)
-	// #end reserves nothing when its slot renders nothing (e.g. dock v-if'd away).
-	if (side === 'end' && !endHasContent.value) { return '0' }
-	if (!r.present || overlay) { return '0' }
+	// A rail reserves nothing when its slot renders nothing (e.g. dock v-if'd away).
+	if ((side === 'start' || side === 'end') && !sideHasContent(side)) { return '0' }
+	if (!r.present || isOverlay(side)) { return '0' }
 	return r.open ? r.size : r.collapsedSize
 }
 
-// start/end are fixed side rails → reserved via inline margins.
-// top/bottom render in-flow inside <main> (flex column), so flexbox handles their
-// height automatically — no block-axis margin math (they inset only the center).
-const mainContentStyles = computed(() => ({
-	marginInlineStart: reserved('start'),
-	marginInlineEnd: reserved('end'),
+// Is this side rendered as an in-flow reserved rail right now? (present, pushing).
+function isFlow(side: RegionSide): boolean {
+	const r = regions.value[side]
+	if ((side === 'start' || side === 'end') && !sideHasContent(side)) { return false }
+	return r.present && !isOverlay(side)
+}
+
+// The row is a CSS grid: [start | center | end]. AppLayout owns the whole layout by
+// declaring the track sizes here — the rails just fill their track (100%), the center
+// takes the rest via minmax(0,1fr). Overlay regions are `fixed` (out of flow) so their
+// track collapses to 0 and they float above instead. Animating grid-template-columns
+// gives the open/close + resize slide for free.
+const rowStyle = computed(() => ({
+	gridTemplateColumns: `${reserved('start')} minmax(0, 1fr) ${reserved('end')}`,
 }))
 
+// ── Region drag-resize (start/end only) ───────────────────────────────────────
+// AppLayout owns the resize gesture: a child becomes resizable just by reporting
+// `resizable`+`minSize`+`maxSize`. The handle is a thin grip on the in-flow box's
+// inner edge; dragging mutates `regions[side].size` live (px), clamped to bounds.
+const RESIZABLE_SIDES = ['start', 'end'] as const
+type ResizableSide = (typeof RESIZABLE_SIDES)[number]
+
+function parsePx(v: string | undefined, fallback: number): number {
+	if (!v) { return fallback }
+	const n = Number.parseFloat(v)
+	return Number.isFinite(n) ? n : fallback
+}
+
+// A handle shows only for a present, open, in-flow, resizable region.
+function handleVisible(side: ResizableSide): boolean {
+	const r = regions.value[side]
+	return !!r.resizable && r.open && isFlow(side)
+}
+
+let dragSide: ResizableSide | null = null
+let dragStartX = 0
+let dragStartW = 0
+
+function onResizeMove(e: PointerEvent) {
+	if (!dragSide) { return }
+	const r = regions.value[dragSide]
+	const min = parsePx(r.minSize, 0)
+	const max = parsePx(r.maxSize, window.innerWidth)
+	// Physical sign: RTL flips the inline axis. A `start` rail grows as the pointer
+	// moves toward the end edge; an `end` rail grows toward the start edge.
+	const rtl = typeof document !== 'undefined' && document.dir === 'rtl'
+	const dx = e.clientX - dragStartX
+	// LTR: start grows with +dx, end grows with −dx. RTL inverts both.
+	const dirSign = rtl ? -1 : 1
+	const sideSign = dragSide === 'start' ? 1 : -1
+	const next = Math.min(max, Math.max(min, dragStartW + dx * dirSign * sideSign))
+	const size = `${next}px`
+	patch(dragSide, { size })
+	emit('resize', { side: dragSide, size })
+}
+function onResizeUp() {
+	dragSide = null
+	document.body.style.userSelect = ''
+	window.removeEventListener('pointermove', onResizeMove)
+	window.removeEventListener('pointerup', onResizeUp)
+}
+function onResizeDown(side: ResizableSide, e: PointerEvent) {
+	dragSide = side
+	dragStartX = e.clientX
+	dragStartW = parsePx(regions.value[side].size, 0)
+	document.body.style.userSelect = 'none'
+	window.addEventListener('pointermove', onResizeMove)
+	window.addEventListener('pointerup', onResizeUp)
+}
+
 // Published on the layout root so a fixed docked panel (ChatDock) can inset itself
 // below the top band / above the bottom band:
 //   inset-block-start: var(--bgl-region-top); inset-block-end: var(--bgl-region-bottom);
@@ -246,6 +333,8 @@ onMounted(() => {
 onUnmounted(() => {
 	window.removeEventListener('resize', onResize)
 	clearTimeout(resizeAnimTimer)
+	window.removeEventListener('pointermove', onResizeMove)
+	window.removeEventListener('pointerup', onResizeUp)
 })
 
 const slotBind = computed(() => ({ isOpen, isMobile, toggleMenu, closeOnMobile }))
@@ -259,23 +348,30 @@ const slotBind = computed(() => ({ isOpen, isMobile, toggleMenu, closeOnMobile }
 			<slot name="top" v-bind="{ ...slotBind, region: regions.top, setRegion: setTop }" />
 		</div>
 
-		<!-- The main row: start rail | center | end rail. -->
-		<div class="app-row relative">
+		<!-- The main row is a CSS grid: [start | center | end]. The parent owns every
+		     track size (rowStyle → grid-template-columns); each rail just fills its
+		     track. Overlay rails (mobile drawer, floating chat) collapse their track
+		     to 0 and their fixed child floats above instead. -->
+		<div class="app-row relative" :class="{ 'app-layout--resizing': isResizing }" :style="rowStyle">
 			<!-- Mobile sidebar drawer backdrop -->
 			<div v-if="startOverlayOpen" class="overlay" @click="closeOnMobile" />
 
-			<!-- start region (sidebar). #sidebar is the back-compat alias. -->
-			<slot name="start" v-bind="{ ...slotBind, region: regions.start, setRegion: setStart }">
-				<slot name="sidebar" v-bind="slotBind" />
-			</slot>
-
-			<!-- end region (aside / chat). #aside is the back-compat alias. -->
-			<slot name="end" v-bind="{ ...slotBind, region: regions.end, setRegion: setEnd }">
-				<slot name="aside" v-bind="{ isMobile }" />
-			</slot>
+			<!-- start rail. #sidebar = back-compat alias. -->
+			<div class="region-box region-box--start" :class="{ 'region-box--flow': isFlow('start') }">
+				<slot name="start" v-bind="{ ...slotBind, region: regions.start, setRegion: setStart }">
+					<slot name="sidebar" v-bind="slotBind" />
+				</slot>
+				<div
+					v-show="handleVisible('start')"
+					class="region-resize region-resize--start"
+					@pointerdown.prevent="onResizeDown('start', $event)"
+				>
+					<div class="region-resize-bar" />
+				</div>
+			</div>
 
-			<!-- Center content, inset by the start/end push rails -->
-			<main class="main-content flex column ease-300" :style="mainContentStyles">
+			<!-- Center content — the minmax(0,1fr) track. -->
+			<main class="main-content flex column">
 				<!-- #header alias: AppContent-style per-page header (center-only). -->
 				<slot name="header" v-bind="slotBind" />
 
@@ -283,6 +379,20 @@ const slotBind = computed(() => ({ isOpen, isMobile, toggleMenu, closeOnMobile }
 					<slot v-bind="slotBind" />
 				</div>
 			</main>
+
+			<!-- end rail (aside / chat). #aside = back-compat alias. -->
+			<div class="region-box region-box--end" :class="{ 'region-box--flow': isFlow('end') }">
+				<slot name="end" v-bind="{ ...slotBind, region: regions.end, setRegion: setEnd }">
+					<slot name="aside" v-bind="{ isMobile }" />
+				</slot>
+				<div
+					v-show="handleVisible('end')"
+					class="region-resize region-resize--end"
+					@pointerdown.prevent="onResizeDown('end', $event)"
+				>
+					<div class="region-resize-bar" />
+				</div>
+			</div>
 		</div>
 
 		<!-- bottom region: full-width band below the start/end rails. -->
@@ -309,13 +419,67 @@ width: 100%;
 z-index: 45;
 }
 
-/* The rail row fills the remaining height and holds start | center | end. */
+/* The rail row is a grid: [start | center | end]. Track sizes come from inline
+   `grid-template-columns` (rowStyle); animating it slides open/close + resize. */
 .app-row {
 flex: 1;
-display: flex;
+display: grid;
 min-height: 0;
 overflow: hidden;
+transition: grid-template-columns 300ms ease;
+}
+/* Suppress the track animation while the viewport is being resized (breakpoint cross). */
+.app-row.app-layout--resizing {
+transition: none;
+}
+
+/* ── Region rails — grid tracks ───────────────────────────────────────────────
+   A start/end rail fills its grid track (the parent sizes the track). The child
+   fills the rail (100%). An overlay rail has a 0-width track — its fixed child
+   floats above instead, so this box is inert. */
+.region-box {
+	position: relative;
+	min-width: 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+.region-box--flow {
+	overflow: hidden;
 }
+/* The child (AppSidebar/ChatDock) fills the rail entirely. */
+.region-box--flow > :first-child {
+	width: 100%;
+	height: 100%;
+	min-height: 0;
+}
+
+/* Region resize handles — a thin grip on the in-flow box's inner edge. */
+.region-resize {
+	position: absolute;
+	inset-block: 0;
+	width: 10px;
+	z-index: 46;
+	cursor: ew-resize;
+	touch-action: none;
+	user-select: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+/* Sit on the seam facing the center: start's inner edge is its END side, and vice-versa. */
+.region-resize--start { inset-inline-end: -5px; }
+.region-resize--end { inset-inline-start: -5px; }
+.region-resize-bar {
+	width: 3px;
+	height: 28px;
+	border-radius: 9999px;
+	background: var(--bgl-primary);
+	opacity: 0;
+	transition: opacity 0.15s;
+}
+.region-resize:hover .region-resize-bar,
+.region-resize:active .region-resize-bar { opacity: 1; }
 
 /* Overlay for mobile */
 .overlay {
@@ -325,24 +489,13 @@ background: rgba(0, 0, 0, 0.5);
 z-index: 40;
 }
 
-/* Main Content */
+/* Main Content — the center grid track (minmax(0,1fr)). */
 .main-content {
-flex: 1;
+min-width: 0;
 overflow: hidden;
-/* Pushes when any push region opens/closes. Keep in sync with a panel's own
-   slide transition (e.g. ChatWindow) so they move together. */
-transition: margin 300ms ease;
 	min-height: 0;
 }
 
-/* While the viewport is actively being resized, kill the push transitions so
-   crossing the mobile breakpoint doesn't animate the center content sliding
-   sideways. The animation still plays on an intentional sidebar toggle (when
-   `--resizing` is absent). */
-.app-layout--resizing .main-content {
-transition: none;
-}
-
 /* 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