@witchcraft/layout 1.0.0

package/dist/runtime/types/index.js

@@ -0,0 +1,120 @@
+import { enumFromArray } from "@alanscodelog/utils/enumFromArray";
+import { z } from "zod";
+export * from "../drag/types.js";
+import { getMaxInt } 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();
+const zPx = z.number().int().nonnegative();
+export const zPos = z.object({
+  x: zScaledIntPercentage,
+  y: zScaledIntPercentage
+});
+export const zSize = z.object({
+  width: zScaledIntPercentage,
+  height: zScaledIntPercentage
+});
+export const zPoint = z.object({
+  x: zScaledIntPercentage,
+  y: zScaledIntPercentage
+});
+export const zPxPos = z.object({
+  pxX: zPx,
+  pxY: zPx
+});
+export const zPxSize = z.object({
+  pxWidth: zPx,
+  pxHeight: zPx
+});
+export const zEdge = z.object({
+  startX: zScaledIntPercentage,
+  startY: zScaledIntPercentage,
+  endX: zScaledIntPercentage,
+  endY: zScaledIntPercentage
+});
+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 = z.looseObject({
+  id: z.uuid()
+}).extend(zBaseSquare.shape);
+export const zLayoutFramePassthrough = zLayoutFrame.passthrough();
+const baseLayoutWindow = z.object({
+  id: z.uuid(),
+  activeFrame: z.string().optional(),
+  frames: z.record(z.string(), zLayoutFrame)
+}).extend(zPxSize.shape).extend(zPxPos.shape);
+export const zLayoutWindow = baseLayoutWindow.strict();
+export const zLayoutWindowPassthrough = baseLayoutWindow;
+const baseWorkspace = zLayoutWindow.pick({ activeFrame: true, frames: true });
+export const zWorkspace = baseWorkspace.strict();
+export const zWorkspacePassthrough = zWorkspace.passthrough();
+const baseLayout = z.looseObject({
+  activeWindow: z.string().optional(),
+  windows: z.record(z.string(), zLayoutWindow)
+});
+export const zLayout = baseLayout.strict();
+export const zInitializedLayout = zLayout.required({
+  activeWindow: true
+}).refine((layout) => {
+  if (layout.windows[layout.activeWindow] === void 0) {
+    return false;
+  }
+  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({
+  id: z.uuid(),
+  type: z.literal("split"),
+  position: zScaledIntPercentage,
+  direction: zDirection,
+  shapes: zSplitDecoShapes
+}).strict();
+export const zRawSplitDeco = zSplitDeco.omit({ shapes: true });
+const zCloseDeco = z.object({
+  id: z.uuid(),
+  type: z.literal("close"),
+  force: z.boolean().optional()
+}).strict();
+const zDropDeco = z.object({
+  id: z.uuid(),
+  type: z.literal("drop"),
+  position: zSide.or(z.enum(["center"]))
+}).strict();
+export const zDeco = z.union([
+  zSplitDeco,
+  zCloseDeco,
+  zDropDeco
+]);
+export const LAYOUT_ERROR = enumFromArray([
+  "INVALID_ID",
+  "ID_ALREADY_EXISTS",
+  "CANT_RESIZE",
+  "NO_ACTIVE_WINDOW",
+  "NO_ACTIVE_FRAME",
+  "CANT_CLOSE_NO_DRAG_EDGE",
+  "CANT_CLOSE_NEARBY_FRAMES_TOO_SMALL",
+  "CANT_CLOSE_SINGLE_FRAME",
+  "CANT_SPLIT_FRAME_TOO_SMALL",
+  "CANT_CLOSE_WITHOUT_FORCE"
+]);
+export const zWindowCreate = zLayoutWindowPassthrough.partial({ id: true, pxWidth: true, pxHeight: true, pxX: true, pxY: true }).extend({ frames: zLayoutWindow.shape.frames.optional() });
+export const zLayoutCreate = baseLayout.extend({
+  windows: zLayout.shape.windows.optional()
+});
+export const zFrameCreate = zLayoutFrame.partial({
+  id: true,
+  x: true,
+  y: true,
+  width: true,
+  height: true
+});

package/dist/runtime/utils/KnownError.js

@@ -0,0 +1,9 @@
+export class KnownError extends Error {
+  code;
+  info;
+  constructor(code, str, info) {
+    super(str);
+    this.code = code;
+    this.info = info;
+  }
+}

package/dist/types.d.mts

@@ -0,0 +1,5 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'
+
+export * from '../dist/runtime/index.js'

package/package.json

@@ -0,0 +1,153 @@
+{
+	"name": "@witchcraft/layout",
+	"description": "Headless layout manager.",
+	"version": "1.0.0",
+	"main": "./dist/runtime/index.js",
+	"type": "module",
+	"sideEffects": false,
+	"exports": {
+		".": {
+			"types": "./dist/runtime/index.d.ts",
+			"import": "./dist/runtime/index.js"
+		},
+		"./components/*": {
+			"types": "./dist/runtime/components/*.vue.d.ts",
+			"import": "./dist/runtime/components/*.vue"
+		},
+		"./types": {
+			"types": "./dist/runtime/types/index.d.ts",
+			"import": "./dist/runtime/types/index.js"
+		},
+		"./*": {
+			"types": "./dist/runtime/*.d.ts",
+			"import": "./dist/runtime/*.js"
+		},
+		"./nuxt": {
+			"types": "./dist/types.d.mts",
+			"import": "./dist/module.mjs"
+		}
+	},
+	"scripts": {
+		"//prepare": "echo Needed so that if we pull the package from git it will get built and installed properly.",
+		"prepare": "husky && cd playground && pnpm i",
+		"build": "nuxt-module-build prepare && nuxt-module-build build && nuxi generate playground",
+		"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": "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:commits": "commitlint --from-last-tag --to HEAD --verbose",
+		"lint:imports": "echo disabled madge --circular --extensions ts ./src",
+		"lint": "pnpm lint:imports && pnpm lint:eslint && pnpm lint:types",
+		"lint:types": "vue-tsc --noEmit && cd playground",
+		"coverage": "vitest --coverage",
+		"coverage:dev": "vitest --watch --coverage",
+		"test": "echo no tests yet",
+		"test:watch": "vitest --watch",
+		"doc": "typedoc --options typedoc.config.js",
+		"doc:watch": "onchange -i \"src/**/*.ts\" \"typedoc.config.cjs\" -- pnpm doc",
+		"doc:serve": "http-server docs --port=5001",
+		"doc:dev": "concurrently \"pnpm doc:watch\" \"pnpm doc:serve\"",
+		"doc:check-invalid": "typedoc --options typedoc.config.cjs --listInvalidSymbolLinks",
+		"actions:debug": "act -r -v -j release",
+		"gen:exports": "indexit update --ignore **/*.d.ts **.vue src/assets/** -o '${path}.js'"
+	},
+	"dependencies": {
+		"@alanscodelog/utils": "^6.0.1",
+		"@iconify/json": "^2.2.383",
+		"es-toolkit": "^1.39.10"
+	},
+	"peerDependencies": {
+		"@witchcraft/nuxt-utils": "^0.2.1",
+		"@witchcraft/ui": "^0.2.1"
+	},
+	"peerDependenciesMeta": {
+		"@witchcraft/ui": {
+			"optional": true
+		},
+		"@witchcraft/nuxt-utils": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@alanscodelog/commitlint-config": "^3.1.2",
+		"@alanscodelog/eslint-config": "^6.3.0",
+		"@alanscodelog/semantic-release-config": "^5.0.4",
+		"@alanscodelog/tsconfigs": "^6.1.0",
+		"@alanscodelog/vite-config": "^0.0.6",
+		"@commitlint/cli": "^19.8.1",
+		"@nuxt/eslint-config": "^1.9.0",
+		"@nuxt/kit": "^4.1.2",
+		"@nuxt/module-builder": "^1.0.2",
+		"@nuxt/schema": "^4.1.2",
+		"@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",
+		"@witchcraft/nuxt-utils": "^0.3.2",
+		"@witchcraft/ui": "^0.2.1",
+		"concurrently": "^9.2.1",
+		"cross-env": "^10.0.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.1.2",
+		"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",
+		"vitest": "^3.2.4",
+		"vue": "^3.5.20",
+		"vue-tsc": "^3.0.7",
+		"zod": "^4.1.8"
+	},
+	"author": "Alan <alanscodelog@gmail.com>",
+	"repository": "https://github.com/witchcraftjs/layout",
+	"license": "MIT",
+	"files": [
+		"src",
+		"dist"
+	],
+	"release": {
+		"extends": [
+			"@alanscodelog/semantic-release-config"
+		]
+	},
+	"commitlint": {
+		"extends": [
+			"@alanscodelog"
+		]
+	},
+	"madge": {
+		"detectiveOptions": {
+			"ts": {
+				"skipTypeImports": true
+			}
+		}
+	},
+	"browserslist": "defaults and supports es6-module,maintained node versions",
+	"engines": {
+		"node": ">=20.0.0"
+	},
+	"@comments": {
+		"scripts": {
+			"test:inspect-errors": "For use with my inspect_error utility function from @alanscodelog/utils",
+			"prepare": "Needed so that if we pull the package from git it will get built and installed properly.",
+			"actions:debug": "For debugging github build action locally with nektos/act. Requires act and docker. Note: Cache will never work locally because of https://github.com/nektos/act/issues/285"
+		}
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/src/module.ts

@@ -0,0 +1,43 @@
+import {
+	addComponentsDir,
+	addTemplate,
+	createResolver,
+	defineNuxtModule
+} from "@nuxt/kit"
+
+export * from "./runtime/index.js"
+
+declare module "@nuxt/schema" {
+	interface PublicRuntimeConfig {
+	}
+}
+
+export interface ModuleOptions {
+	debug?: boolean
+}
+
+export default defineNuxtModule<ModuleOptions>({
+	meta: {
+		name: "@witchcraft/layout",
+		configKey: "witchcraftLayout"
+	},
+	defaults: {
+		debug: false
+	},
+	async setup(_options, nuxt) {
+		const { resolve } = createResolver(import.meta.url)
+		// const logger = useLogger(moduleName, { level: options.debug ? 10 : 0 })
+
+		addComponentsDir({
+			path: resolve("runtime/components")
+		})
+
+		addTemplate({
+			filename: "witchcraft-layout.css",
+			write: true,
+			getContents: () => `@source "${resolve("runtime/components")}";`
+		})
+
+		nuxt.options.alias["#witchcraft-layout"] = resolve("runtime")
+	}
+})

package/src/runtime/components/LayoutDecos.vue

@@ -0,0 +1,62 @@
+<template>
+<!-- <div -->
+<!-- 	v-bind="$attrs" -->
+<!-- 	class="decos" -->
+<!-- > -->
+<template
+	v-for="(deco) of splitDecos"
+	:key="deco.id"
+>
+	<LayoutShapeSquare
+		class="
+				deco-split-new-frame
+				bg-blue-500/50
+			"
+		:css="getShapeSquareCss( deco.shapes.newFrame, `var(--layoutEdgeWidth,2px)`)"
+	/>
+	<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)`)"
+	/>
+</template>
+<!-- </div> -->
+</template>
+<script lang="ts" setup>
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import type { PropType } from "vue"
+import { computed, inject, ref, useAttrs } from "vue"
+
+import LayoutShapeSquare from "./LayoutShapeSquare.vue"
+
+import { dirToOrientation } from "../helpers/dirToOrientation.js"
+import { getShapeSquareCss } from "../helpers/getShapeSquareCss"
+import { getVisualEdgeCss } from "../helpers/getVisualEdgeCss"
+import { type CloseDeco, type LayoutFrames, type Size, type SplitDeco } from "../types/index.js"
+
+const $attrs = useAttrs()
+
+const props = withDefaults(defineProps<{
+	frames: LayoutFrames
+	splitDecos: SplitDeco[]
+	closeDecos: CloseDeco[]
+} >(),{
+})
+
+
+</script>
+

package/src/runtime/components/LayoutEdges.vue

@@ -0,0 +1,172 @@
+<template>
+<LayoutShapeSquare
+	v-if="activeFrame"
+	:css="getShapeSquareCss(activeFrame, `var(--layoutEdgeWidth,2px)`)"
+	:class="twMerge(`
+		active-frame-edge
+		pointer-events-none
+		z-0
+		border-blue-500
+		border
+	`,
+	)"
+/>
+	
+<template
+	v-for="css, i of cssDragEdges"
+	:key="i"
+>
+	<LayoutShapeSquare
+		:css="css.thick"
+		:class="twMerge(`
+			drag-edge
+			z-20
+			hover:cursor-pointer
+			[&:hover+.edge]:bg-blue-500/50
+		`)"
+		@pointerdown="emit('dragStart', $event, {edge:edges[i]})"
+	/>
+	<LayoutShapeSquare
+		:css="css.thin"
+		:class="twMerge(`
+			pointer-events-none
+			edge
+		`)"
+	/>
+</template>
+<LayoutShapeSquare
+	:css="css"
+	:class="twMerge(`
+			grabbed-edge
+			z-20
+			bg-blue-500/50
+			cursor-pointer
+		`)"
+	v-for="css, i of cssDragEdge"
+	:key="i"
+/>
+<template v-for="css, i of cssDragIntersections" :key="i">
+	<LayoutShapeSquare
+		:css="css.thick"
+		:class="twMerge(`
+		drag-intersection
+		z-30
+		rounded-full
+		hover:cursor-pointer
+		[&:hover+.intersection]:bg-blue-500/50
+		`,
+		)"
+		@pointerdown="emit('dragStart', $event, { intersection:wantedIntersections[i]})"
+	/>
+	<LayoutShapeSquare
+		:css="css.thin"
+		:class="twMerge(`
+		intersection
+		z-30
+		rounded-full
+		pointer-events-none
+		`,
+			css.thin._shifted && `w-[7px] h-[7px]`,
+		)"
+	/>
+</template>
+</template>
+<script lang="ts" setup>
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import { computed,type PropType, ref,useAttrs } from "vue"
+
+import LayoutShapeSquare from "./LayoutShapeSquare.vue"
+
+import { frameToEdges } from "../helpers/frameToEdges.js"
+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 { toWindowCoord } from "../helpers/toWindowCoord.js"
+import {
+	type Edge,
+	type EdgeCss,
+	type IntersectionEntry,
+	type LayoutFrame,
+	type LayoutWindow,
+	type Point,
+} from "../types/index.js"
+const $attrs = useAttrs()
+
+const emit = defineEmits<{
+	dragStart: [e: PointerEvent, { edge?: Edge, intersection?: IntersectionEntry }]
+}>()
+const props = withDefaults(defineProps< {
+	edges: Edge[]
+	intersections: IntersectionEntry[]
+	/** The owning window, needed so we can correctly scale coordinates. */
+	win: LayoutWindow
+	/** The active frame, used to render the active edges. Calculate it from the `frames` returned by `useFrames` composable because otherwise it will be the wrong size while dragging. */
+	activeFrame?: LayoutFrame
+	draggingEdge?: Edge
+	draggingIntersection?: IntersectionEntry
+}>(), {
+	activeFrame: undefined,
+	draggingEdge: undefined,
+	draggingIntersection: undefined,
+})
+
+
+const activeFrameCssEdges = computed(() => {
+	if (!props.activeFrame) return []
+	return getVisualEdgesCss(Object.values(frameToEdges(props.activeFrame)), {
+		edgeWidth: `var(--layoutEdgeWidth, 2px)`,
+	})
+})
+
+const cssDragEdges = computed(() => {
+	const thickEdges = getVisualEdgesCss(
+		props.draggingEdge
+			? props.edges.filter(_ => !isEdgeEqual(props.draggingEdge!, _))
+			: props.edges,
+		{
+			edgeWidth: `var(--layoutHandleWidth, 8px)`,
+			padLongAxis: `var(--layoutEdgeWidth, 2px)`,
+		}
+	)
+	const thinEdges = getVisualEdgesCss(props.edges, {
+		edgeWidth: `var(--layoutEdgeWidth, 2px)`,
+		padLongAxis: `(var(--layoutEdgeWidth, 2px) + var(--layoutExtraDragEdgePadding, 0px))`,
+	})
+	const edges: { thin: EdgeCss, thick: EdgeCss }[] = []
+	for (let i = 0; i < thickEdges.length; i++) {
+		edges.push({ thin: thinEdges[i], thick: thickEdges[i] })
+	}
+	return edges
+})
+
+const cssDragEdge = computed(() => {
+	if (!props.draggingEdge) return []
+	return getVisualEdgesCss([props.draggingEdge], {
+		edgeWidth: `var(--layoutEdgeWidth, 2px)`,
+		padLongAxis: `(var(--layoutEdgeWidth, 2px) + var(--layoutExtraDragEdgePadding, 0px))`,
+	})
+})
+
+
+const wantedIntersections = computed(() => props.intersections
+	.filter(_ => !_.isWindowEdge && (_.count === 4 || (_.count === 1 && _.sharesEdge)))
+)
+const cssDragIntersections = computed(() => {
+	const intersections: {
+		thick: ReturnType<typeof getIntersectionsCss>[number]
+		thin: ReturnType<typeof getIntersectionsCss>[number]
+	}[] = []
+	const thick = getIntersectionsCss(wantedIntersections.value, {
+		intersectionWidth: `var(--layoutIntersectionWidth, 15px)`,
+	})
+	const thin = getIntersectionsCss(wantedIntersections.value, {
+	})
+	for (let i = 0; i < thick.length; i++) {
+		intersections.push({ thick: thick[i], thin: thin[i] })
+	}
+	return intersections
+})
+
+</script>
+

package/src/runtime/components/LayoutFrame.vue

@@ -0,0 +1,47 @@
+<template>
+<!-- @vue-expect-error just let it inherit extra attrs -->
+<!-- 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
+	tabindex="0"
+	:css="getShapeSquareCss(frame)"
+	:class="twMerge(`
+		frame
+		p-[var(--layoutEdgeWidth,_2px)]
+		overflow-hidden
+		`,
+		$attrs.class
+	)"
+	v-bind="{...$attrs, class: undefined}"
+	@focus="emit('focus')"
+>
+	<slot>
+		<div class="p-2 text-xs bg-neutral-500">
+			{{ debugFrame(frame) }}
+		</div>
+		<div>No slot found for `frame-{{ frame.id }}`. </div>
+	</slot>
+</LayoutShapeSquare>
+</template>
+<script lang="ts" setup>
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import { type PropType } from "vue"
+import { useAttrs } from "vue"
+const $attrs = useAttrs()
+
+import LayoutShapeSquare from "./LayoutShapeSquare.vue"
+
+import { getShapeSquareCss } from "../helpers/getShapeSquareCss"
+import { debugFrame } from "../layout/debugFrame.js"
+import { type LayoutFrame } from "../types/index.js"
+
+
+const emit = defineEmits<{
+	/** Documentation #todo */
+	(e: "focus"): void
+}>()
+
+/* const props =  */defineProps({
+	frame: { type: Object as PropType<LayoutFrame>, required: true },
+	isActiveFrame: { type: Boolean, required: true },
+})
+</script>

package/src/runtime/components/LayoutShapeSquare.vue

@@ -0,0 +1,38 @@
+<template>
+<div
+	:style="`
+		--posX:${css.x};
+		--posY:${css.y};
+		--width:${css.width};
+		--height:${css.height};
+		${css.translate ? `--translate:${css.translate}`: ``}
+	` + style"
+	:class="twMerge(`
+		absolute
+		w-[var(--width)]
+		h-[var(--height)]
+		top-[var(--posY)]
+		left-[var(--posX)]
+	`,
+		css.translate && `[transform:var(--translate)]`,
+		$attrs.class as any
+	)"
+	v-bind="{...$attrs, class: undefined}"
+>
+	<slot/>
+</div>
+</template>
+<script setup lang="ts">
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import { type PropType } from "vue"
+import { useAttrs } from "vue"
+
+import type { BaseSquareCss } from "../types/index.js"
+const $attrs = useAttrs()
+
+
+const props = defineProps({
+	style: { type: String, required: false, default: "" },
+	css: { type: Object as PropType<BaseSquareCss>, required: true },
+})
+</script>