@bagelink/vue 1.15.433 → 1.15.440

package/src/components/file-drop/useFileDropzone.test.ts

@@ -0,0 +1,108 @@
+import { describe, expect, it, vi } from 'vitest'
+import { effectScope, ref } from 'vue'
+import { useFileDropzone } from './useFileDropzone'
+
+function dragEvent(types = ['Files'], files = {} as FileList) {
+	return {
+		dataTransfer: { types, files },
+		preventDefault: vi.fn(),
+		stopPropagation: vi.fn(),
+	} as unknown as DragEvent
+}
+
+function setup(disabled = ref(false)) {
+	const scope = effectScope()
+	const onDrop = vi.fn()
+	const zone = scope.run(() => useFileDropzone({ disabled, onDrop }))!
+	return { scope, zone, onDrop, disabled }
+}
+
+describe('useFileDropzone', () => {
+	it('keeps nested enter/leave state balanced and clamps extra leaves', () => {
+		const { zone, scope } = setup()
+		zone.handleDragLeave(dragEvent())
+		zone.handleDragEnter(dragEvent())
+		zone.handleDragEnter(dragEvent())
+		zone.handleDragLeave(dragEvent())
+		expect(zone.isDragging.value).toBe(true)
+		zone.handleDragLeave(dragEvent())
+		expect(zone.isDragging.value).toBe(false)
+		scope.stop()
+	})
+
+	it('leaves text and internal drags untouched', () => {
+		const { zone, onDrop, scope } = setup()
+		for (const types of [[], ['text/plain'], ['text/uri-list']]) {
+			const event = dragEvent(types)
+			zone.handleDragEnter(event)
+			zone.handleDragOver(event)
+			zone.handleDragLeave(event)
+			zone.handleDrop(event)
+			expect(event.preventDefault).not.toHaveBeenCalled()
+			expect(event.stopPropagation).not.toHaveBeenCalled()
+		}
+		expect(zone.isDragging.value).toBe(false)
+		expect(onDrop).not.toHaveBeenCalled()
+		scope.stop()
+	})
+
+	it('passes the original unfiltered FileList and resets before callbacks', () => {
+		const scope = effectScope()
+		const files = { length: 2 } as FileList
+		const event = dragEvent(['Files', 'text/plain'], files)
+		const onDrop = vi.fn(() => expect(zone.isDragging.value).toBe(false))
+		const zone = scope.run(() => useFileDropzone({ onDrop }))!
+		zone.handleDragEnter(event)
+		zone.handleDrop(event)
+		expect(onDrop).toHaveBeenCalledWith(files, event)
+		expect(event.preventDefault).toHaveBeenCalled()
+		expect(event.stopPropagation).toHaveBeenCalled()
+		scope.stop()
+	})
+
+	it('reacts synchronously to disabled and can be reenabled', () => {
+		const { zone, onDrop, scope, disabled } = setup()
+		zone.handleDragEnter(dragEvent())
+		disabled.value = true
+		expect(zone.isDragging.value).toBe(false)
+		const event = dragEvent()
+		zone.handleDragEnter(event)
+		zone.handleDragOver(event)
+		zone.handleDrop(event)
+		expect(event.preventDefault).not.toHaveBeenCalled()
+		expect(onDrop).not.toHaveBeenCalled()
+		disabled.value = false
+		zone.handleDragEnter(event)
+		zone.handleDragLeave(event)
+		expect(zone.isDragging.value).toBe(false)
+		scope.stop()
+	})
+
+	it('supports getters, dragover-only activation and dragend/disposal reset', () => {
+		const scope = effectScope()
+		const disabled = ref(false)
+		const zone = scope.run(() => useFileDropzone({ disabled: () => disabled.value }))!
+		zone.handlers.dragover(dragEvent())
+		expect(zone.isDragging.value).toBe(true)
+		zone.handlers.dragleave(dragEvent())
+		expect(zone.isDragging.value).toBe(false)
+		zone.handlers.dragenter(dragEvent())
+		zone.handlers.dragend()
+		expect(zone.isDragging.value).toBe(false)
+		zone.handlers.dragenter(dragEvent())
+		scope.stop()
+		expect(zone.isDragging.value).toBe(false)
+	})
+
+	it('resets on malformed drops and throwing consumers', () => {
+		const scope = effectScope()
+		const zone = scope.run(() => useFileDropzone({ onDrop: () => { throw new Error('upload failed') } }))!
+		zone.handleDragEnter(dragEvent())
+		zone.handleDrop({ dataTransfer: null } as DragEvent)
+		expect(zone.isDragging.value).toBe(false)
+		zone.handleDragEnter(dragEvent())
+		expect(() => zone.handleDrop(dragEvent())).toThrow('upload failed')
+		expect(zone.isDragging.value).toBe(false)
+		scope.stop()
+	})
+})

