@witchcraft/layout 0.1.2 → 0.2.0

package/dist/runtime/types/index.js

@@ -1,13 +1,13 @@
 import { enumFromArray } from "@alanscodelog/utils/enumFromArray";
 import { z } from "zod";
 export * from "../drag/types.js";
-import { getMaxInt } from "../settings.js";
+import { settings } from "../settings.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(getMaxInt()).nonnegative();
+export const zScaledIntPercentage = z.number().int().min(0).max(settings.maxInt).nonnegative();
 const zPx = z.number().int().nonnegative();
 export const zPos = z.object({
   x: zScaledIntPercentage,
@@ -41,9 +41,11 @@ 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 = z.looseObject({
-  id: z.uuid()
-}).extend(zBaseSquare.shape);
+export const zLayoutFrame = zBaseSquare.extend({
+  id: z.uuid(),
+  docked: zSide.optional(),
+  collapsed: z.union([z.literal(false), z.number()]).optional()
+}).loose();
 export const zLayoutFrameLoose = zLayoutFrame.loose();
 const baseLayoutWindow = z.object({
   id: z.uuid(),
@@ -52,7 +54,24 @@ const baseLayoutWindow = z.object({
 }).extend(zPxSize.shape).extend(zPxPos.shape);
 export const zLayoutWindow = baseLayoutWindow;
 export const zLayoutWindowLoose = baseLayoutWindow.loose();
-const baseWorkspace = zLayoutWindow.pick({ activeFrame: true, frames: true });
+const baseWorkspace = baseLayoutWindow.pick({ activeFrame: true, frames: true }).superRefine((data, ctx) => {
+  for (const [frameId, frame] of Object.entries(data.frames ?? {})) {
+    if (frame.docked === void 0) continue;
+    const edge = frame.docked;
+    if (edge === "left" && frame.x !== 0) {
+      ctx.addIssue({ code: "custom", message: `Docked frame ${frameId} on left edge must have x=0`, path: ["frames", frameId, "x"] });
+    }
+    if (edge === "right" && frame.x + frame.width !== settings.maxInt) {
+      ctx.addIssue({ code: "custom", message: `Docked frame ${frameId} on right edge must have x+width=maxInt`, path: ["frames", frameId, "x"] });
+    }
+    if (edge === "top" && frame.y !== 0) {
+      ctx.addIssue({ code: "custom", message: `Docked frame ${frameId} on top edge must have y=0`, path: ["frames", frameId, "y"] });
+    }
+    if (edge === "bottom" && frame.y + frame.height !== settings.maxInt) {
+      ctx.addIssue({ code: "custom", message: `Docked frame ${frameId} on bottom edge must have y+height=maxInt`, path: ["frames", frameId, "y"] });
+    }
+  }
+});
 export const zWorkspace = baseWorkspace.strict();
 export const zWorkspaceLoose = zWorkspace.loose();
 const baseLayout = z.object({
@@ -68,32 +87,34 @@ 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." });
-export const zSplitDecoShapes = z.object({
-  edge: zEdge,
-  newFrame: zBaseSquare
-}).strict();
-export const zSplitDeco = z.object({
+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("edge"), data: zEdge, attrs: z.record(z.string(), z.string()).optional() })
+]);
+const zBaseDeco = z.object({
+  shapes: z.array(zLayoutShape).default([])
+});
+export const zSplitDeco = zBaseDeco.extend({
   id: z.uuid(),
   type: z.literal("split"),
   position: zScaledIntPercentage,
-  direction: zDirection,
-  shapes: zSplitDecoShapes
-}).strict();
+  direction: zDirection
+});
 export const zRawSplitDeco = zSplitDeco.omit({ shapes: true });
-const zCloseDeco = z.object({
+const zCloseDeco = zBaseDeco.extend({
   id: z.uuid(),
   type: z.literal("close"),
   force: z.boolean().optional()
-}).strict();
-const zDropDeco = z.object({
+});
+const zFrameDragDeco = zBaseDeco.extend({
   id: z.uuid(),
   type: z.literal("drop"),
   position: zSide.or(z.enum(["center"]))
-}).strict();
+});
 export const zDeco = z.union([
   zSplitDeco,
   zCloseDeco,
-  zDropDeco
+  zFrameDragDeco
 ]);
 export const LAYOUT_ERROR = enumFromArray([
   "INVALID_ID",
@@ -105,7 +126,20 @@ export const LAYOUT_ERROR = enumFromArray([
   "CANT_CLOSE_NEARBY_FRAMES_TOO_SMALL",
   "CANT_CLOSE_SINGLE_FRAME",
   "CANT_SPLIT_FRAME_TOO_SMALL",
-  "CANT_CLOSE_WITHOUT_FORCE"
+  "CANT_CLOSE_WITHOUT_FORCE",
+  "CANT_SWAP_WITH_SELF",
+  "CANT_REARRANGE_TO_SAME_RELATIVE_POSITION",
+  "CANT_REARRANGE_WITH_DOCKED_EDGES",
+  "CANT_REARRANGE_DOCKED_WITH_NON_DOCKED",
+  "CANT_SPLIT_DOCKED_FRAME",
+  "NO_SPACE_TO_REDISTRIBUTE",
+  "REDISTRIBUTE_OUT_OF_BOUNDS",
+  "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"
 ]);
 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "description": "Headless layout manager.",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "main": "./dist/runtime/index.js",
   "type": "module",
   "sideEffects": false,
@@ -29,12 +29,12 @@
   },
   "dependencies": {
     "@alanscodelog/utils": "^6.2.0",
-    "@iconify/json": "^2.2.383",
-    "es-toolkit": "^1.39.10"
+    "@iconify/json": "^2.2.474",
+    "es-toolkit": "^1.46.1"
   },
   "peerDependencies": {
     "@witchcraft/nuxt-utils": "^0.3.6",
-    "@witchcraft/ui": "0.4.0-beta.3"
+    "@witchcraft/ui": "^0.4.4"
   },
   "peerDependenciesMeta": {
     "@witchcraft/ui": {
@@ -46,43 +46,43 @@
   },
   "devDependencies": {
     "@alanscodelog/commitlint-config": "^3.1.2",
-    "@alanscodelog/eslint-config": "^6.3.0",
+    "@alanscodelog/eslint-config": "^6.3.1",
     "@alanscodelog/semantic-release-config": "^6.0.2",
     "@alanscodelog/tsconfigs": "^6.3.0",
-    "@alanscodelog/vite-config": "^0.0.6",
+    "@alanscodelog/vite-config": "^0.0.7",
     "@commitlint/cli": "^19.8.1",
-    "@nuxt/eslint-config": "^1.9.0",
-    "@nuxt/kit": "^4.1.2",
+    "@nuxt/eslint-config": "^1.15.2",
+    "@nuxt/kit": "^4.4.6",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.1.2",
+    "@nuxt/schema": "^4.4.6",
     "@nuxt/types": "^2.18.1",
-    "@tailwindcss/vite": "^4.1.12",
-    "@types/node": "^24.3.3",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vitest/coverage-c8": "^0.33.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "@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.4.0-beta.3",
+    "@witchcraft/ui": "^0.4.4",
     "concurrently": "^9.2.1",
-    "cross-env": "^10.0.0",
+    "cross-env": "^10.1.0",
     "fast-glob": "^3.3.3",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "indexit": "2.1.0-beta.3",
     "madge": "^8.0.0",
-    "nuxt": "^4.2.1",
+    "nuxt": "^4.4.6",
     "onchange": "^7.1.0",
-    "semantic-release": "^24.2.8",
-    "tailwindcss": "^4.1.12",
-    "typedoc": "0.28.12",
-    "typescript": "^5.8.3",
-    "unplugin-icons": "^22.3.0",
-    "unplugin-vue-components": "^29.0.0",
-    "uuid": "^13.0.0",
-    "vite": "^7.1.5",
+    "semantic-release": "^24.2.9",
+    "tailwindcss": "^4.3.0",
+    "typedoc": "0.28.19",
+    "typescript": "^5.9.3",
+    "unplugin-icons": "^22.5.0",
+    "unplugin-vue-components": "^29.2.0",
+    "uuid": "^13.0.2",
+    "vite": "^7.3.3",
     "vitest": "^3.2.4",
-    "vue": "^3.5.20",
+    "vue": "^3.5.34",
     "vue-tsc": "^2.2.12",
-    "zod": "^4.1.8"
+    "zod": "^4.4.3"
   },
   "author": "Alan <alanscodelog@gmail.com>",
   "repository": "https://github.com/witchcraftjs/layout",
@@ -132,15 +132,14 @@
     "dev:vite": "vite --mode development --config vite.dev.config.ts",
     "//dev": "The module needs to be build, not stubbed, for vite's dev to work.",
     "dev": "pnpm dev:vite",
-    "lint:eslint": "eslint \"{src,tests,bin}/**/*.{cjs,js,ts}\" \"*.{cjs,js,ts}\" --max-warnings=3 --report-unused-disable-directives",
+    "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",
     "lint": "pnpm lint:eslint && pnpm lint:types && pnpm lint:commits && pnpm lint:imports",
     "lint:types": "vue-tsc --noEmit",
     "coverage": "vitest --coverage",
     "coverage:dev": "vitest --watch --coverage",
-    "test": "echo no tests yet",
-    "test:watch": "vitest --watch",
+    "test": "vitest",
     "doc": "typedoc",
     "doc:watch": "onchange -i \"src/**/*.ts\" \"typedoc.config.js\" -- pnpm doc",
     "doc:serve": "http-server docs --port=5001",

package/src/runtime/components/FrameDragHandle.vue

@@ -0,0 +1,30 @@
+<template>
+<div
+	class="cursor-grabbing"
+	@pointerdown="handlePointerDown"
+>
+	<slot/>
+</div>
+</template>
+<script lang="ts" setup>
+import { inject, onBeforeUnmount } from "vue"
+import { dragContextInjectionKey } from "../drag/types.js";
+
+const props = defineProps<{
+	frameId: string
+}>()
+
+
+const dragContext = inject(dragContextInjectionKey)
+if (!dragContext) {
+	throw new Error("FrameDragHandle must be used inside a LayoutWindow and drag context returned by useFrames must be injected.")
+}
+function handlePointerDown(e: PointerEvent): void {
+	e.preventDefault()
+	e.stopPropagation()
+	dragContext!.dragStart( e,"frame", {frameId: props.frameId})
+}
+onBeforeUnmount(() => {
+	dragContext.cancel()
+})
+</script>

package/src/runtime/components/LayoutDecos.vue

@@ -1,52 +1,28 @@
 <template>
 <template
-	v-for="(deco) of splitDecos"
-	:key="deco.id"
+	v-for="(shape, i) of shapes"
+		:key="`${shape.type}-${i}`"
 >
 	<LayoutShapeSquare
-		class="
-				deco-split-new-frame
-				bg-blue-500/50
-			"
-		:css="getShapeSquareCss( deco.shapes.newFrame, `var(--layoutEdgeWidth,2px)`)"
+		v-if="shape.type === 'square'"
+		:css="getShapeSquareCss(shape.data, `var(--layoutEdgeWidth,2px)`)"
+		v-bind="shape.attrs ?? {}"
 	/>
 	<LayoutShapeSquare
-		class="
-			deco-split-edge
-			bg-red-500
-		"
-		:css="getVisualEdgeCss(deco.shapes.edge, {padLongAxis:`var(--layoutEdgeWidth,2px)`})"
-	/>
-</template>
-<template
-	v-for="deco of closeDecos"
-	:key="deco.id"
->
-	<LayoutShapeSquare
-		:class="`
-			${deco.force ? 'deco-close-force-frame' : 'deco-close-frame'}
-			bg-red-500/50
-		`"
-		:css="getShapeSquareCss( frames[deco.id], `var(--layoutEdgeWidth,2px)`)"
+		v-else-if="shape.type === 'edge'"
+		:css="getVisualEdgeCss(shape.data, { padLongAxis: 'var(--layoutEdgeWidth,2px)' })"
+		v-bind="shape.attrs ?? {}"
 	/>
 </template>
 </template>
 <script lang="ts" setup>
-
 import LayoutShapeSquare from "./LayoutShapeSquare.vue"
 
 import { getShapeSquareCss } from "../helpers/getShapeSquareCss"
 import { getVisualEdgeCss } from "../helpers/getVisualEdgeCss"
-import { type CloseDeco, type LayoutFrames, type Size, type SplitDeco } from "../types/index.js"
-
-
-const props = withDefaults(defineProps<{
-	frames: LayoutFrames
-	splitDecos: SplitDeco[]
-	closeDecos: CloseDeco[]
-} >(),{
-})
-
+import type { LayoutShape } from "../types/index.js"
 
+defineProps<{
+	shapes: LayoutShape[]
+}>()
 </script>
-

package/src/runtime/components/LayoutEdges.vue

@@ -11,9 +11,9 @@
 	`,
 		($attrs as any).class
 	)"
-	v-bind="{...$attrs, class: undefined}"
+	v-bind="{ ...$attrs, class: undefined }"
 />
-	
+
 <template
 	v-for="css, i of cssDragEdges"
 	:key="i"
@@ -26,9 +26,9 @@
 			hover:cursor-pointer
 			[&:hover+.edge]:bg-blue-500/50
 		`)"
-		@pointerdown="emit('dragStart', $event, {edge:edges[i]})"
+		@pointerdown="emit('dragStart', $event, 'edge', { edge: edges[i] })"
 	/>
-	<LayoutShapeSquare
+		<LayoutShapeSquare
 		:css="css.thin"
 		:class="twMerge(`
 			pointer-events-none
@@ -47,7 +47,10 @@
 	v-for="css, i of cssDragEdge"
 	:key="i"
 />
-<template v-for="css, i of cssDragIntersections" :key="i">
+<template
+	v-for="css, i of cssDragIntersections"
+	:key="i"
+>
 	<LayoutShapeSquare
 		:css="css.thick"
 		:class="twMerge(`
@@ -56,9 +59,9 @@
 		rounded-full
 		hover:cursor-pointer
 		[&:hover+.intersection]:bg-blue-500/50
-		`,
+		`
 		)"
-		@pointerdown="emit('dragStart', $event, { intersection:wantedIntersections[i]})"
+		@pointerdown="emit('dragStart', $event, 'edge', { intersection: wantedIntersections[i] })"
 	/>
 	<LayoutShapeSquare
 		:css="css.thin"
@@ -68,14 +71,15 @@
 		rounded-full
 		pointer-events-none
 		`,
-			css.thin._shifted && `w-[7px] h-[7px]`,
+			css.thin._shifted && `w-[7px] h-[7px]`
 		)"
 	/>
 </template>
 </template>
+
 <script lang="ts" setup>
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { computed,useAttrs } from "vue"
+import { computed, useAttrs } from "vue"
 
 import LayoutShapeSquare from "./LayoutShapeSquare.vue"
 
@@ -83,25 +87,27 @@ import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js"
 import { getShapeSquareCss } from "../helpers/getShapeSquareCss.js"
 import { getVisualEdgesCss } from "../helpers/getVisualEdgesCss.js"
 import { isEdgeEqual } from "../helpers/isEdgeEqual.js"
-import {
-	type Edge,
-	type EdgeCss,
-	type IntersectionEntry,
-	type LayoutEdgesProps,
+import type {
+	Edge,
+	EdgeCss,
+	IntersectionEntry,
+	LayoutEdgesProps
 } from "../types/index.js"
+
 const $attrs = useAttrs()
 
 defineOptions({
-	inheritAttrs: false,
+	inheritAttrs: false
 })
 
 const emit = defineEmits<{
-	dragStart: [e: PointerEvent, { edge?: Edge, intersection?: IntersectionEntry }]
+	dragStart: [e: PointerEvent, type:"edge", opts:{ edge?: Edge, intersection?: IntersectionEntry }]
 }>()
+
 const props = withDefaults(defineProps<LayoutEdgesProps>(), {
 	activeFrame: undefined,
 	draggingEdge: undefined,
-	draggingIntersection: undefined,
+	draggingIntersection: undefined
 })
 
 
@@ -119,12 +125,12 @@ const cssDragEdges = computed(() => {
 			: props.edges,
 		{
 			edgeWidth: `var(--layoutHandleWidth, 8px)`,
-			padLongAxis: `var(--layoutEdgeWidth, 2px)`,
+			padLongAxis: `var(--layoutEdgeWidth, 2px)`
 		}
 	)
 	const thinEdges = getVisualEdgesCss(props.edges, {
 		edgeWidth: `var(--layoutEdgeWidth, 2px)`,
-		padLongAxis: `(var(--layoutEdgeWidth, 2px) + var(--layoutExtraDragEdgePadding, 0px))`,
+		padLongAxis: `(var(--layoutEdgeWidth, 2px) + var(--layoutExtraDragEdgePadding, 0px))`
 	})
 	const edges: { thin: EdgeCss, thick: EdgeCss }[] = []
 	for (let i = 0; i < thickEdges.length; i++) {
@@ -137,7 +143,7 @@ const cssDragEdge = computed(() => {
 	if (!props.draggingEdge) return []
 	return getVisualEdgesCss([props.draggingEdge], {
 		edgeWidth: `var(--layoutEdgeWidth, 2px)`,
-		padLongAxis: `(var(--layoutEdgeWidth, 2px) + var(--layoutExtraDragEdgePadding, 0px))`,
+		padLongAxis: `(var(--layoutEdgeWidth, 2px) + var(--layoutExtraDragEdgePadding, 0px))`
 	})
 })
 
@@ -151,7 +157,7 @@ const cssDragIntersections = computed(() => {
 		thin: ReturnType<typeof getIntersectionsCss>[number]
 	}[] = []
 	const thick = getIntersectionsCss(wantedIntersections.value, {
-		intersectionWidth: `var(--layoutIntersectionWidth, 15px)`,
+		intersectionWidth: `var(--layoutIntersectionWidth, 15px)`
 	})
 	const thin = getIntersectionsCss(wantedIntersections.value, {
 	})
@@ -160,6 +166,5 @@ const cssDragIntersections = computed(() => {
 	}
 	return intersections
 })
-
 </script>
 

package/src/runtime/components/LayoutFrame.vue

@@ -10,7 +10,7 @@
 		`,
 		($attrs as any).class
 	)"
-	v-bind="{...$attrs, class: undefined}"
+	v-bind="{ ...$attrs, class: undefined }"
 	@focus="emit('focus')"
 >
 	<slot>
@@ -21,20 +21,22 @@
 	</slot>
 </LayoutShapeSquare>
 </template>
+
 <script lang="ts" setup>
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
 import { useAttrs } from "vue"
+
 const $attrs = useAttrs()
 
 defineOptions({
-	inheritAttrs: false,
+	inheritAttrs: false
 })
 
 import LayoutShapeSquare from "./LayoutShapeSquare.vue"
 
 import { getShapeSquareCss } from "../helpers/getShapeSquareCss"
 import { debugFrame } from "../layout/debugFrame.js"
-import { type LayoutFrameProps } from "../types/index.js"
+import type { LayoutFrameProps } from "../types/index.js"
 
 
 const emit = defineEmits<{
@@ -42,6 +44,5 @@ const emit = defineEmits<{
 	(e: "focus"): void
 }>()
 
-/* const props =  */defineProps<LayoutFrameProps>(
-)
+/* const props =  */defineProps<LayoutFrameProps>()
 </script>

package/src/runtime/components/LayoutShapeSquare.vue

@@ -1,12 +1,12 @@
 <template>
 <div
-	:style="`
+	:style="[`
 		--posX:${css.x};
 		--posY:${css.y};
 		--width:${css.width};
 		--height:${css.height};
 		${css.translate ? `--translate:${css.translate}`: ``}
-	` + style"
+	`, $attrs.style]"
 	:class="twMerge(`
 		absolute
 		w-[var(--width)]
@@ -17,21 +17,27 @@
 		css.translate && `[transform:var(--translate)]`,
 		($attrs as any).class
 	)"
-	v-bind="{...$attrs, class: undefined}"
+	v-bind="{ ...$attrs, class: undefined }"
 >
 	<slot/>
 </div>
 </template>
+
 <script setup lang="ts">
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
 import { useAttrs } from "vue"
+import type { HTMLAttributes } from "vue"
 
 import type { LayoutShapeSquareProps } from "../types/index.js"
+
 const $attrs = useAttrs()
 
 defineOptions({
-	inheritAttrs: false,
+	inheritAttrs: false
 })
 
-const props = defineProps<LayoutShapeSquareProps>()
+const props = defineProps<
+	& LayoutShapeSquareProps
+	& /** @vue-ignore */ HTMLAttributes
+>()
 </script>