@witchcraft/layout 0.3.1 → 0.4.1

package/src/runtime/components/LayoutIntersectionHandle.vue

@@ -0,0 +1,45 @@
+<template>
+<LayoutShapeRect
+	:css="css"
+	:class="twMerge(`
+		drag-intersection
+		z-30
+		rounded-full
+		hover:cursor-pointer
+	`, ($attrs as any).class)"
+	v-bind="{ ...$attrs, class: undefined }"
+	@pointerdown="onPointerDown?.($event, 'edge', { intersection })"
+/>
+</template>
+
+<script lang="ts" setup>
+import { layoutContextInjectionKey } from "../types/vue.js"
+import { useAttrs, inject } from "vue"
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+
+import LayoutShapeRect from "./LayoutShapeRect.vue"
+
+import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js"
+import { type EdgeDragStartData } from "../types/index.js"
+import { dragContextInjectionKey } from "../types/vue.js"
+import type { IntersectionEntry } from "../types/index.js"
+
+const $attrs = useAttrs()
+
+defineOptions({
+	inheritAttrs: false
+})
+
+const props = defineProps<{
+	css: ReturnType<typeof getIntersectionsCss>[number]
+	intersection: IntersectionEntry
+	onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeDragStartData) => void
+}>()
+
+const ctx = inject(layoutContextInjectionKey, undefined)
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow")
+
+const dragCtx = inject(dragContextInjectionKey, undefined)
+if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow")
+
+</script>

package/src/runtime/components/LayoutIntersectionVisible.vue

@@ -0,0 +1,41 @@
+<template>
+<LayoutShapeRect
+	:css="css"
+	:class="twMerge(`
+		drag-intersection-visible
+		z-30
+		rounded-full
+		pointer-events-none
+		[.drag-intersection:hover+&]:bg-blue-500/50
+	`,
+		css._shifted && `w-[7px] h-[7px]`,
+		($attrs as any).class
+	)"
+	v-bind="{ ...$attrs, class: undefined }"
+/>
+</template>
+
+<script lang="ts" setup>
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import { inject, useAttrs } from "vue"
+
+import LayoutShapeRect from "./LayoutShapeRect.vue"
+import { layoutContextInjectionKey } from "../types/vue.js"
+
+import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js"
+
+const $attrs = useAttrs()
+
+defineOptions({
+	inheritAttrs: false
+})
+
+defineProps<{
+	css: ReturnType<typeof getIntersectionsCss>[number]
+}>()
+
+
+const ctx = inject(layoutContextInjectionKey, undefined)
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow")
+
+</script>

package/src/runtime/components/LayoutIntersections.vue

@@ -0,0 +1,64 @@
+<template>
+<template
+	v-for="css, i of cssDragIntersections"
+	:key="cssToKey(css.handle)"
+>
+	<slot name="handler" v-bind="{
+		css: css.handle,
+		onPointerDown: dragCtx.dragStart,
+		intersection: draggableIntersections[i]
+	}">
+		<LayoutIntersectionHandle
+			:css="css.handle"
+			:intersection="draggableIntersections[i]"
+		/>
+	</slot>
+	<slot name="indicator" v-bind="{ css: css.visible, intersection: draggableIntersections[i] }">
+		<LayoutIntersectionVisible
+			:css="css.visible"
+		/>
+	</slot>
+</template>
+</template>
+
+<script lang="ts" setup>
+import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js"
+import { computed, inject } from "vue"
+
+
+import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js"
+
+import { cssToKey } from "../utils/cssToKey.js"
+import LayoutIntersectionHandle from "./LayoutIntersectionHandle.vue"
+import LayoutIntersectionVisible from "./LayoutIntersectionVisible.vue"
+
+defineOptions({
+	inheritAttrs: false
+})
+
+const ctx = inject(layoutContextInjectionKey, undefined)
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow")
+
+const dragCtx = inject(dragContextInjectionKey, undefined)
+if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow")
+
+const draggableIntersections = computed(() => dragCtx.intersections.value
+	.filter(_ => !_.isWindowEdge && (_.count === 4 || (_.count === 1 && _.sharesEdge)))
+)
+
+const cssDragIntersections = computed(() => {
+	const intersections: {
+		handle: ReturnType<typeof getIntersectionsCss>[number]
+		visible: ReturnType<typeof getIntersectionsCss>[number]
+	}[] = []
+	const thick = getIntersectionsCss(draggableIntersections.value, {
+		intersectionWidth: `var(--layoutIntersectionWidth, 15px)`
+	})
+	const thin = getIntersectionsCss(draggableIntersections.value, {
+	})
+	for (let i = 0; i < thick.length; i++) {
+		intersections.push({ handle: thick[i], visible: thin[i] })
+	}
+	return intersections
+})
+</script>

package/src/runtime/components/{LayoutShapeSquare.vue → LayoutShapeRect.vue}

@@ -28,7 +28,7 @@ import { twMerge } from "@witchcraft/ui/utils/twMerge"
 import { useAttrs } from "vue"
 import type { HTMLAttributes } from "vue"
 
-import type { LayoutShapeSquareProps } from "../types/index.js"
+import type { LayoutShapeRectProps } from "../types/index.js"
 
 const $attrs = useAttrs()
 
@@ -37,7 +37,7 @@ defineOptions({
 })
 
 const props = defineProps<
-	& LayoutShapeSquareProps
+	& LayoutShapeRectProps
 	& /** @vue-ignore */ HTMLAttributes
 >()
 </script>

package/src/runtime/components/LayoutWindow.vue

@@ -14,37 +14,12 @@
 	v-bind="{ ...$attrs, class: undefined }"
 >
 		<!-- we need the size withot borders for correct px calculations -->
-	<div class="
-		layout-window
-		relative
-		overflow-hidden
-		flex-1
-	" ref="windowEl">
+	<div
+		class="layout-window relative overflow-hidden flex-1"
+		ref="windowEl"
+	>
 		<template v-if="windowEl && win">
-			<LayoutFrameComponent
-				:frame="frame"
-				:is-active-frame="frame.id === win.activeFrame"
-				v-for="frame of frames"
-				:key="frame.id"
-				v-bind="frameProps"
-				@focus="windowSetActiveFrame(win, frame.id)"
-			>
-				<slot :name="`frame-${frame.id}`" v-bind="{frame}"/>
-			</LayoutFrameComponent>
-			<LayoutEdgesComponent
-				:win="win"
-				:active-frame="win.activeFrame ? frames[win.activeFrame] : undefined"
-				:edges="visualEdges"
-				:intersections="intersections"
-				:dragging-edge="draggingEdges.length === 1 ? draggingEdges[0] : undefined"
-				:dragging-intersection="draggingIntersection"
-				v-bind="edgesProps"
-				@drag-start="dragStart"
-			/>
-			<LayoutDecosComponent
-				:shapes="shapes"
-			/>
-			<slot name="extra-decos"/>
+			<slot/>
 		</template>
 	</div>
 	<Teleport
@@ -97,18 +72,18 @@ import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalRes
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
 import { computed, provide, reactive, ref, useAttrs, watch } from "vue"
 
-import LayoutDecosComponent from "./LayoutDecos.vue"
-import LayoutEdgesComponent from "./LayoutEdges.vue"
-import LayoutFrameComponent from "./LayoutFrame.vue"
 
 import { useFrames } from "../composables/useFrames.js"
 import { createDefaultHandlers } from "../drag/createDefaultHandlers.js"
 import { DragActionHandler } from "../drag/DragActionHandler"
-import { dragContextInjectionKey, type DragState, type IDragAction } from "../drag/types.js"
-import { updateWindowWithEvent } from "../helpers/updateWindowSizeWithEvent.js"
+import { dragContextInjectionKey } from "../types/vue.js"
+import { type DragState, type IDragAction } from "../types/index.js"
+import { getUpdateWindowSizeInfo } from "../layout/getUpdateWindowSizeInfo.js"
 import { windowSetActiveFrame } from "../layout/windowSetActiveFrame.js"
-import type { LayoutEdgesProps, LayoutFrameProps, LayoutWindow } from "../types/index.js"
+import { type LayoutWindow } from "../types/index.js"
+import { layoutContextInjectionKey } from "../types/vue.js"
 import { settings } from "../settings.js"
+import { applyFrameChanges } from "../layout/applyFrameChanges.js"
 
 
 const $attrs = useAttrs()
@@ -128,8 +103,6 @@ const props = withDefaults(defineProps<{
 	 * When this is turned back on again, it will trigger an update. You can also trigger updates manually with the exposed updateWindowSize function.
 	 */
 	allowWindowSizeUpdate?: boolean
-	frameProps?: Partial<Omit<LayoutFrameProps, "frame" | "isActiveFrame" | "onFocus">>
-	edgesProps?: Partial<Omit<LayoutEdgesProps, "edges" | "intersections" | "win">>,
 }>(), {
 	actionHandlers: undefined,
 	textHints: () => [],
@@ -177,14 +150,9 @@ const dragContext  = useFrames(
 )
 
 const {
-	dragStart,
 	dragPoint,
-	visualEdges,
 	isDragging,
-	draggingEdges,
-	draggingIntersection,
 	frames,
-	intersections,
 	state,
 	frameDragFrameId,
 	showDragging,
@@ -206,15 +174,18 @@ function getWindowSize() {
 		pxHeight: Math.floor(windowElRect.height)
 	}
 }
-function updateWindowSize() {
+function onWindowResize() {
 	if (!props.allowWindowSizeUpdate) return
 	const newSize = { ...getWindowSize(), ...getWindowOffset() }
-	updateWindowWithEvent(win.value, newSize)
+	win.value.pxX = newSize.pxX
+	win.value.pxY = newSize.pxY
+	applyFrameChanges(win.value, getUpdateWindowSizeInfo(win.value, newSize))
 }
-useGlobalResizeObserver(windowEl, updateWindowSize)
+
+useGlobalResizeObserver(windowEl, onWindowResize)
 watch(() => props.allowWindowSizeUpdate, (newval, oldval) => {
 	if (oldval === false && newval === true) {
-		updateWindowSize()
+		onWindowResize()
 	}
 })
 
@@ -222,11 +193,20 @@ watch(() => props.allowWindowSizeUpdate, (newval, oldval) => {
 watch(state, () => emit("dragState", state.value))
 watch(showDragging, () => emit("isShowingDrag", showDragging.value))
 
+const layoutContext = computed(() => {
+	return {
+		win: win.value!,
+		shapes,
+		onFocus: (frameId:string) => windowSetActiveFrame(win.value!, frameId),
+	}
+})
+provide(layoutContextInjectionKey, layoutContext)
+
 defineExpose({
 	state,
 	win,
-	updateWindowSize,
-	dragActionHandler
+	getUpdateWindowSizeInfo,
+	dragActionHandler: dragActionHandler as DragActionHandler<any, any>,
 })
 </script>
 

package/src/runtime/composables/useFrames.ts

@@ -4,7 +4,6 @@ import type { Ref } from "vue"
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
 
 import { DragDirectionStore } from "../drag/DragDirectionStore.js"
-import type { DragChangeHandler, DragChangeResult, DragState, EdgeDragStartData, FrameDragStartData } from "../drag/types.js"
 import { cloneFrame } from "../helpers/cloneFrame.js"
 import { getIntersections } from "../helpers/getIntersections.js"
 import { getVisualEdges } from "../helpers/getVisualEdges.js"
@@ -13,7 +12,7 @@ import { moveEdge } from "../helpers/moveEdge.js"
 import { toWindowCoord } from "../helpers/toWindowCoord.js"
 import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js"
 import { isPointInRect } from "../layout/isPointInRect.js"
-import type { Direction, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutWindow, Orientation, Point } from "../types/index.js"
+import type { Direction, DragChangeHandler, DragChangeResult, DragState, Edge, EdgeDragStartData, FrameDragStartData, FrameId, IntersectionEntry, LayoutFrame, LayoutWindow, Orientation, Point } from "../types/index.js"
 
 export function useFrames(
 	win: Ref<LayoutWindow>,
@@ -32,6 +31,10 @@ export function useFrames(
 		 * Return false to not apply the regular drag end changes (i.e. return false to reset to the position before dragging).
 		 */
 		onDragApply: ((state: DragState, forceRecalculateEdges: () => void) => boolean)
+		/**
+		 * Called after visual edges are recalculated. Action handlers can annotate edges with error info.
+		 */
+		annotateEdges?: (edges: Edge[], frames: LayoutFrame[]) => void
 	}
 ) {
 	const draggingEdges = ref<Edge[]>([])
@@ -84,6 +87,7 @@ export function useFrames(
 	// all at once (e.g. by clicking on some command many times in a row)
 	const debounceGetDraggableEdges = debounce((f: LayoutFrame[]) => {
 		visualEdges.value = getVisualEdges(f, { includeWindowEdges: true })
+		handler.annotateEdges?.(visualEdges.value, f)
 	}, 50, {}) as any
 
 	watch([isDragging, frames], () => {
@@ -96,6 +100,7 @@ export function useFrames(
 
 	function forceRecalculateEdges(): void {
 		visualEdges.value = getVisualEdges(Object.values(frames.value), { includeWindowEdges: true })
+		handler.annotateEdges?.(visualEdges.value, Object.values(frames.value))
 	}
 
 	const dragDirStore = new DragDirectionStore({

package/src/runtime/demo/App.vue

@@ -12,31 +12,18 @@
 		:win="win"
 		:dragActionHandler="dragActionHandler"
 	/>
+
 	<LayoutWindow
 		ref="layoutComponent"
 		v-if="win"
 		:class="twMerge(`
 			flex-1
 			w-full
