@witchcraft/layout 0.3.0 → 0.4.0

package/README.md

@@ -1,6 +1,9 @@
-[![Docs](https://github.com/witchcraftjs/layout/workflows/Docs/badge.svg)](https://github.com/witchcraftjs/layout/actions/workflows/docs.yml)
-[![Release](https://github.com/witchcraftjs/layout/actions/workflows/release.yml/badge.svg)](https://github.com/witchcraftjs/layout/actions/workflows/release.yml)
-[![NPM Version (with latest tag)](https://img.shields.io/npm/v/%40alanscodelog%2FREPONAME/latest)](https://www.npmjs.com/package/@witchcraft/layout/v/latest)
+[![Docs][docs-src]][docs-href]
+[![Release][release-src]][release-href]
+[![npm version][npm-version-src]][npm-version-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
 # [Docs](https://witchcraftjs.github.io/layout)
 # [Demo](https://witchcraftjs.github.io/layout/demo)
 
@@ -135,10 +138,8 @@ settings.minSize = 5 (5%)
 There are utilities for converting between non-scaled and scaled values if you need to:
 
 ```ts
-import {
-	numberToScaledSize,
-	numverToScaledPercent
-} from "@witchcraft-layout/helpers/numberToScaledSize.js"
+import { numberToScaledPercent } from "@witchcraft-layout/helpers/numberToScaledSize.js"
+import { pxSizeToScaledSize } from "@witchcraft-layout/helpers/pxSizeToScaledSize.js" 
 
  /* -----------
  * |    *    |
@@ -162,9 +163,9 @@ import {reactive} from "vue"
 export const layout = ref(layoutCreate())
 ```
 
-Then in the page with the layout, initialize it and add a component to handle the rendering. One is included for vue, but it's pretty simple.
+Then in the page with the layout, initialize it and add a component to handle the rendering. One is included for vue with composability but you can do something simpler if needed.
 
-It uses a flat structure insides like so, so edges are always on top of frames, and decorations (drag/drop) are always on top of edges:
+The component should render to a flat structure inside like so, so edges are always on top of frames, and decorations (drag/drop) are always on top of edges:
 ```
 - LayoutWindow
   	- LayoutFrame
@@ -173,7 +174,7 @@ It uses a flat structure insides like so, so edges are always on top of frames,
 	- LayoutDecos
 ```
 
-Edges and Decos are very simple and there are various utilies like `getVisualEdgesCss` and `getShapeSquareCss` to create the css needed to display them. They can both be handled as squares making it easy to reuse a single component to render them.
+Edges and Decos are very simple and there are various utilies like `getVisualEdgesCss` and `getShapeRectCss` to create the css needed to display them. They can both be handled as rects making it easy to reuse a single component to render them.
 
 This has the benefit for edges, that the grabable area can be easily adjusted and bigger than the displayed edge.
 
@@ -372,25 +373,64 @@ requestAnimationFrame(() => {
 
 ## LayoutWindow
 
-This is the main component that can render and handle dragging.
+This is the main component that provides context and handles dragging. It takes care of updating the size/pos of the window on mount.
+
+`LayoutWindow` does not render frames, edges, or decorations internally. You explicitly place each component inside it, which lets you override styles, add props, or wrap individual components.
+
+### Customizing
+
+You can add props/classes to most components directly except for LayoutDragEdges and LayoutIntersections as they are loops and contain two components per edge/intersection. For those you must use slots
+
+This is so you can have a bigger invisible handle for pointer events, and a small visible indicator which by default only shows when the handle is hovered over (in the dom they are ordered like siblings: handle, visible, handle, visible, etc). You can control their size via css variables, see below.
+
+```vue
+<LayoutDragEdges>
+	<template #handle="slotProps">
+		<LayoutDragEdgeHandle class="..." v-bind="slotProps" />
+	</template>
+	<template #indicator="slotProps">
+		<LayoutDragEdgeVisible class="..." v-bind="slotProps" />
+	</template>
+</LayoutDragEdges>
+
+<LayoutIntersections>
+	<template #handler="slotProps">
+		<LayoutIntersectionHandle class="..." v-bind="slotProps" />
+	</template>
+	<template #indicator="slotProps">
+		<LayoutIntersectionVisible class="..." v-bind="slotProps" />
+	</template>
+</LayoutIntersections>
+```
+### CSS Variables
+
+They are all called width but apply both to width and height.
 
-The component takes care of updating the size/pos of the window on mount.
+- `--layoutHandleWidth`: for both edges and intersections
+- `--layoutEdgeWidth`: visible edge width
+- `--layoutSplitEdgeWidth` : drag split edge width
+- `--layoutIntersectionWidth` : visible intersection width
 
-It also includes basic styles for the edges and decos.
+### CSS Classes
 
-The order and styles classes look like this:
+There are more classes defined internally than this that you can target, but usually what you'll want to style are the following:
 
-- `.frame` - frames come first so that edges can be rendered on top of them when needed.
+- LayoutWindow - has "state" classes so you can do stuff like target an edge during an event `.request-split .drag-edge`.
+	- `.dragging`
+	- `.request-split`
+	- `.request-close`
+	- `.request-frame-drag`
+- LayoutEdgesActiveFrame (`.active-frame-edge`) - active frame outline, rendered as a single div
+- LayoutDragEdgeHandle (`.drag-edge`) - thicker invisible handle for pointer events
+- LayoutDragEdgeVisible (`.visible-drag-edge`) - visible edge
+- LayoutDragEdgeGrabbed (`.drag-edge-grabbed`) - the grabbed edge while dragging
+- LayoutIntersectionHandle (`.drag-intersection`) - clickable intersection handle
+- LayoutIntersectionVisible (`.drag-intersection-visible`) - visible intersection
 
-Edges are stacked in this order. 
+If you need to target the visible edge when it's handle is hovered, you can do the following:
 
-- `.active-frame-edge` (active frame - rendered as single div)
-- `.drag-edge` (thicker edge for attaching pointer events) + sibling .edge 
-	- It looks like `.drag-edge .edge .drag-edge .edge` and so on.
-	- `.edge` is not shown by default, instead frames are padded to let the background show through since that way we can support having rounded corners inside the frames.
-	- This is you can target the edge style on the drag-edge's hover: `.drag-edge:hover+.edge`
-- `.grabbed-edge` (the grabbed drag edge if any) - prefer this over drag-edge:hover for css that should remain visible when dragging to avoid flickering when the mouse moves slightly off the edge
-- `.intersection` (intersections)
+`.drag-intersection:hover+.drag-intersection-visible`
+`.drag-edge:hover+.visible-drag-edge`
 
 **ALL edges except `active-frame-edge` are rendered as individual divs, so set the background color instead of the border.**
 
@@ -398,7 +438,9 @@ This is done like this for several reasons:
 	- Edges can be shared by frames, only the active edges are guaranteed to equal some frame's edges. And we need to know the full edge that is being dragged to implement dragging.
 	- The css/logic is simpler, edges can be any width without affecting the layout. We just transform translate them to be exactly centered over their position and then just pad the frames the correct amount.
 
-Decos:
+#### Decos
+
+Action handlers add these internally to the corresponding `LayoutDecosRects/Edges` components.
 
 - Close:
   - `.deco-close-frame` (close frame preview)
@@ -413,56 +455,9 @@ Decos:
   - `.deco-frame-drag-${type}-${side}` (e.g. `.deco-frame-drag-frame-left`, `.deco-frame-drag-zone-right`)
 
 
-State classes (so you can do stuff like `.request-split .drag-edge`)
-- `.dragging`
-- `.request-split`
-- `.request-close`
-- `.request-frame-drag`
-
-Several css variables are provided to help with sizing:
-- `--layoutHandleWidth`
-- `--layoutEdgeWidth`
-- `--layoutSplitEdgeWidth`
-- `--layoutIntersectionWidth`
-
-```vue
-<template>
-
-<LayoutWindow
-	v-if="win"
-	class="flex-1 w-full
-		// hide drag/grabbed edge when splitting (let only split edge show)
-		[&.request-split_.grabbed-edge]:hidden
-		[&.request-split_.drag-edge]:hidden
-	"
-	style="--layoutSplitEdgeWidth:2px;"
-	:win="win"
->
-	<template #[`frame-${f.id}`] v-for="f in frames" :key="f.id">
-		<ContentFrame
-			:frame="f"
-			:get-component="getComponent"
-		/>
-	</template>
-</LayoutWindow>
-</template>
-
-<script setup lang="ts">
-const {
-	layout,
-	activeWindow: win,
-	activeFrame,
-	frames
-} = storeToRefs(useLayoutStore())
-
-function getComponent(type: string | undefined) {
-	if (type === "contentA") {
-		return yourContentAComponent
-	}
-}
+#### Other
+See also the [demo code](https://github.com/witchcraftjs/layout/blob/main/src/runtime/demo/App.vue).
 
-</script>
-```
 ## Nuxt w/ Tailwind
 
 The nuxt module creates a `witchcraft-layout.css` file with the proper source imports for the components folder. You just have to import it in your tailwind css file. Note that this requires `@witchcraft/ui` be installed and setup in a similar way also.
@@ -475,4 +470,14 @@ The nuxt module creates a `witchcraft-layout.css` file with the proper source im
 @import "../../../.nuxt/witchcraft-layout.css";
 ```
 
-
+<!-- Badges -->
+[docs-src]: https://github.com/witchcraftjs/layout/actions/workflows/docs.yml/badge.svg
+[docs-href]: https://github.com/witchcraftjs/layout/actions/workflows/docs.yml
+[release-src]: https://github.com/witchcraftjs/layout/actions/workflows/release.yml/badge.svg
+[release-href]: https://github.com/witchcraftjs/layout/actions/workflows/release.yml
+[npm-version-src]: https://img.shields.io/npm/v/@witchcraft/layout/latest
+[npm-version-href]: https://www.npmjs.com/package/@witchcraft/layout/v/latest
+[license-src]: https://img.shields.io/npm/l/@witchcraft/layout.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/@witchcraft/layout
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "configKey": "witchcraftLayout",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -17,7 +17,12 @@ const module$1 = defineNuxtModule({
     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/dist/runtime/components/FrameDragHandle.vue

@@ -9,7 +9,7 @@
 
 <script setup>
 import { inject, onBeforeUnmount } from "vue";
-import { dragContextInjectionKey } from "../drag/types.js";
+import { dragContextInjectionKey } from "../types/vue.js";
 const props = defineProps({
   frameId: { type: String, required: true }
 });

package/dist/runtime/components/LayoutDecosEdges.d.vue.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {
+    shape: any;
+    css: any;
+};
+type __VLS_Slots = {} & {
+    edge?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LayoutDecosEdges.vue

@@ -0,0 +1,34 @@
+<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.class)"
+		v-bind="{ ...shape.attrs, ...$attrs, class: void 0 }"
+
+	/>
+	</slot>
+</template>
+</template>
+
+<script 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, void 0);
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+</script>

package/dist/runtime/components/LayoutDecosEdges.vue.d.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {
+    shape: any;
+    css: any;
+};
+type __VLS_Slots = {} & {
+    edge?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LayoutDecosRects.d.vue.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {
+    shape: any;
+    css: any;
+};
+type __VLS_Slots = {} & {
+    rect?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LayoutDecosRects.vue

@@ -0,0 +1,37 @@
+<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.class)"
+			v-bind="{ ...shape.attrs, ...$attrs, class: void 0 }"
+		/>
+	</slot>
+	
+</template>
+</template>
+
+<script 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, void 0);
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+</script>

package/dist/runtime/components/LayoutDecosRects.vue.d.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {
+    shape: any;
+    css: any;
+};
+type __VLS_Slots = {} & {
+    rect?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LayoutDragEdgeGrabbed.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/LayoutDragEdgeGrabbed.vue

@@ -0,0 +1,43 @@
+<template>
+<LayoutShapeRect
+	:css="css"
+	:class="twMerge(
+  `
+		drag-edge-grabbed
+		z-20
+		bg-accent-500
+		cursor-pointer
+		[&.request-split]:hidden
+	`,
+  $attrs.class
+)"
+	v-bind="{ ...$attrs, class: void 0 }"
+	v-for="css, i of cssDragEdge"
+	:key="cssToKey(css)"
+/>
+</template>
+
+<script 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, void 0);
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+const dragCtx = inject(dragContextInjectionKey, void 0);
+if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+const draggingEdge = computed(() => dragCtx.draggingEdges.value.length === 1 ? dragCtx.draggingEdges.value[0] : void 0);
+const cssDragEdge = computed(() => {
+  if (!draggingEdge.value) return [];
+  return getVisualEdgesCss([draggingEdge.value], {
+    edgeWidth: `var(--layoutEdgeWidth, 2px)`,
+    padLongAxis: `(var(--layoutEdgeWidth, 2px) + var(--layoutExtraDragEdgePadding, 0px))`
+  });
+});
+</script>

package/dist/runtime/components/LayoutDragEdgeGrabbed.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/LayoutDragEdgeHandle.d.vue.ts

@@ -0,0 +1,9 @@
+import { type EdgeDragStartData } from "../types/index.js";
+import type { Edge, EdgeCss } from "../types/index.js";
+type __VLS_Props = {
+    edge: Edge;
+    css: EdgeCss;
+    onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeDragStartData) => void;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/LayoutDragEdgeHandle.vue

@@ -0,0 +1,44 @@
+<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.class
+)"
+	v-bind="{ ...$attrs, class: void 0 }"
+	@pointerdown="onPointerDown?.($event, 'edge', { edge })"
+/>
+</template>
+
+<script 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 {} from "../types/index.js";
+import { dragContextInjectionKey } from "../types/vue.js";
+const $attrs = useAttrs();
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  edge: { type: null, required: true },
+  css: { type: Object, required: true },
+  onPointerDown: { type: Function, required: false }
+});
+const ctx = inject(layoutContextInjectionKey, void 0);
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+const dragCtx = inject(dragContextInjectionKey, void 0);
+if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+</script>

package/dist/runtime/components/LayoutDragEdgeHandle.vue.d.ts

@@ -0,0 +1,9 @@
+import { type EdgeDragStartData } from "../types/index.js";
+import type { Edge, EdgeCss } from "../types/index.js";
+type __VLS_Props = {
+    edge: Edge;
+    css: EdgeCss;
+    onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeDragStartData) => void;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/{LayoutDecos.d.vue.ts → LayoutDragEdgeVisible.d.vue.ts}

@@ -1,6 +1,7 @@
-import type { LayoutShape } from "../types/index.js";
+import { type Edge, type EdgeCss } from "../types/index.js";
 type __VLS_Props = {
-    shapes: LayoutShape[];
+    edge: Edge;
+    css: EdgeCss;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/LayoutDragEdgeVisible.vue

@@ -0,0 +1,38 @@
+<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.class
+)"
+	:css="css"
+	v-bind="{ ...$attrs, class: void 0 }"
+/>
+</template>
+
+<script setup>
+import { twMerge } from "@witchcraft/ui/utils/twMerge";
+import { useAttrs, inject } from "vue";
+import LayoutShapeRect from "./LayoutShapeRect.vue";
+import {} from "../types/index.js";
+import { layoutContextInjectionKey } from "../types/vue.js";
+const $attrs = useAttrs();
+defineOptions({
+  inheritAttrs: false
+});
+defineProps({
+  edge: { type: null, required: true },
+  css: { type: Object, required: true }
+});
+const ctx = inject(layoutContextInjectionKey, void 0);
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+</script>

package/dist/runtime/components/{LayoutDecos.vue.d.ts → LayoutDragEdgeVisible.vue.d.ts}

@@ -1,6 +1,7 @@
-import type { LayoutShape } from "../types/index.js";
+import { type Edge, type EdgeCss } from "../types/index.js";
 type __VLS_Props = {
-    shapes: LayoutShape[];
+    edge: Edge;
+    css: EdgeCss;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/LayoutDragEdges.d.vue.ts

@@ -0,0 +1,21 @@
+declare var __VLS_1: {
+    css: any;
+    edge: any;
+    onPointerDown: any;
+}, __VLS_10: {
+    css: any;
+    edge: any;
+};
+type __VLS_Slots = {} & {
+    handle?: (props: typeof __VLS_1) => any;
+} & {
+    indicator?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LayoutDragEdges.vue

@@ -0,0 +1,67 @@
+<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 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 {} from "../types/index.js";
+import { dragContextInjectionKey } from "../types/vue.js";
+defineOptions({
+  inheritAttrs: false
+});
+const ctx = inject(layoutContextInjectionKey, void 0);
+if (!ctx) throw new Error("LayoutEdges must be used wivisible a LayoutWindow");
+const dragCtx = inject(dragContextInjectionKey, void 0);
+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] : void 0);
+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 = [];
+  for (let i = 0; i < handleEdges.length; i++) {
+    edges.push({ visible: visibleEdges[i], handle: handleEdges[i] });
+  }
+  return edges;
+});
+</script>