@witchcraft/layout 0.3.1 → 0.4.0

package/dist/runtime/types/index.js

@@ -1,13 +1,24 @@
 import { enumFromArray } from "@alanscodelog/utils/enumFromArray";
 import { z } from "zod";
-export * from "../drag/types.js";
-import { settings } from "../settings.js";
+import { KnownError } from "../utils/KnownError.js";
 export const zUuid = z.uuid();
 export const zWindowIdConstants = z.enum(["ACTIVE"]);
 export const zWinId = z.uuid().or(zWindowIdConstants);
 export const zFrameIdConstants = z.enum(["ACTIVE"]);
 export const zFrameId = z.uuid().or(zFrameIdConstants);
-export const zScaledIntPercentage = z.number().int().min(0).max(settings.maxInt).nonnegative();
+import { settings } from "../settings.js";
+export const zScaledIntPercentage = z.number().int().min(0).nonnegative().superRefine((val, ctx) => {
+  if (val > settings.maxInt) {
+    ctx.addIssue({
+      code: "too_big",
+      type: "number",
+      origin: "number",
+      maximum: settings.maxInt,
+      inclusive: true,
+      message: `Value ${val} must be less than or equal to ${settings.maxInt}`
+    });
+  }
+});
 const zPx = z.number().int().nonnegative();
 export const zPos = z.object({
   x: zScaledIntPercentage,
@@ -33,15 +44,16 @@ export const zEdge = z.object({
   startX: zScaledIntPercentage,
   startY: zScaledIntPercentage,
   endX: zScaledIntPercentage,
-  endY: zScaledIntPercentage
+  endY: zScaledIntPercentage,
+  error: z.instanceof(KnownError).or(z.object({ code: z.string(), message: z.string() })).optional()
 });
 export const zDirection = z.enum(["up", "down", "left", "right"]);
 export const zExtendedDirection = z.union([zDirection, z.enum(["horizontal", "vertical"])]);
 export const zSide = z.enum(["top", "bottom", "left", "right"]);
 export const zOrientation = z.enum(["horizontal", "vertical"]);
 export const zExtendedSide = z.union([zSide, zOrientation]);
-export const zBaseSquare = zSize.extend(zPos.shape);
-export const zLayoutFrame = zBaseSquare.extend({
+export const zBaseRect = zSize.extend(zPos.shape);
+export const zLayoutFrame = zBaseRect.extend({
   id: z.uuid(),
   docked: zSide.optional(),
   collapsed: z.number().min(1).optional()
@@ -88,7 +100,7 @@ export const zInitializedLayout = zLayout.required({
   return zLayoutWindow.safeParse(layout.windows[layout.activeWindow]).success;
 }, { message: "An initialized layout's active window must exist and be valid." });
 const zLayoutShape = z.discriminatedUnion("type", [
-  z.object({ type: z.literal("square"), data: zBaseSquare, attrs: z.record(z.string(), z.string()).optional() }),
+  z.object({ type: z.literal("rect"), data: zBaseRect, attrs: z.record(z.string(), z.string()).optional() }),
   z.object({ type: z.literal("edge"), data: zEdge, attrs: z.record(z.string(), z.string()).optional() })
 ]);
 const zBaseDeco = z.object({
@@ -134,12 +146,14 @@ export const LAYOUT_ERROR = enumFromArray([
   "CANT_SPLIT_DOCKED_FRAME",
   "NO_SPACE_TO_REDISTRIBUTE",
   "REDISTRIBUTE_OUT_OF_BOUNDS",
+  "REDISTRIBUTE_WOULD_RESULT_IN_INVALID_FRAMES",
   "FRAME_ALREADY_DOCKED_ON_SIDE",
   "CANT_LEAVE_NO_UNDOCKED_FRAMES",
   "CANT_UNDOCK_COLLAPSED_FRAME",
   "CANT_COLLAPSE_NOT_DOCKED",
   "CANT_UNCOLLAPSE_NOT_COLLAPSED",
-  "NO_FILL_CANDIDATES"
+  "NO_FILL_CANDIDATES",
+  "CANT_RESIZE_COLLAPSED_FRAME"
 ]);
 export const zWindowCreate = zLayoutWindowLoose.partial({ id: true, pxWidth: true, pxHeight: true, pxX: true, pxY: true }).extend({ frames: zLayoutWindow.shape.frames.optional() });
 export const zLayoutCreate = baseLayout.loose().extend({

package/dist/runtime/types/vue.d.ts

@@ -0,0 +1,41 @@
+import type { ComputedRef, InjectionKey, Ref } from "vue";
+import type { Direction, DragState, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, Orientation, Point } from "./index.js";
+export type LayoutContext = ComputedRef<{
+    /** The owning window, needed so we can correctly scale coordinates. */
+    win: LayoutWindow;
+    onFocus: (frameId: string) => void;
+    shapes: LayoutShape[];
+}>;
+export declare const layoutContextInjectionKey: InjectionKey<LayoutContext>;
+export interface UseFramesContext {
+    dragStart: {
+        (e: PointerEvent, type: "edge", data: {
+            edge?: Edge;
+            intersection?: IntersectionEntry;
+        }): void;
+        (e: PointerEvent, type: "frame", data: {
+            frameId: FrameId;
+        }): void;
+    };
+    dragMove: (e: PointerEvent) => void;
+    dragEnd: (e?: PointerEvent, options?: {
+        apply?: boolean;
+    }) => void;
+    cancel: () => void;
+    dragDirections: Ref<Record<Orientation, Direction | undefined>>;
+    dragPoint: Ref<Point | undefined>;
+    isDragging: Ref<false | "frame" | "edge">;
+    draggingEdges: Ref<Edge[]>;
+    draggingIntersection: Ref<IntersectionEntry | undefined>;
+    visualEdges: Ref<Edge[]>;
+    touchingFrames: Ref<Record<string, LayoutFrame>[]>;
+    touchingFramesArrays: Ref<LayoutFrame[][]>;
+    frames: ComputedRef<Record<string, LayoutFrame>>;
+    dragHoveredFrame: ComputedRef<LayoutFrame | undefined>;
+    intersections: ComputedRef<IntersectionEntry[]>;
+    isDraggingFromWindowEdge: Ref<boolean>;
+    forceRecalculateEdges: () => void;
+    state: ComputedRef<DragState>;
+    frameDragFrameId: Ref<FrameId | undefined>;
+}
+export declare const dragContextInjectionKey: InjectionKey<UseFramesContext>;

package/dist/runtime/{drag/types.js → types/vue.js}

@@ -1 +1,2 @@
+export const layoutContextInjectionKey = Symbol.for("@witchcraft/layout:context");
 export const dragContextInjectionKey = Symbol.for("@witchcraft/layout:dragContext");

package/dist/runtime/utils/cssToKey.d.ts

@@ -0,0 +1,5 @@
+import type { BaseRectCss } from "../types/index.js";
+/**
+ * Converts a css object to a key that can be used in a vue loop.
+ */
+export declare function cssToKey(css: BaseRectCss): string;

package/dist/runtime/utils/cssToKey.js

@@ -0,0 +1,3 @@
+export function cssToKey(css) {
+  return `${css.x},${css.y},${css.width},${css.height},${css.translate}`;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "description": "Headless layout manager.",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "./dist/runtime/index.js",
   "type": "module",
   "sideEffects": false,
@@ -28,13 +28,12 @@
     }
   },
   "dependencies": {
-    "@alanscodelog/utils": "^6.2.0",
-    "@iconify/json": "^2.2.474",
-    "es-toolkit": "^1.46.1"
+    "@alanscodelog/utils": "^6.3.0",
+    "@iconify/json": "^2.2.474"
   },
   "peerDependencies": {
-    "@witchcraft/nuxt-utils": "^0.3.6",
-    "@witchcraft/ui": "^0.5.0"
+    "@witchcraft/nuxt-utils": "^0.3.10",
+    "@witchcraft/ui": "^0.5.9"
   },
   "peerDependenciesMeta": {
     "@witchcraft/ui": {
@@ -60,8 +59,8 @@
     "@types/node": "^24.12.4",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitest/coverage-v8": "^4.1.0",
-    "@witchcraft/nuxt-utils": "^0.3.6",
-    "@witchcraft/ui": "^0.5.0",
+    "@witchcraft/nuxt-utils": "^0.3.10",
+    "@witchcraft/ui": "^0.5.9",
     "concurrently": "^9.2.1",
     "cross-env": "^10.1.0",
     "fast-glob": "^3.3.3",
@@ -128,10 +127,10 @@
     "build:only": "nuxt-module-build build",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "dev:playground": "nuxi dev playground",
-    "//dev:vite": "check everything is working when using vite",
-    "dev:vite": "vite --mode development --config vite.dev.config.ts",
+    "//dev:vite:vue": "check everything is working when using vite (Vue demo)",
+    "dev:vite:vue": "vite --mode development --config vite.dev.vue.config.ts",
     "//dev": "The module needs to be build, not stubbed, for vite's dev to work.",
-    "dev": "pnpm dev:vite",
+    "dev": "pnpm dev:vite:vue",
     "lint:eslint": "eslint \"{src,tests,bin}/**/*.{cjs,js,ts}\" \"*.{cjs,js,ts}\" --max-warnings=0 --report-unused-disable-directives",
     "lint:commits": "commitlint --from-last-tag --to HEAD --verbose",
     "lint:imports": "echo disabled madge --circular --extensions ts ./src",
@@ -139,7 +138,7 @@
     "lint:types": "vue-tsc --noEmit",
     "coverage": "vitest --coverage",
     "coverage:dev": "vitest --watch --coverage",
-    "test": "vitest",
+    "test": "vitest --config vite.dev.vue.config.ts",
     "doc": "typedoc",
     "doc:watch": "onchange -i \"src/**/*.ts\" \"typedoc.config.js\" -- pnpm doc",
     "doc:serve": "http-server docs --port=5001",

package/src/module.ts

@@ -35,7 +35,12 @@ export default defineNuxtModule<ModuleOptions>({
 		addTemplate({
 			filename: "witchcraft-layout.css",
 			write: true,
-			getContents: () => `@source "${resolve("runtime/components")}";`
+			getContents: () => [
+				`@source "${resolve("runtime/components")}";`,
+				// the drag actions handlers and utils they use add some styles
+				`@source "${resolve("runtime/drag")}";`,
+				`@source "${resolve("runtime/utils/createSplitDecoShapes")}";`
+			].join("\n")
 		})
 
 		nuxt.options.alias["#witchcraft-layout"] = resolve("runtime")

package/src/runtime/components/FrameDragHandle.vue

@@ -8,7 +8,7 @@
 </template>
 <script lang="ts" setup>
 import { inject, onBeforeUnmount } from "vue"
-import { dragContextInjectionKey } from "../drag/types.js";
+import { dragContextInjectionKey } from "../types/vue.js"
 
 const props = defineProps<{
 	frameId: string

package/src/runtime/components/LayoutDecosEdges.vue

@@ -0,0 +1,38 @@
+<template>
+<template
+	v-for="(shape, i) of ctx.shapes.filter(_ => _.type === 'edge')"
+	:key="cssToKey(shape.data)"
+>
+	
+	<slot
+		name="edge"
+		v-bind="{
+			shape,
+			css: getVisualEdgeCss(shape.data, { padLongAxis: 'var(--layoutEdgeWidth,2px)' })
+		}"
+	>
+	<LayoutShapeRect
+		:css="getVisualEdgeCss(shape.data, { padLongAxis: 'var(--layoutEdgeWidth,2px)' })"
+		:class="twMerge(shape.attrs?.class, ($attrs as any).class)"
+		v-bind="{...shape.attrs, ...$attrs, class: undefined }"
+
+	/>
+	</slot>
+</template>
+</template>
+<script lang="ts" setup>
+import LayoutShapeRect from "./LayoutShapeRect.vue"
+
+import { getVisualEdgeCss } from "../helpers/getVisualEdgeCss"
+import { layoutContextInjectionKey } from "../types/vue.js"
+import { useAttrs, inject } from "vue"
+import {cssToKey} from "../utils/cssToKey.js"
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+
+const $attrs = useAttrs()
+
+const ctx = inject(layoutContextInjectionKey, undefined)
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow")
+
+
+</script>

package/src/runtime/components/LayoutDecosRects.vue

@@ -0,0 +1,42 @@
+<template>
+<template
+	v-for="(shape) of ctx.shapes.filter(_ => _.type === 'rect')"
+	:key="cssToKey(shape.data)"
+>
+	<slot
+		name="rect"
+		v-bind="{
+			shape,
+			css: getShapeRectCss(shape.data, `var(--layoutEdgeWidth,2px)`)
+		}"
+	>
+		<LayoutShapeRect
+			v-if="shape.type === 'rect'"
+			:css="getShapeRectCss(shape.data, `var(--layoutEdgeWidth,2px)`)"
+			:class="twMerge(`bg-neutral-500/20`,shape.attrs?.class, ($attrs as any).class)"
+			v-bind="{...shape.attrs, ...$attrs, class: undefined }"
+		/>
+	</slot>
+	
+</template>
+</template>
+<script lang="ts" setup>
+import LayoutShapeRect from "./LayoutShapeRect.vue"
+
+import { getShapeRectCss } from "../helpers/getShapeRectCss"
+import { layoutContextInjectionKey } from "../types/vue.js"
+import { useAttrs, inject } from "vue"
+import { cssToKey } from "../utils/cssToKey.js"
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+
+const $attrs = useAttrs()
+
+defineOptions({
+	inheritAttrs: false
+})
+
+
+const ctx = inject(layoutContextInjectionKey, undefined)
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow")
+
+</script>

package/src/runtime/components/LayoutDragEdgeGrabbed.vue

@@ -0,0 +1,50 @@
+<template>
+<LayoutShapeRect
+	:css="css"
+	:class="twMerge(`
+		drag-edge-grabbed
+		z-20
+		bg-accent-500
+		cursor-pointer
+		[&.request-split]:hidden
+	`,
+		($attrs as any).class
+	)"
+	v-bind="{ ...$attrs, class: undefined }"
+	v-for="css, i of cssDragEdge"
+	:key="cssToKey(css)"
+/>
+</template>
+<script lang="ts" setup>
+import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js"
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import { computed, inject, useAttrs } from "vue"
+
+import LayoutShapeRect from "./LayoutShapeRect.vue"
+import { getVisualEdgesCss } from "../helpers/getVisualEdgesCss.js"
+import { cssToKey } from "../utils/cssToKey.js"
+
+
+const $attrs = useAttrs()
+
+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 draggingEdge = computed(() => dragCtx.draggingEdges.value.length === 1 ? dragCtx.draggingEdges.value[0] : undefined)
+
+const cssDragEdge = computed(() => {
+	if (!draggingEdge.value) return []
+	return getVisualEdgesCss([draggingEdge.value], {
+		edgeWidth: `var(--layoutEdgeWidth, 2px)`,
+		padLongAxis: `(var(--layoutEdgeWidth, 2px) + var(--layoutExtraDragEdgePadding, 0px))`
+	})
+})
+
+</script>

package/src/runtime/components/LayoutDragEdgeHandle.vue

@@ -0,0 +1,52 @@
+<template>
+<LayoutShapeRect
+	:css="css"
+	:title="edge.error?.message"
+	:class="twMerge(
+		`
+			drag-edge
+			z-20
+			hover:cursor-pointer
+			
+			[&.request-split]:hidden
+		`,
+		edge.error && `
+			drag-edge-errored
+			hover:cursor-not-allowed
+				`,
+		($attrs as any).class
+	)"
+	v-bind="{ ...$attrs, class: undefined }"
+	@pointerdown="onPointerDown?.($event, 'edge', { edge })"
+/>
+</template>
+
+<script lang="ts" setup>
+import { layoutContextInjectionKey } from "../types/vue.js"
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import { useAttrs, inject } from "vue"
+
+import LayoutShapeRect from "./LayoutShapeRect.vue"
+import { type EdgeDragStartData } from "../types/index.js"
+import { dragContextInjectionKey } from "../types/vue.js"
+import type { Edge, EdgeCss } from "../types/index.js"
+
+const $attrs = useAttrs()
+
+defineOptions({
+	inheritAttrs: false
+})
+
+const props = defineProps<{
+	edge: Edge
+	css: EdgeCss
+	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/LayoutDragEdgeVisible.vue

@@ -0,0 +1,45 @@
+<template>
+<LayoutShapeRect
+	:class="twMerge(
+		`
+			visible-drag-edge
+			pointer-events-none
+			[.drag-edge:hover+&]:bg-accent-500/60
+		`,
+		edge.error && `
+			visible-drag-edge-errored
+			[.drag-edge:hover+&]:bg-red-500/50
+			[.drag-edge:hover+&]:cursor-not-allowed
+
+		`,
+		($attrs as any).class
+	)"
+	:css="css"
+	v-bind="{ ...$attrs, class: undefined }"
+/>
+</template>
+
+<script lang="ts" setup>
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import { useAttrs, inject } from "vue"
+
+import LayoutShapeRect from "./LayoutShapeRect.vue"
+import { type Edge, type EdgeCss } from "../types/index.js"
+import { layoutContextInjectionKey } from "../types/vue.js"
+
+
+const $attrs = useAttrs()
+
+defineOptions({
+	inheritAttrs: false
+})
+
+defineProps<{
+	edge: Edge
+	css: EdgeCss
+}>()
+
+const ctx = inject(layoutContextInjectionKey, undefined)
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow")
+
+</script>

package/src/runtime/components/LayoutDragEdges.vue

@@ -0,0 +1,78 @@
+<template>
+<template
+	v-for="css, i in cssDragEdges"
+	:key="cssToKey(css.handle)"
+>
+	<slot name="handle" v-bind="{
+		css: css.handle,
+		edge: visualEdges[i],
+		onPointerDown: dragCtx.dragStart
+	}">
+		<LayoutDragEdgeHandle
+			:css="css.handle"
+			:edge="visualEdges[i]"
+			@pointerdown="dragCtx.dragStart"
+		/>
+	</slot>
+	<slot name="indicator" v-bind="{
+		css: css.visible,
+		edge: visualEdges[i],
+	}">
+		<LayoutDragEdgeVisible
+				:edge="visualEdges[i]"
+			:css="css.visible"
+		/>
+	</slot>
+</template>
+</template>
+<script lang="ts" setup>
+import { layoutContextInjectionKey } from "../types/vue.js"
+
+import { computed, inject } from "vue"
+
+import LayoutDragEdgeHandle from "./LayoutDragEdgeHandle.vue"
+import LayoutDragEdgeVisible from "./LayoutDragEdgeVisible.vue"
+import { getVisualEdgesCss } from "../helpers/getVisualEdgesCss.js"
+import { isEdgeEqual } from "../helpers/isEdgeEqual.js"
+import { toRef } from "vue"
+import {cssToKey} from "../utils/cssToKey.js"
+import { type EdgeCss } from "../types/index.js"
+import { dragContextInjectionKey } from "../types/vue.js"
+
+defineOptions({
+	inheritAttrs: false
+})
+
+const ctx = inject(layoutContextInjectionKey, undefined)
+if (!ctx) throw new Error("LayoutEdges must be used wivisible a LayoutWindow")
+
+const dragCtx = inject(dragContextInjectionKey, undefined)
+if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow")
+
+
+const visualEdges = toRef(dragCtx, "visualEdges")
+
+const draggingEdge = computed(() => dragCtx.draggingEdges.value.length === 1 ? dragCtx.draggingEdges.value[0] : undefined)
+
+const cssDragEdges = computed(() => {
+	const handleEdges = getVisualEdgesCss(
+		draggingEdge.value
+			? dragCtx.visualEdges.value.filter(_ => !isEdgeEqual(draggingEdge.value!, _))
+			: dragCtx.visualEdges.value,
+		{
+			edgeWidth: `var(--layoutHandleWidth, 8px)`,
+			padLongAxis: `var(--layoutEdgeWidth, 2px)`
+		}
+	)
+	const visibleEdges = getVisualEdgesCss(dragCtx.visualEdges.value, {
+		edgeWidth: `var(--layoutEdgeWidth, 2px)`,
+		padLongAxis: `(var(--layoutEdgeWidth, 2px) + var(--layoutExtraDragEdgePadding, 0px))`
+	})
+	const edges: { visible: EdgeCss, handle: EdgeCss }[] = []
+	for (let i = 0; i < handleEdges.length; i++) {
+		edges.push({ visible: visibleEdges[i], handle: handleEdges[i] })
+	}
+	return edges
+})
+
+</script>

package/src/runtime/components/LayoutEdgesActiveFrame.vue

@@ -0,0 +1,43 @@
+<template>
+<LayoutShapeRect
+	v-if="activeFrame"
+	:class="twMerge(`
+		active-frame-edge
+		pointer-events-none
+		z-0
+		border-blue-500
+		border
+		rounded-md
+	`,
+		($attrs as any).class
+	)"
+	v-bind="{ ...$attrs, class: undefined }"
+	:css="getShapeRectCss(activeFrame, `var(--layoutEdgeWidth,2px)`)"
+/>
+</template>
+
+<script lang="ts" setup>
+import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js"
+import { computed, inject, useAttrs } from "vue"
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+
+import LayoutShapeRect from "./LayoutShapeRect.vue"
+import { getShapeRectCss } from "../helpers/getShapeRectCss.js"
+
+
+const $attrs = useAttrs()
+
+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 activeFrame = computed(() => ctx.value.win.activeFrame ? dragCtx.frames.value[ctx.value.win.activeFrame] : undefined)
+</script>
+

package/src/runtime/components/LayoutFrame.vue

@@ -1,8 +1,8 @@
 <template>
 <!-- overflow-hidden is just in case, if the frame's css is not properly set to h-full, overflow-auto, or the border/padding are too large, we can still get overflows -->
-<LayoutShapeSquare
+<LayoutShapeRect
 	tabindex="0"
-	:css="getShapeSquareCss(frame)"
+	:css="getShapeRectCss(frame)"
 	:class="twMerge(`
 		frame
 		p-[var(--layoutEdgeWidth,_2px)]
@@ -11,38 +11,45 @@
 		($attrs as any).class
 	)"
 	v-bind="{ ...$attrs, class: undefined }"
-	@focus="emit('focus')"
+	@focus="ctx.onFocus(frame.id); emit('focus');"
+	v-for="frame in frames"
+	:key="frame.id"
 >
-	<slot>
+	<slot :name="`frame-${frame.id}`" v-bind="{frame}">
 		<div class="p-2 text-xs bg-neutral-500">
 			{{ debugFrame(frame) }}
 		</div>
 		<div>No slot found for `frame-{{ frame.id }}`. </div>
 	</slot>
-</LayoutShapeSquare>
+</LayoutShapeRect>
 </template>
 
 <script lang="ts" setup>
+import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js"
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { useAttrs } from "vue"
+import { useAttrs, inject, toRef } from "vue"
 
 const $attrs = useAttrs()
 
-defineOptions({
-	inheritAttrs: false
-})
+import LayoutShapeRect from "./LayoutShapeRect.vue"
 
-import LayoutShapeSquare from "./LayoutShapeSquare.vue"
-
-import { getShapeSquareCss } from "../helpers/getShapeSquareCss"
+import { getShapeRectCss } from "../helpers/getShapeRectCss"
 import { debugFrame } from "../layout/debugFrame.js"
-import type { LayoutFrameProps } from "../types/index.js"
 
+defineOptions({
+	inheritAttrs: false
+})
 
 const emit = defineEmits<{
-	/** Documentation #todo */
+	/** Focus event is always "emitted" to the provider (so it can't be cancelled), but the component also emits it in case you want to listen to it. */
 	(e: "focus"): void
 }>()
 
-/* const props =  */defineProps<LayoutFrameProps>()
+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 frames = toRef(dragCtx, "frames")
 </script>