+			self-stretch
 			border-1
 			border-neutral-300
 			dark:border-neutral-700
 			rounded-md
-			self-stretch
-			[&_.frame]:flex
-			[&_.frame]:flex-col
-			[&_.frame]:outline-hidden
-			[&_.active-frame-edge]:rounded-md
-			[&_.active-frame-edge]:border-none
-			[&_.drag-edge:hover+.edge]:bg-accent-500/20
-			[&_.grabbed-edge]:bg-accent-500
-			[&.request-split_.grabbed-edge]:hidden
-			[&.request-split_.drag-edge]:hidden
-			[&.deco-split-error]:rounded-md
-			[&_.deco-split-new-frame]:rounded-md
-			[&_.deco-close-frame]:rounded-md
-			[&_.deco-close-frame-force]:rounded-md
-			[&_.deco-frame-drag]:rounded-md
 		`,
 			collapsedDocks.top && `border-t-2 border-t-green-500`,
 			collapsedDocks.bottom && `border-b-2 border-b-green-500`,
@@ -49,59 +36,109 @@
 		@is-showing-drag="isShowingDrag = $event"
 		@drag-state="dragState = $event"
 	>
-		<template #[`frame-${f.id}`] v-for="f in frames" :key="f.id" >
-			<div
-				v-if="!(f.collapsed && (f.width === 0 || f.height === 0))"
-				:data-is-active="win.activeFrame === f.id"
-				:class="twMerge(`
-					border-2
-					border-neutral-500
-					h-full
-					rounded-md
-					overflow-auto
-				`,
-					win.activeFrame === f.id && `border-blue-500`
-				)"
-				@click="win.activeFrame=f.id"
-			>
-				<!--
-					Avoid placing the padding on the first div in the frame.
-					Set it on the first child instead, so that the frame can shrink as small as possible.
-					Too big a border can also be a problem, but usually it's small enough that it's beneath the min frame width/height allowed.
-				-->
-				<div class="p-2 flex flex-col">
-					<FrameDragHandle :frame-id="f.id">
-						<div
-							class="cursor-grab bg-neutral-200 dark:bg-neutral-700 px-2 py-1 text-xs select-none"
-						>
-							⠿ Drag to move frame
+			<LayoutFrame class="
+				flex
+				flex-col
+				outline-hidden
+			">
+				<template #[`frame-${f.id}`] v-for="f in frames" :key="f.id" >
+					<div
+						v-if="!(f.collapsed && (f.width === 0 || f.height === 0))"
+						:data-is-active="win.activeFrame === f.id"
+						:class="twMerge(`
+							border-2
+							border-neutral-500
+							h-full
+							rounded-md
+							overflow-auto
+						`,
+							win.activeFrame === f.id && `border-blue-500`
+						)"
+						@click="win.activeFrame=f.id"
+					>
+						<!--
+							Avoid placing the padding on the first div in the frame.
+							Set it on the first child instead, so that the frame can shrink as small as possible.
+							Too big a border can also be a problem, but usually it's small enough that it's beneath the min frame width/height allowed.
+						-->
+						<div class="p-2 flex flex-col">
+							<FrameDragHandle :frame-id="f.id">
+								<div
+									class="cursor-grab bg-neutral-200 dark:bg-neutral-700 px-2 py-1 text-xs select-none"
+								>
+									⠿ Drag to move frame
+								</div>
+							</FrameDragHandle>
+							<div class="flex gap-1 px-2 py-1 flex-wrap">
+								<button
+									v-if="f.docked && !f.collapsed"
+									class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
+									@click="handleUndock(f.id)"
+								>Undock</button>
+								<button
+									v-if="f.docked && !f.collapsed"
+									class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
+									@click="handleCollapse(f.id)"
+								>Collapse</button>
+								<button
+									v-if="f.docked && f.collapsed"
+									class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
+									@click="handleUncollapse(f.id)"
+								>Uncollapse</button>
+							</div>
+							<div class="p-2 whitespace-pre-wrap">
+								{{ debugFrame(f) }}
+							</div>
 						</div>
-					</FrameDragHandle>
-					<div class="flex gap-1 px-2 py-1 flex-wrap">
-						<button
-							v-if="f.docked && !f.collapsed"
-							class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
-							@click="handleUndock(f.id)"
-						>Undock</button>
-						<button
-							v-if="f.docked && !f.collapsed"
-							class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
-							@click="handleCollapse(f.id)"
-						>Collapse</button>
-						<button
-							v-if="f.docked && typeof f.collapsed === 'number'"
-							class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
-							@click="handleUncollapse(f.id)"
-						>Uncollapse</button>
 					</div>
-					<div class="p-2 whitespace-pre-wrap">
-						{{ debugFrame(f) }}
+					<div v-else>
 					</div>
-				</div>
-			</div>
-			<div v-else>
-			</div>
-		</template>
+				</template>
+			</LayoutFrame>
+			<LayoutEdgesActiveFrame class="rounded-md border-none"/>
+			<!-- Following slot usage is just done as an example for how to override the slots and further customize the components. You could place classes on the parent LayoutWindow instead or if you don't need to customize anything you can just do:
+			<LayoutIntersections/>
+			...
+			<LayoutDragEdges/>
+			-->
+			<LayoutDragEdges>
+				<template #handle="slotProps">
+					<LayoutDragEdgeHandle
+						class="..."
+						v-bind="slotProps"
+					/>
+				</template>
+				<template #indicator="slotProps">
+					<LayoutDragEdgeVisible
+						class="..."
+						v-bind="slotProps"
+					/>
+				</template>
+			</LayoutDragEdges>
+			<LayoutDecosEdges/>
+			<!-- Decos add only the most basic color indicators (which you can override, we also pretty them up here with from rounded edges. -->
+			<LayoutDecosRects class="
+				[&.deco-split-error]:rounded-md
+				[&.deco-split-new-frame]:rounded-md
+				[&.deco-close-frame]:rounded-md
+				[&.deco-close-frame-force]:rounded-md
+				[&.deco-frame-drag]:rounded-md
+			"/>
+			<LayoutDragEdgeGrabbed class="bg-accent-500"/>
+			<LayoutIntersections>
+				<template #handler="slotProps">
+					<LayoutIntersectionHandle
+						class="..."
+						v-bind="slotProps"
+					/>
+				</template>
+				<template #indicator="slotProps">
+					<LayoutIntersectionVisible
+						class="..."
+						v-bind="slotProps"
+					/>
+				</template>
+			</LayoutIntersections>
 	</LayoutWindow>
 </WRoot>
 </template>
@@ -118,8 +155,15 @@ import DemoControls from "./DemoControls.vue"
 import { app } from "./sharedLayoutInstance.js"
 
 import FrameDragHandle from "../components/FrameDragHandle.vue"
-import LayoutWindow from "../components/LayoutWindow.vue"
-import type { DragState } from "../drag/types.js"
+import LayoutFrame from "../components/LayoutFrame.vue"
+import LayoutDecosEdges from "../components/LayoutDecosEdges.vue"
+import LayoutDecosRects from "../components/LayoutDecosRects.vue"
+import LayoutDragEdgeGrabbed from "../components/LayoutDragEdgeGrabbed.vue"
+import LayoutIntersections from "../components/LayoutIntersections.vue"
+import LayoutEdgesActiveFrame from "../components/LayoutEdgesActiveFrame.vue"
+import LayoutDragEdges from "../components/LayoutDragEdges.vue"
+import LayoutIntersectionHandle from "../components/LayoutIntersectionHandle.vue"
+import type { DragState } from "../types/index.js"
 import { applyFrameChanges } from "../layout/applyFrameChanges.js"
 import { debugFrame } from "../layout/debugFrame.js"
 import { getFrameCollapseInfo } from "../layout/getFrameCollapseInfo.js"
@@ -136,11 +180,16 @@ import type { EdgeSide, Layout, Pos, Size } from "../types/index.js"
 import { throwIfError } from "@alanscodelog/utils/throwIfError"
 import { useTemplateRef } from "vue"
 import { DragActionHandler } from "../drag/DragActionHandler.js"
+import LayoutDragEdgeHandle from "../components/LayoutDragEdgeHandle.vue"
+import LayoutDragEdgeVisible from "../components/LayoutDragEdgeVisible.vue"
+import LayoutIntersectionVisible from "../components/LayoutIntersectionVisible.vue"
+
 
+import LayoutWindow from "../components/LayoutWindow.vue"
 
 const winId = ref<string | undefined>(undefined)
 const win = computed(() => winId.value !== undefined ? app.layout.windows[winId.value] : undefined)
-const layoutComponent = useTemplateRef("layoutComponent")
+const layoutComponent = ref<InstanceType<typeof LayoutWindow> | undefined>(undefined)
 
 const frames = computed(() => {
 	if (!win.value) return
@@ -205,16 +254,6 @@ function handleUncollapse(frameId: string) {
 	DragActionHandler.debugState("uncollapse", "after", dragState.value!, {}, undefined)
 }
 
-const textHints = computed(() => {
-	const isDragging = dragState.value?.isDragging
-	const textHints = dragActionHandler.value?.textHints ?? {actions:[], errors:[]}
-	return [
-		...(!isDragging ? [{classes:"", text:"Drag from an edge to create a new frame."}] : []),
-		...textHints.errors.map(_ => ({classes:"text-red-500", text:_})),
-		...textHints.actions.map(_ => ({ text:_})),
-	]
-})
-
 const collapsedDocks = computed(() => {
 	const sides: Partial<Record<EdgeSide, true>> = {}
 	for (const frame of Object.values(win.value?.frames ?? {})) {
@@ -226,4 +265,15 @@ const collapsedDocks = computed(() => {
 })
 
 const dragActionHandler = computed(() => layoutComponent.value?.dragActionHandler)
+
+const textHints = computed(() => {
+	const isDragging = dragState.value?.isDragging
+	const textHints = dragActionHandler.value?.textHints ?? {actions:[], errors:[]}
+	return [
+		...(!isDragging ? [{classes:"", text:"Drag from an edge to create a new frame."}] : []),
+		...textHints.errors.map((_: string) => ({classes:"text-red-500", text:_})),
+		...textHints.actions.map((_: string) => ({ text:_})),
+	]
+})
+
 </script>

package/src/runtime/demo/DemoControls.vue

@@ -9,7 +9,7 @@
 		</template>
 		<template #popover>
 			<div class="flex flex-col gap-2 rounded-md w-full`">
