@bagelink/vue 1.15.112 → 1.15.116

package/src/components/layout/appLayoutContext.ts

@@ -4,24 +4,70 @@ import { inject, ref } from 'vue'
 export const SIDEBAR_COLLAPSED_WIDTH = '66px'
 export const SIDEBAR_COLLAPSED_WIDTH_CARD = '82px'
 
+export type RegionSide = 'start' | 'end' | 'top' | 'bottom'
+
+export interface RegionState {
+	/** Something is mounted in this region (drives whether we reserve/paint it). */
+	present: boolean
+	/** Expanded (reserves full `size`) vs collapsed/hidden (reserves `collapsedSize`). */
+	open: boolean
+	/**
+	 * push    → reserves room; center content is inset by `size` (or `collapsedSize`).
+	 * overlay → floats above center; reserves nothing (floating/full chat, mobile drawer).
+	 */
+	mode: 'push' | 'overlay'
+	/** Inline-size for start/end, block-size for top/bottom. Any CSS length. */
+	size: string
+	/** Size when `open === false`. `'0'` fully collapses the region away. */
+	collapsedSize: string
+}
+
+export type RegionPatch = Partial<RegionState>
+
 export interface AppLayoutContext {
-	/** Sidebar open (expanded) state */
+	// ── existing (kept as aliases over regions.start) ─────────────────────
+	/** Sidebar open (expanded) state — alias of `regions.start.open`. */
 	isOpen: Ref<boolean>
-	/** Viewport is below MOBILE_BREAKPOINT */
+	/** Viewport is below MOBILE_BREAKPOINT. */
 	isMobile: Ref<boolean>
+	/** Toggle the sidebar (start region) open/closed — alias of `toggleStart`. */
 	toggleMenu: () => void
-	/** Close the sidebar when on mobile (e.g. after navigating) */
+	/** Close the sidebar when on mobile (e.g. after navigating). */
 	closeOnMobile: () => void
 	sidebarWidth: string
 	sidebarCollapsedWidth: string
-	/** Sidebar rendered as a floating card */
+	/** Sidebar rendered as a floating card. */
 	sidebarCardStyle: boolean
+
+	// ── region manager ────────────────────────────────────────────────────
+	/** Live state for every edge. Center insets are derived from this. */
+	regions: Readonly<Ref<Record<RegionSide, RegionState>>>
+	/** Dedicated per-side patchers — a child (e.g. ChatWindow) reports its intent. */
+	setStart: (patch: RegionPatch) => void
+	setEnd: (patch: RegionPatch) => void
+	setTop: (patch: RegionPatch) => void
+	setBottom: (patch: RegionPatch) => void
+	/** Dedicated per-side open toggles. `toggleStart` === `toggleMenu`. */
+	toggleStart: () => void
+	toggleEnd: () => void
+	toggleTop: () => void
+	toggleBottom: () => void
 }
 
 export const AppLayoutKey: InjectionKey<AppLayoutContext> = Symbol('AppLayout')
 
+function inertRegions(): Ref<Record<RegionSide, RegionState>> {
+	const base: RegionState = { present: false, open: false, mode: 'push', size: '0', collapsedSize: '0' }
+	return ref({
+		start: { ...base },
+		end: { ...base },
+		top: { ...base },
+		bottom: { ...base },
+	})
+}
+
 /**
- * Access the AppLayout context (sidebar open state, mobile flag, toggle).
+ * Access the AppLayout context (region state, sidebar open state, mobile flag).
  * Works inside AppLayout's slots — including custom header buttons.
  * Outside an AppLayout it warns (dev) and returns an inert fallback.
  */
@@ -32,13 +78,23 @@ export function useAppLayout(): AppLayoutContext {
 	if (import.meta.env?.DEV) {
 		console.warn('[bagelink] useAppLayout() called outside <AppLayout>. AppSidebar/AppContent are designed to be used inside it.')
 	}
+	const noop = () => {}
 	return {
 		isOpen: ref(true),
 		isMobile: ref(false),
-		toggleMenu: () => {},
-		closeOnMobile: () => {},
+		toggleMenu: noop,
+		closeOnMobile: noop,
 		sidebarWidth: '260px',
 		sidebarCollapsedWidth: SIDEBAR_COLLAPSED_WIDTH,
 		sidebarCardStyle: false,
+		regions: inertRegions(),
+		setStart: noop,
+		setEnd: noop,
+		setTop: noop,
+		setBottom: noop,
+		toggleStart: noop,
+		toggleEnd: noop,
+		toggleTop: noop,
+		toggleBottom: noop,
 	}
 }

package/src/components/layout/index.ts

@@ -1,8 +1,9 @@
 export { default as AppContent } from './AppContent.vue'
 export { default as AppLayout } from './AppLayout.vue'
+export { default as AppNav } from './AppNav.vue'
 export { default as AppSidebar } from './AppSidebar.vue'
 export { useAppLayout } from './appLayoutContext'
-export type { AppLayoutContext } from './appLayoutContext'
+export type { AppLayoutContext, RegionSide, RegionState, RegionPatch } from './appLayoutContext'
 export { default as BottomMenu } from './BottomMenu.vue'
 export { default as Divider } from './Divider.vue'
 export { default as Layout } from './Layout.vue'

package/src/styles/dark.css

@@ -25,10 +25,8 @@
      #00000020 (translucent dark). Blends over any dark surface (bg, card,
      input) instead of being a fixed opaque gray. */
 
-  /* ---- Brand (slightly adjusted for dark backgrounds) ------------------- */
-  --bgl-primary: #4f7cff !important;
-  --bgl-primary-tint: #4f7cff33;
-  --bgl-primary-light: #1a2236;
+  /* ---- Brand (derived from the project's --bgl-primary, not hardcoded) --- */
+  --bgl-primary-tint: color-mix(in srgb, var(--bgl-primary) 20%, transparent);
 
   /* ---- Status / accent colors (tuned for dark backgrounds) ------------- *
 	 * The light-mode bases (e.g. blue #2e5bff, green #75c98f, red #ed6c6f,