package/src/components/file-drop/useFileDropzone.ts

@@ -0,0 +1,83 @@
+import { getCurrentScope, onScopeDispose, readonly, ref, toValue, watch } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+export interface UseFileDropzoneOptions {
+	disabled?: MaybeRefOrGetter<boolean | undefined>
+	/** Receives the original FileList; validation and upload policy belong to the consumer. */
+	onDrop?: (files: FileList, event: DragEvent) => void
+}
+
+/** Bind all returned handlers to the same drop target, or use v-on="handlers". */
+export function useFileDropzone(options: UseFileDropzoneOptions = {}) {
+	const isDragging = ref(false)
+	let dragDepth = 0
+
+	function reset() {
+		dragDepth = 0
+		isDragging.value = false
+	}
+
+	function acceptEvent(event: DragEvent) {
+		if (toValue(options.disabled)) {
+			reset()
+			return false
+		}
+		if (!Array.from(event.dataTransfer?.types ?? []).includes('Files')) { return false }
+		event.preventDefault()
+		event.stopPropagation()
+		return true
+	}
+
+	function handleDragEnter(event: DragEvent) {
+		if (!acceptEvent(event)) { return }
+		dragDepth++
+		isDragging.value = true
+	}
+
+	function handleDragOver(event: DragEvent) {
+		if (!acceptEvent(event)) { return }
+		// A target may be mounted underneath a drag already in progress.
+		dragDepth = Math.max(1, dragDepth)
+		isDragging.value = true
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		if (!acceptEvent(event)) { return }
+		dragDepth = Math.max(0, dragDepth - 1)
+		isDragging.value = dragDepth > 0
+	}
+
+	function handleDrop(event: DragEvent) {
+		reset()
+		if (!acceptEvent(event)) { return }
+		const files = event.dataTransfer?.files
+		if (files) { options.onDrop?.(files, event) }
+	}
+
+	const stopWatching = watch(() => toValue(options.disabled), disabled => {
+		if (disabled) { reset() }
+	}, { flush: 'sync' })
+
+	if (getCurrentScope()) {
+		onScopeDispose(() => {
+			stopWatching()
+			reset()
+		})
+	}
+
+	return {
+		isDragging: readonly(isDragging),
+		reset,
+		handleDragEnter,
+		handleDragOver,
+		handleDragLeave,
+		handleDrop,
+		handlers: {
+			dragenter: handleDragEnter,
+			dragover: handleDragOver,
+			dragleave: handleDragLeave,
+			drop: handleDrop,
+			dragend: reset,
+		},
+	}
+}

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

@@ -2,6 +2,7 @@
 import type { Ref, WritableComputedRef } from 'vue'
 
 import type { DraggableEvent } from '../../draggable/useDraggable'
+import { reorderItems } from '../../draggable/reorder'
 
 import { Btn, resolveI18n, useI18n, pathKeyToURL, richTextToPlainText } from '@bagelink/vue'
 import { computed, ref, watch, useSlots, type VNode } from 'vue'
@@ -121,11 +122,8 @@ function moveItem(from: number, to: number) {
 	if (to < 0 || to >= items.value.length || from === to) {
 		return
 	}
-	const [movedItem] = items.value.splice(from, 1)
-	items.value.splice(to, 0, movedItem)
-
-	const [movedMinimizedState] = minimizedItems.value.splice(from, 1)
-	minimizedItems.value.splice(to, 0, movedMinimizedState)
+	items.value = reorderItems(items.value, from, to)
+	minimizedItems.value = reorderItems(minimizedItems.value, from, to)
 
 	updateModel()
 }

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { UploadInputProps } from '../../../../types/BagelForm'
 import { Btn, IMAGE_FORMATS_REGEXP, Icon, Card, Image, pathKeyToURL, Loading, useI18n, resolveI18n } from '@bagelink/vue'