-				<label class="text-xs">Collapse Size (%):</label>
+				<label class="text-xs">Collapse Size (px):</label>
 				<input
 					type="number"
 					class="w-full min-w-0 border border-neutral-300 dark:border-neutral-700 rounded px-1 py-0.5 text-xs bg-neutral-100 dark:bg-neutral-800"
@@ -40,7 +40,9 @@
 import WDarkModeSwitcher from "@witchcraft/ui/components/WDarkModeSwitcher"
 import WButton from "@witchcraft/ui/components/WButton"
 import WPopover from "@witchcraft/ui/components/WPopover"
-import { copy } from "@witchcraft/ui/helpers"
+import WCheckbox from "@witchcraft/ui/components/WCheckbox"
+import WSimpleInput from "@witchcraft/ui/components/WSimpleInput"
+import { copyToClipboard } from "@alanscodelog/utils/copyToClipboard"
 import { ref, watch } from "vue"
 import { applyFrameChanges } from "../layout/applyFrameChanges.js"
 import { getFrameUncollapseInfo } from "../layout/getFrameUncollapseInfo.js"
@@ -59,10 +61,10 @@ const props = defineProps<{
 
 const showDevActions = ref(false)
 
-const collapseSizeValue = ref(Math.round(settings.collapseSizeScaled.width / settings.maxInt * 100))
+const collapseSizeValue = ref(settings.collapseSizePx.width) 
 
 function handleCollapseSizeChange(value: number) {
-	settings.collapseSize = value
+	settings.collapseSizePx = value
 	collapseSizeValue.value = value
 }
 
@@ -105,7 +107,7 @@ function copyState() {
 		}
 	}
 	const state = JSON.stringify(clone, null, 2)
-	copy(state)
+	copyToClipboard(state)
 }
 
 const debugKey = ref(import.meta.dev ? "state.win.frames" : "false")

package/src/runtime/demo/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@witchcraft/layout Vue Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/src/runtime/demo/tailwind.css

@@ -2,3 +2,6 @@
 
 @import "../../../playground/.nuxt/witchcraft-ui.css";
 @import "../../../playground/.nuxt/witchcraft-layout.css";
+
+/* Only needed for the dev playground: the demo App.vue lives outside the Vite project root, so Tailwind's auto-scan doesn't find the [&.deco-...] classes it defines. */
+@source "../../../src/runtime/demo";