-import { watch, ref, computed, useSlots } from 'vue'
+import { watch, computed, useSlots } from 'vue'
+import { useFileDropzone } from '../../../file-drop/useFileDropzone'
 import { useFileUpload } from './useFileUpload'
 import { useBagelInputShell } from '../bagelInputShell'
 
@@ -78,28 +79,19 @@ const showDropZonePlaceholder = computed(
 
 const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
 
-const isDragOver = ref(false)
-
-function handleDrag(e: DragEvent, isDragging = false) {
-	e.preventDefault()
-	e.stopPropagation()
-	if (!props.disabled) { isDragOver.value = isDragging }
-}
+const { isDragging: isDragOver, handlers } = useFileDropzone({
+	disabled: () => props.disabled,
+	onDrop: files => {
+		emit('addFileStart')
+		addFile(files)
+	},
+})
 
 function updateModelValue() {
 	if (props.multiple) { emit('update:modelValue', pathKeys.value) }
 	else { emit('update:modelValue', pathKeys.value[0] || undefined) }
 }
 
-async function handleDrop(e: DragEvent) {
-	if (props.disabled) { return }
-	e.preventDefault()
-	e.stopPropagation()
-	emit('addFileStart')
-	addFile(e.dataTransfer?.files)
-	isDragOver.value = false
-}
-
 function fileName(pathKey: string) {
 	if (!pathKey || typeof pathKey !== 'string') { return 'file' }
 	return pathKey.split('/').pop() || 'file'
@@ -114,8 +106,7 @@ function fileName(pathKey: string) {
 		<label v-if="label">{{ label }}<span v-if="required"> *</span></label>
 		<input v-if="required && !pathKeys.length" :name="name || id" placeholder="required" type="text" required class="pixel">
 		<Card
-			v-if="theme === 'basic'" outline class="flex p-05 gap-1" @dragover="(e: DragEvent) => handleDrag(e, true)"
-			@drop="handleDrop"
+			v-if="theme === 'basic'" outline class="flex p-05 gap-1" v-on="handlers"
 		>
 			<Btn
 				v-if="!pathKeys.length && !fileQueue.length" class="px-1-5" icon="upload" outline
@@ -161,8 +152,7 @@ function fileName(pathKey: string) {
 				'fileDropZone': !pathKeys.length && !fileQueue.length,
 				'dragover': isDragOver,
 				'bgl_oval-upload': oval,
-			}" :style="{ width, height }" @click="browse()" @dragover="(e) => handleDrag(e, true)" @drop="handleDrop"
-			@dragleave="(e) => handleDrag(e)"
+			}" :style="{ width, height }" v-on="handlers" @click="browse()"
 		>
 			<slot name="files" :files="pathKeys" :fileQueue>
 				<div v-if="multiple" class="bgl-multi-preview">

package/src/components/index.ts

@@ -17,8 +17,11 @@ export { default as DataPreview } from './DataPreview.vue'
 export { default as DataTable } from './dataTable/DataTable.vue'
 /** @deprecated Use DataTable instead. TableSchema is an alias that will be removed in a future version. */
 export { default as TableSchema } from './dataTable/DataTable.vue'
-export { Draggable, useDraggable, vDraggable } from './draggable'
+export { Draggable, useDraggable, vDraggable, reorderItems, insertionIndexToFinalIndex } from './draggable'
+export type { DraggableEvent, DraggableOptions } from './draggable'
 export { default as DragOver } from './DragOver.vue'
+export { useFileDropzone } from './file-drop/useFileDropzone'
+export type { UseFileDropzoneOptions } from './file-drop/useFileDropzone'
 export { default as Dropdown } from './Dropdown.vue'
 export { default as EmptyState } from './EmptyState.vue'
 export { default as FieldSetVue } from './FieldSetVue.vue'

package/src/components/layout/AppLayout.design.md

@@ -1,6 +1,8 @@
 # AppLayout — Region-based redesign (design doc)
 
-> Status: **proposed** · Owner: layout · Scope: `@bagelink/vue`
+> Status: **historical proposal** · Owner: layout · Scope: `@bagelink/vue`
+> The legacy chat panel described below has been retired. Current chat integrations
+> use `ChatDock`, `FloatingPanel`, or a full-page route; this proposal is not an API guide.
 > Goal: turn `AppLayout` into a single-source-of-truth **region manager** so every
 > edge (`start` / `end` / `top` / `bottom`) is a first-class, full-bleed slot that
 > can either **push** the center content or **overlay** it — without any manual
@@ -13,7 +15,7 @@
 ### What hurts today
 - **The `end` aside is bolted on.** `AppLayout` only renders an empty `<slot name="aside">`
   and takes `asideWidth` + `asideOpen` as loose props, used *solely* to compute the
-  center's `margin-inline-end`. The actual panel (`ChatWindow`) positions itself
+  center's `margin-inline-end`. The actual panel (`legacy chat panel`) positions itself
   `fixed`, owns its own width, open state, mode and resize.
 - **Double book-keeping.** Because the panel owns its width/open state *and* the layout
   needs the same numbers to reserve room, the consuming app (`personal_budget/App.vue`)
@@ -30,7 +32,7 @@
   literally put `100vh` / `100vw` inside and it fills exactly that band).
 - A region either **pushes** the center (reserves room) or **overlays** it (floats on top).
 - **One source of truth** — `AppLayout` owns each region's `{ present, open, mode, size }`.
-  Children (e.g. `ChatWindow`) *report into* it via `setRegion`; the layout does the math.
+  Children (e.g. `legacy chat panel`) *report into* it via `setRegion`; the layout does the math.
 - **The sidebar keeps working exactly as-is.** We generalize the pattern it already uses;
   we do **not** rewrite `AppSidebar.vue` or its CSS.
 
@@ -113,7 +115,7 @@ Each slot receives:
 | prop `sidebarWidth` | seeds `regions.start.size` | Single source of truth now; `AppSidebar` reads the same injected value. |
 | prop `sidebarCardStyle` | seeds `regions.start.collapsedSize` (82px) | Removes the 66/82 mismatch. |
 | prop `asideWidth` | seeds `regions.end.size` | Still accepted; `setRegion` is the preferred path. |
-| prop `asideOpen` | seeds `regions.end.open` + `mode:'push'` | Still accepted; `ChatWindow` should call `setRegion` instead. |
+| prop `asideOpen` | seeds `regions.end.open` + `mode:'push'` | Still accepted; `legacy chat panel` should call `setRegion` instead. |
 | `v-model:open` | maps to `regions.start.open` | Unchanged. |
 
 ### 3.3 Injected context (`appLayoutContext.ts`)
@@ -167,18 +169,14 @@ just `start` with `mode: 'overlay'` on mobile.
     <AppSidebar :nav-links="navLinks" :footer-links="footerLinks" :card="true" … />
   </template>
 
-  <!-- ChatWindow reports its own state into the end region; layout reserves room
+  <!-- legacy chat panel reports its own state into the end region; layout reserves room
        only while docked. floating/full → mode:'overlay' → no push. -->
   <template #end>
-    <ChatWindow
-      ref="chatWindow"
-      :agent-id="BUDGET_AGENT_ID" :api="agents"
-      @update:open="chatOpen = $event"
-    />
+    <!-- Use ChatDock for docked chat; FloatingPanel for an overlay. -->
   </template>
 
   <RouterWrapper />
-  <Btn v-if="!chatOpen" color="primary" round icon="chat" … @click="chatWindow?.open()" />
+  <Btn v-if="!chatOpen" color="primary" round icon="chat" … @click="chatOpen = true" />
 </AppLayout>
 ```
 
@@ -186,9 +184,9 @@ just `start` with `mode: 'overlay'` on mobile.
 
 ---
 
-## 6. `ChatWindow` changes (minimal, careful)
+## 6. `legacy chat panel` changes (minimal, careful)
 
-`ChatWindow` gains one consolidated reporter that fires whenever `isOpen`, `activeMode`
+`legacy chat panel` gains one consolidated reporter that fires whenever `isOpen`, `activeMode`
 or `dockWidth` change. It resolves mode → region intent:
 
 ```ts
@@ -198,7 +196,7 @@ or `dockWidth` change. It resolves mode → region intent:
 ```
 
 It calls `setRegion(side, patch)` from the injected context (or emits `@region` for
-apps not using injection). **No change** to `ChatWindow`'s own `fixed` positioning,
+apps not using injection). **No change** to `legacy chat panel`'s own `fixed` positioning,
 transitions, or resize logic — in push mode it is still `fixed` on the edge; the center
 now knows to leave room because it reads the reported `size`, not a hand-passed prop.
 
@@ -217,5 +215,5 @@ now knows to leave room because it reads the reported `size`, not a hand-passed
 2. Rework `AppLayout.vue` to hold the region map + compute center insets from it;
    render `#start/#end/#top/#bottom` with `#sidebar/#aside` aliasing.
 3. Verify `AppSidebar` unchanged (desktop push, mobile overlay, card collapse widths).
-4. Add the consolidated region reporter to `ChatWindow`; simplify `personal_budget/App.vue`.
+4. Add the consolidated region reporter to `legacy chat panel`; simplify `personal_budget/App.vue`.
 5. Regenerate `COMPONENTS.md` (`pnpm gen:cheatsheet`).

package/src/components/layout/AppLayout.vue

@@ -29,6 +29,7 @@
 import { ref, provide, onMounted, onUnmounted, computed, watch, useSlots, Comment, Text } from 'vue'
 import type { Slots } from 'vue'
 import { useEscapeKey } from '../../composables/useEscapeKey'
+import { usePointerSession } from '../../composables/usePointerSession'
 import { MOBILE_BREAKPOINT } from '../../utils/constants'
 import {
 	AppLayoutKey,
@@ -257,50 +258,61 @@ function handleVisible(side: ResizableSide): boolean {
 	return !!r.resizable && r.open && isFlow(side)
 }
 
-let dragSide: ResizableSide | null = null
-let dragStartX = 0
-let dragStartW = 0
-/** True while the user is drag-resizing a start/end rail. Suppresses the
- *  grid-template-columns transition so the track tracks the pointer 1:1
- *  instead of lagging behind a 300ms ease. */
+const regionPointer = usePointerSession()
 const isRegionDragging = ref(false)
 
-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 resizeRegion(side: ResizableSide, width: number) {
+	const r = regions.value[side]
+	const size = `${Math.min(parsePx(r.maxSize, window.innerWidth), Math.max(parsePx(r.minSize, 0), width))}px`
+	// Rails publish live sizes because their grid tracks and dock children share state.
+	patch(side, { size })
+	emit('resize', { side, size })
 }
-function onResizeUp() {
-	dragSide = null
-	isRegionDragging.value = false
-	document.body.style.cursor = ''
-	document.body.style.userSelect = ''
-	window.removeEventListener('pointermove', onResizeMove)
-	window.removeEventListener('pointerup', onResizeUp)
+
+function resizeSign(side: ResizableSide, handle: HTMLElement) {
+	return (getComputedStyle(handle).direction === 'rtl' ? -1 : 1) * (side === 'start' ? 1 : -1)
 }
+
 function onResizeDown(side: ResizableSide, e: PointerEvent) {
-	dragSide = side
-	dragStartX = e.clientX
-	dragStartW = parsePx(regions.value[side].size, 0)
+	if (e.button !== 0 || e.isPrimary === false || !handleVisible(side)) return
+	regionPointer.cancel()
+	const handle = e.currentTarget as HTMLElement
+	const original = regions.value[side].size
+	const width = handle.parentElement?.getBoundingClientRect().width ?? parsePx(original, 0)
+	const sign = resizeSign(side, handle)
+	const update = (event: PointerEvent) => resizeRegion(side, width + (event.clientX - e.clientX) * sign)
 	isRegionDragging.value = true
-	document.body.style.cursor = 'ew-resize'
-	document.body.style.userSelect = 'none'
-	window.addEventListener('pointermove', onResizeMove)
-	window.addEventListener('pointerup', onResizeUp)
+	regionPointer.start(e, {
+		cursor: 'ew-resize',
+		onMove: update,
+		onEnd(event) {
+			update(event)
+			isRegionDragging.value = false
+		},
+		onCancel() {
+			patch(side, { size: original })
+			emit('resize', { side, size: original })
+			isRegionDragging.value = false
+		},
+	})
 }
 
+function onResizeKeyDown(side: ResizableSide, event: KeyboardEvent) {
+	if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return
+	event.preventDefault()
+	regionPointer.cancel()
+	const handle = event.currentTarget as HTMLElement
+	const r = regions.value[side]
+	const width = handle.parentElement?.getBoundingClientRect().width ?? parsePx(r.size, 0)
+	const step = (event.shiftKey ? 50 : 10) * (event.key === 'ArrowLeft' ? -1 : 1)
+	resizeRegion(side, event.key === 'Home' ? parsePx(r.minSize, 0)
+		: event.key === 'End' ? parsePx(r.maxSize, window.innerWidth)
+			: width + step * resizeSign(side, handle))
+}
+
+watch(() => JSON.stringify(RESIZABLE_SIDES.map(side => [regions.value[side].open, regions.value[side].present, regions.value[side].mode, regions.value[side].resizable])), () => regionPointer.cancel())
+watch(isMobile, () => regionPointer.cancel(), { flush: 'sync' })
+
 // 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);
@@ -341,8 +353,6 @@ onMounted(() => {
 onUnmounted(() => {
 	window.removeEventListener('resize', onResize)
 	clearTimeout(resizeAnimTimer)
-	window.removeEventListener('pointermove', onResizeMove)
-	window.removeEventListener('pointerup', onResizeUp)
 })
 
 const slotBind = computed(() => ({ isOpen, isMobile, toggleMenu, closeOnMobile }))
@@ -372,6 +382,10 @@ const slotBind = computed(() => ({ isOpen, isMobile, toggleMenu, closeOnMobile }
 				<div
 					v-show="handleVisible('start')"
 					class="region-resize region-resize--start"
+					role="separator" tabindex="0" aria-orientation="vertical" aria-label="Resize start panel"
+					:aria-valuenow="parsePx(regions.start.size, 0)" :aria-valuemin="parsePx(regions.start.minSize, 0)"
+					:aria-valuemax="regions.start.maxSize ? parsePx(regions.start.maxSize, 0) : undefined"
+					@keydown="onResizeKeyDown('start', $event)"
 					@pointerdown.prevent="onResizeDown('start', $event)"
 				>
 					<div class="region-resize-bar" />
@@ -396,6 +410,10 @@ const slotBind = computed(() => ({ isOpen, isMobile, toggleMenu, closeOnMobile }
 				<div
 					v-show="handleVisible('end')"
 					class="region-resize region-resize--end"
+					role="separator" tabindex="0" aria-orientation="vertical" aria-label="Resize end panel"
+					:aria-valuenow="parsePx(regions.end.size, 0)" :aria-valuemin="parsePx(regions.end.minSize, 0)"
+					:aria-valuemax="regions.end.maxSize ? parsePx(regions.end.maxSize, 0) : undefined"
+					@keydown="onResizeKeyDown('end', $event)"
 					@pointerdown.prevent="onResizeDown('end', $event)"
 				>
 					<div class="region-resize-bar" />
@@ -486,6 +504,7 @@ transition: none;
 	opacity: 0;
 	transition: opacity 0.15s;
 }
+.region-resize:focus-visible .region-resize-bar,
 .region-resize:hover .region-resize-bar,
 .region-resize:active .region-resize-bar { opacity: 1; }
 

package/src/components/layout/Panel.vue

@@ -101,6 +101,11 @@ onMounted(() => {
 	ctx.syncPanelOrder()
 })
 
+watch(panelEl, (el) => {
+	if (panelState.value) panelState.value.el.value = el
+	if (el) ctx.syncPanelOrder()
+})
+
 onUnmounted(() => { ctx.unregisterPanel(panelId) })
 
 // ── Computed state ─────────────────────────────────────────────────────────
@@ -118,6 +123,13 @@ const isLastPanel = computed(() => {
 	return idx >= 0 && idx === ps.length - 1
 })
 
+const handleAvailable = computed(() => {
+	const index = ctx.panels.value.findIndex(panel => panel.id === panelId)
+	const next = ctx.panels.value[index + 1]
+	return !!next && !next.collapsed.value && !(ctx.isMobile.value && next.config.hideOnMobile)
+		&& !(props.flex && next.config.flex)
+})
+
 const panelStyle = computed(() => {
 	if (isCollapsed.value) {
 		return isHorizontal.value
@@ -153,8 +165,13 @@ defineExpose({ toggleCollapse, size, isCollapsed })
 		</div>
 
 		<div
-			v-if="props.handle && !isLastPanel && !isCollapsed" class="panel__handle"
+			v-if="props.handle && !isLastPanel && !isCollapsed && handleAvailable" class="panel__handle"
 			:class="isHorizontal ? 'panel__handle--h' : 'panel__handle--v'"
+			role="separator" tabindex="0" :aria-label="`Resize ${panelId}`"
+			:aria-orientation="isHorizontal ? 'vertical' : 'horizontal'"
+			:aria-valuenow="size" :aria-valuemin="props.min"
+			:aria-valuemax="Number.isFinite(props.max) ? props.max : undefined"
+			@keydown="ctx.onHandleKeyDown(panelId, $event)"
 			@pointerdown="ctx.onHandlePointerDown(panelId, $event)"
 		>
 			<div class="panel__handle-bar" />
@@ -285,6 +302,7 @@ defineExpose({ toggleCollapse, size, isCollapsed })
 	background: var(--resizable-divider-active-color, var(--color-primary, #3b82f6));
 }
 
+.panel__handle:focus-visible .panel__handle-bar,
 .panel__handle:hover .panel__handle-bar {
 	opacity: 1;
 	transform: scale(1);

package/src/components/layout/Resizable.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, provide, ref } from 'vue'
+import { computed, provide, ref } from 'vue'
 import { RESIZABLE_KEY, useResizableLayoutProvider } from '../../composables/useResizableLayout'
 import { MOBILE_BREAKPOINT } from '../../utils/constants'
 
@@ -29,7 +29,7 @@ const directionProp = computed(() => props.horizontal ? 'horizontal' as const :
 const mobileDirection = computed(() => props.mobileVertical || !props.horizontal ? 'vertical' as const : 'horizontal' as const,
 )
 
-const { context, observe, disconnect } = useResizableLayoutProvider({
+const { context } = useResizableLayoutProvider({
 	directionProp,
 	mobileDirection: mobileDirection.value,
 	breakpoint: props.breakpoint,
@@ -37,9 +37,6 @@ const { context, observe, disconnect } = useResizableLayoutProvider({
 })
 
 provide(RESIZABLE_KEY, context)
-onMounted(observe)
-onUnmounted(disconnect)
-
 const isHorizontal = computed(() => context.direction.value === 'horizontal')
 </script>
 

package/src/components/layout/appLayoutContext.ts

@@ -62,7 +62,7 @@ export interface AppLayoutContext {
 	// ── 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. */
+	/** Dedicated per-side patchers — a docked child reports its intent. */
 	setStart: (patch: RegionPatch) => void
 	setEnd: (patch: RegionPatch) => void
 	setTop: (patch: RegionPatch) => void
@@ -105,6 +105,7 @@ export function useAppLayout(): AppLayoutContext {
 	if (ctx) { return ctx }
 
 	if (import.meta.env?.DEV) {
+		// eslint-disable-next-line no-console -- Surface incorrect layout usage during development.
 		console.warn('[bagelink] useAppLayout() called outside <AppLayout>. AppSidebar/AppContent are designed to be used inside it.')
 	}
 	const noop = () => {}

package/src/composables/index.ts

@@ -5,6 +5,8 @@ import { getFallbackSchema } from '@bagelink/vue'
 import { computed, toValue } from 'vue'
 
 export { useAddToCalendar } from './useAddToCalendar'
+export { useBoundedRectDrag } from './useBoundedRectDrag'
+export type { BoundedRectDragOptions, DragRect } from './useBoundedRectDrag'
 export { useDevice } from './useDevice'
 export { useEscapeKey } from './useEscapeKey'
 export { useExcel } from './useExcel'
@@ -13,6 +15,10 @@ export { useGradientVariant } from './useGradientVariant'
 export { useImageSrc } from './useImageSrc'
 export { useLocalStore } from './useLocalStore'
 export { usePolling } from './usePolling'
+export { createPointerSession, usePointerSession } from './usePointerSession'
+export type { PointerSessionOptions } from './usePointerSession'
+export { resizeRect, snapGridDelta } from './resizeGeometry'
+export type { ResizeRect } from './resizeGeometry'
 export { usePrefersReducedMotion } from './usePrefersReducedMotion'
 export { useQuery } from './useQuery'
 export { useResizableLayoutProvider } from './useResizableLayout'