@witchcraft/layout 0.1.0 → 0.1.2

package/README.md

@@ -42,8 +42,7 @@ export {}
 
 ```
 
-Or if using zod, you can do something like this. Note that you will need to create/extend `zLayoutWindow/Frame` or use `zLayoutWindow/FrameLoose` to allow for extra properties. All zod types have been made `strict` where possible as it's easy to accidentally use the wrong type and loose properties silently otherwise. 
-
+Or if using zod, you can do something like this. Note that you will need to create/extend `zLayoutWindow/Frame` or use `zLayoutWindow/FrameLoose` to allow for extra properties. They also use a basic `z.uuid()`, if you need something more specific you'll have to extend the type.
 ```ts
 import { zLayoutFrameLoose, layoutCreate } from "@witchcraft/layout"
 import { z } from "zod"
@@ -64,16 +63,18 @@ export const zAppFrame = z.discriminatedUnion("type", [
 		}),
 	}),
 ]).and(z.object({
-	id: z.uuid(),
+	id: z.uuidv4(), // here we can specify a specific uuid type
 }))
 
+
 declare module "@witchcraft/layout" {
 	interface Register {
-		//	Register the type
+		//	Register the type, this allows importing the type from the package, while also allowing the types to be extended
 		ExtendedLayoutFrame: z.infer<typeof zAppFrame>
 	}
 }
 ```
+Note that `zFrameId` and `zWinId` are different as they also support constants (`zFrameIdConstants` and `zWindowIdConstants`).
 
 ## Basics
 

package/dist/module.json

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

package/dist/runtime/components/LayoutDecos.vue

@@ -1,8 +1,4 @@
 <template>
-<!-- <div -->
-<!-- 	v-bind="$attrs" -->
-<!-- 	class="decos" -->
-<!-- > -->
 <template
 	v-for="(deco) of splitDecos"
 	:key="deco.id"
@@ -34,18 +30,13 @@
 		:css="getShapeSquareCss(frames[deco.id], `var(--layoutEdgeWidth,2px)`)"
 	/>
 </template>
-<!-- </div> -->
 </template>
 
 <script setup>
-import { twMerge } from "@witchcraft/ui/utils/twMerge";
-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 {} from "../types/index.js";
-const $attrs = useAttrs();
 const props = defineProps({
   frames: { type: Object, required: true },
   splitDecos: { type: Array, required: true },

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

@@ -1,26 +1,16 @@
-import { type Edge, type IntersectionEntry, type LayoutFrame, type LayoutWindow } from "../types/index.js";
-type __VLS_Props = {
-    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;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import { type Edge, type IntersectionEntry, type LayoutEdgesProps } from "../types/index.js";
+declare const _default: import("vue").DefineComponent<LayoutEdgesProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dragStart: (e: PointerEvent, args_1: {
         edge?: Edge;
         intersection?: IntersectionEntry;
     }) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<LayoutEdgesProps> & Readonly<{
     onDragStart?: ((e: PointerEvent, args_1: {
         edge?: Edge;
         intersection?: IntersectionEntry;
     }) => any) | undefined;
 }>, {
-    activeFrame: LayoutFrame;
+    activeFrame: import("../types/index.js").LayoutFrame;
     draggingEdge: Edge;
     draggingIntersection: IntersectionEntry;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/LayoutEdges.vue

@@ -9,8 +9,10 @@
 		z-0
 		border-blue-500
 		border
-	`
+	`,
+  $attrs.class
 )"
+	v-bind="{ ...$attrs, class: void 0 }"
 />
 	
 <template
@@ -77,17 +79,18 @@
 
 <script setup>
 import { twMerge } from "@witchcraft/ui/utils/twMerge";
-import { computed, ref, useAttrs } from "vue";
+import { computed, 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 {
 } from "../types/index.js";
 const $attrs = useAttrs();
+defineOptions({
+  inheritAttrs: false
+});
 const emit = defineEmits(["dragStart"]);
 const props = defineProps({
   edges: { type: Array, required: true },
@@ -95,13 +98,10 @@ const props = defineProps({
   win: { type: Object, required: true },
   activeFrame: { type: Object, required: false, default: void 0 },
   draggingEdge: { type: null, required: false, default: void 0 },
-  draggingIntersection: { type: Object, required: false, default: void 0 }
-});
-const activeFrameCssEdges = computed(() => {
-  if (!props.activeFrame) return [];
-  return getVisualEdgesCss(Object.values(frameToEdges(props.activeFrame)), {
-    edgeWidth: `var(--layoutEdgeWidth, 2px)`
-  });
+  draggingIntersection: { type: Object, required: false, default: void 0 },
+  css: { type: Object, required: false },
+  style: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+  class: { type: String, required: false }
 });
 const cssDragEdges = computed(() => {
   const thickEdges = getVisualEdgesCss(

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

@@ -1,26 +1,16 @@
-import { type Edge, type IntersectionEntry, type LayoutFrame, type LayoutWindow } from "../types/index.js";
-type __VLS_Props = {
-    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;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import { type Edge, type IntersectionEntry, type LayoutEdgesProps } from "../types/index.js";
+declare const _default: import("vue").DefineComponent<LayoutEdgesProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dragStart: (e: PointerEvent, args_1: {
         edge?: Edge;
         intersection?: IntersectionEntry;
     }) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<LayoutEdgesProps> & Readonly<{
     onDragStart?: ((e: PointerEvent, args_1: {
         edge?: Edge;
         intersection?: IntersectionEntry;
     }) => any) | undefined;
 }>, {
-    activeFrame: LayoutFrame;
+    activeFrame: import("../types/index.js").LayoutFrame;
     draggingEdge: Edge;
     draggingIntersection: IntersectionEntry;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,32 +1,13 @@
-import { type PropType } from "vue";
-import { type LayoutFrame } from "../types/index.js";
+import { type LayoutFrameProps } from "../types/index.js";
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    frame: {
-        type: PropType<LayoutFrame>;
-        required: true;
-    };
-    isActiveFrame: {
-        type: BooleanConstructor;
-        required: true;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_component: import("vue").DefineComponent<LayoutFrameProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     focus: () => any;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    frame: {
-        type: PropType<LayoutFrame>;
-        required: true;
-    };
-    isActiveFrame: {
-        type: BooleanConstructor;
-        required: true;
-    };
-}>> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<LayoutFrameProps> & Readonly<{
     onFocus?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/LayoutFrame.vue

@@ -1,5 +1,4 @@
 <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"
@@ -26,9 +25,11 @@
 
 <script setup>
 import { twMerge } from "@witchcraft/ui/utils/twMerge";
-import {} from "vue";
 import { useAttrs } from "vue";
 const $attrs = useAttrs();
+defineOptions({
+  inheritAttrs: false
+});
 import LayoutShapeSquare from "./LayoutShapeSquare.vue";
 import { getShapeSquareCss } from "../helpers/getShapeSquareCss";
 import { debugFrame } from "../layout/debugFrame.js";
@@ -36,6 +37,9 @@ import {} from "../types/index.js";
 const emit = defineEmits(["focus"]);
 defineProps({
   frame: { type: Object, required: true },
-  isActiveFrame: { type: Boolean, required: true }
+  isActiveFrame: { type: Boolean, required: true },
+  css: { type: Object, required: false },
+  style: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+  class: { type: String, required: false }
 });
 </script>

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

@@ -1,32 +1,13 @@
-import { type PropType } from "vue";
-import { type LayoutFrame } from "../types/index.js";
+import { type LayoutFrameProps } from "../types/index.js";
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    frame: {
-        type: PropType<LayoutFrame>;
-        required: true;
-    };
-    isActiveFrame: {
-        type: BooleanConstructor;
-        required: true;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_component: import("vue").DefineComponent<LayoutFrameProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     focus: () => any;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    frame: {
-        type: PropType<LayoutFrame>;
-        required: true;
-    };
-    isActiveFrame: {
-        type: BooleanConstructor;
-        required: true;
-    };
-}>> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<LayoutFrameProps> & Readonly<{
     onFocus?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,32 +1,9 @@
-import { type PropType } from "vue";
-import type { BaseSquareCss } from "../types/index.js";
+import type { LayoutShapeSquareProps } from "../types/index.js";
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    style: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    css: {
-        type: PropType<BaseSquareCss>;
-        required: true;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    style: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    css: {
-        type: PropType<BaseSquareCss>;
-        required: true;
-    };
-}>> & Readonly<{}>, {
-    style: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<LayoutShapeSquareProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutShapeSquareProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/LayoutShapeSquare.vue

@@ -26,11 +26,14 @@
 
 <script setup>
 import { twMerge } from "@witchcraft/ui/utils/twMerge";
-import {} from "vue";
 import { useAttrs } from "vue";
 const $attrs = useAttrs();
+defineOptions({
+  inheritAttrs: false
+});
 const props = defineProps({
-  style: { type: String, required: false, default: "" },
-  css: { type: Object, required: true }
+  css: { type: Object, required: true },
+  style: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+  class: { type: String, required: false }
 });
 </script>

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

@@ -1,32 +1,9 @@
-import { type PropType } from "vue";
-import type { BaseSquareCss } from "../types/index.js";
+import type { LayoutShapeSquareProps } from "../types/index.js";
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    style: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    css: {
-        type: PropType<BaseSquareCss>;
-        required: true;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    style: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    css: {
-        type: PropType<BaseSquareCss>;
-        required: true;
-    };
-}>> & Readonly<{}>, {
-    style: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<LayoutShapeSquareProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutShapeSquareProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,5 +1,5 @@
 import { type DragState, type IDragAction } from "../drag/types.js";
-import { type LayoutWindow } from "../types/index.js";
+import { type LayoutEdgesProps, type LayoutFrameProps, type LayoutWindow } from "../types/index.js";
 type __VLS_Props = {
     additionalDragActions?: IDragAction[];
     splitKeyHandler?: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;
@@ -14,6 +14,8 @@ type __VLS_Props = {
      * 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">>;
 };
 declare function updateWindowSize(): void;
 type __VLS_PublicProps = __VLS_Props & {

package/dist/runtime/components/LayoutWindow.vue

@@ -7,17 +7,17 @@
 	`,
   isDragging && `dragging cursor-pointer`,
   requestType && `request-${requestType}`,
-  $attrs.attrs.class
+  $attrs.class
 )"
 	ref="windowEl"
-	v-bind="{ ...$attrs.attrs, class: void 0 }"
+	v-bind="{ ...$attrs, class: void 0 }"
 >
 	<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="$attrs.frameAttrs"
+			v-bind="frameProps"
 			@focus="windowSetActiveFrame(win, frame.id)"
 		>
 			<slot :name="`frame-${frame.id}`" v-bind="{ frame }"/>
@@ -29,14 +29,13 @@
 			:intersections="intersections"
 			:dragging-edge="draggingEdges.length === 1 ? draggingEdges[0] : void 0"
 			:dragging-intersection="draggingIntersection"
-			v-bind="$attrs.edgesAttrs"
+			v-bind="edgesProps"
 			@drag-start="dragStart"
 		/>
 		<LayoutDecosComponent
 			:frames="frames"
 			:split-decos="splitDecos"
 			:close-decos="closeDecos"
-			v-bind="$attrs.decosAttrs"
 		/>
 		<slot name="extra-decos"/>
 	</template>
@@ -45,7 +44,6 @@
 			<span
 				class="
 					after:content-['┃']
-					after:text-accent-500
 					last:after:content-none
 					after:mx-1
 					after:text-gray-500
@@ -61,10 +59,10 @@
 </template>
 
 <script setup>
-import { useDivideAttrs } from "@witchcraft/ui/composables/useDivideAttrs";
 import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalResizeObserver";
 import { twMerge } from "@witchcraft/ui/utils/twMerge";
-import { computed, ref, watch } from "vue";
+import { computed, ref, useAttrs, watch } from "vue";
+import {} from "vue";
 import LayoutDecosComponent from "./LayoutDecos.vue";
 import LayoutEdgesComponent from "./LayoutEdges.vue";
 import LayoutFrameComponent from "./LayoutFrame.vue";
@@ -76,7 +74,7 @@ import {} from "../drag/types.js";
 import { updateWindowWithEvent } from "../helpers/updateWindowSizeWithEvent.js";
 import { windowSetActiveFrame } from "../layout/windowSetActiveFrame.js";
 import {} from "../types/index.js";
-const $attrs = useDivideAttrs(["frame", "edges", "decos"]);
+const $attrs = useAttrs();
 const win = defineModel("win", { type: Object, ...{ required: true } });
 const props = defineProps({
   additionalDragActions: { type: Array, required: false, default: () => [] },
@@ -84,7 +82,9 @@ const props = defineProps({
   closeKeyHandler: { type: Function, required: false, default: void 0 },
   usageInstructions: { type: Object, required: false, default: () => ({}) },
   instructionsTeleportTo: { type: null, required: true },
-  allowWindowSizeUpdate: { type: Boolean, required: false, default: true }
+  allowWindowSizeUpdate: { type: Boolean, required: false, default: true },
+  frameProps: { type: Object, required: false },
+  edgesProps: { type: Object, required: false }
 });
 const emit = defineEmits(["isShowingDrag", "dragState"]);
 const filteredUsageInstructions = computed(() => Object.values(props.usageInstructions).filter((_) => _ !== void 0).map((_) => _));

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

@@ -1,5 +1,5 @@
 import { type DragState, type IDragAction } from "../drag/types.js";
-import { type LayoutWindow } from "../types/index.js";
+import { type LayoutEdgesProps, type LayoutFrameProps, type LayoutWindow } from "../types/index.js";
 type __VLS_Props = {
     additionalDragActions?: IDragAction[];
     splitKeyHandler?: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;
@@ -14,6 +14,8 @@ type __VLS_Props = {
      * 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">>;
 };
 declare function updateWindowSize(): void;
 type __VLS_PublicProps = __VLS_Props & {

package/dist/runtime/demo/App.vue

@@ -60,7 +60,7 @@
 
 <script setup>
 import { keys } from "@alanscodelog/utils/keys";
-import WRoot from "@witchcraft/ui/components/LibRoot";
+import WRoot from "@witchcraft/ui/components/WRoot";
 import { twMerge } from "@witchcraft/ui/utils/twMerge";
 import { computed, onBeforeMount, ref } from "vue";
 import DemoControls from "./DemoControls.vue";

package/dist/runtime/demo/DemoControls.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import WDarkModeSwitcher from "@witchcraft/ui/components/LibDarkModeSwitcher";
+import WDarkModeSwitcher from "@witchcraft/ui/components/WDarkModeSwitcher";
 defineProps({
   frames: { type: Array, required: true }
 });

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

@@ -1,6 +1,7 @@
 import type { EnumLike } from "@alanscodelog/utils";
 import { z } from "zod";
 export * from "../drag/types.js";
+import type { HTMLAttributes, StyleValue } from "vue";
 export declare const zUuid: z.ZodUUID;
 export type AnyUuid = z.infer<typeof zUuid>;
 export declare const zWindowIdConstants: z.ZodEnum<{
@@ -381,9 +382,8 @@ export declare const LAYOUT_ERROR: {
     CANT_CLOSE_WITHOUT_FORCE: "CANT_CLOSE_WITHOUT_FORCE";
 };
 export type LayoutError = EnumLike<typeof LAYOUT_ERROR>;
-export type AllErrors = LayoutError;
-export type ErrorInfo<T extends AllErrors> = AllErrorsInfo[T] extends undefined ? never : AllErrorsInfo[T];
-type AllErrorsInfo = {
+export type LayoutErrorInfo<T extends LayoutError> = LayoutErrorsInfo[T] extends undefined ? never : LayoutErrorsInfo[T];
+export type LayoutErrorsInfo = {
     [LAYOUT_ERROR.INVALID_ID]: {
         id: string | undefined;
     };
@@ -457,3 +457,23 @@ export declare const zFrameCreate: z.ZodObject<{
     x: z.ZodOptional<z.ZodNumber>;
     y: z.ZodOptional<z.ZodNumber>;
 }, z.core.$loose>;
+export type LayoutShapeSquareProps = {
+    css: BaseSquareCss;
+    style?: StyleValue;
+} & /** @vue-ignore */ Omit<HTMLAttributes, "class" | "onFocus"> & {
+    class?: string;
+};
+export type LayoutEdgesProps = {
+    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;
+} & Partial<LayoutShapeSquareProps>;
+export type LayoutFrameProps = {
+    frame: LayoutFrame;
+    isActiveFrame: boolean;
+} & Partial<LayoutShapeSquareProps>;

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

@@ -1,9 +1,9 @@
-import type { AllErrors, ErrorInfo } from "../types/index.js";
+import type { LayoutError, LayoutErrorInfo } from "../types/index.js";
 /**
  * Creates a known error that extends the base Error with some extra information.
  * All the variables used to create the error message are stored in it's info property so we can easily re-craft error messages for users.
  */
-export declare class KnownError<T extends AllErrors = AllErrors, TInfo extends ErrorInfo<T> = ErrorInfo<T>> extends Error {
+export declare class KnownError<T extends LayoutError = LayoutError, TInfo extends LayoutErrorInfo<T> = LayoutErrorInfo<T>> extends Error {
     code: T;
     info: TInfo;
     constructor(code: T, str: string, info: TInfo);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "description": "Headless layout manager.",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "main": "./dist/runtime/index.js",
   "type": "module",
   "sideEffects": false,
@@ -28,13 +28,13 @@
     }
   },
   "dependencies": {
-    "@alanscodelog/utils": "^6.0.1",
+    "@alanscodelog/utils": "^6.2.0",
     "@iconify/json": "^2.2.383",
     "es-toolkit": "^1.39.10"
   },
   "peerDependencies": {
     "@witchcraft/nuxt-utils": "^0.3.6",
-    "@witchcraft/ui": "^0.3.7"
+    "@witchcraft/ui": "0.4.0-beta.3"
   },
   "peerDependenciesMeta": {
     "@witchcraft/ui": {
@@ -47,8 +47,8 @@
   "devDependencies": {
     "@alanscodelog/commitlint-config": "^3.1.2",
     "@alanscodelog/eslint-config": "^6.3.0",
-    "@alanscodelog/semantic-release-config": "^6.0.0",
-    "@alanscodelog/tsconfigs": "^6.2.0",
+    "@alanscodelog/semantic-release-config": "^6.0.2",
+    "@alanscodelog/tsconfigs": "^6.3.0",
     "@alanscodelog/vite-config": "^0.0.6",
     "@commitlint/cli": "^19.8.1",
     "@nuxt/eslint-config": "^1.9.0",
@@ -61,7 +61,7 @@
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/coverage-c8": "^0.33.0",
     "@witchcraft/nuxt-utils": "^0.3.6",
-    "@witchcraft/ui": "^0.3.7",
+    "@witchcraft/ui": "0.4.0-beta.3",
     "concurrently": "^9.2.1",
     "cross-env": "^10.0.0",
     "fast-glob": "^3.3.3",

package/src/runtime/components/LayoutDecos.vue

@@ -1,8 +1,4 @@
 <template>
-<!-- <div -->
-<!-- 	v-bind="$attrs" -->
-<!-- 	class="decos" -->
-<!-- > -->
 <template
 	v-for="(deco) of splitDecos"
 	:key="deco.id"
@@ -34,21 +30,15 @@
 		: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

package/src/runtime/components/LayoutEdges.vue

@@ -9,7 +9,9 @@
 		border-blue-500
 		border
 	`,
+		($attrs as any).class
 	)"
+	v-bind="{...$attrs, class: undefined}"
 />
 	
 <template
@@ -73,51 +75,42 @@
 </template>
 <script lang="ts" setup>
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { computed,type PropType, ref,useAttrs } from "vue"
+import { computed,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,
+	type LayoutEdgesProps,
 } from "../types/index.js"
 const $attrs = useAttrs()
 
+defineOptions({
+	inheritAttrs: false,
+})
+
 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
-}>(), {
+const props = withDefaults(defineProps<LayoutEdgesProps>(), {
 	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 activeFrameCssEdges = computed(() => {
+// 	if (!props.activeFrame) return []
+// 	return getVisualEdgesCss(Object.values(frameToEdges(props.activeFrame)), {
+// 		edgeWidth: `var(--layoutEdgeWidth, 2px)`,
+// 	})
+// })
 
 const cssDragEdges = computed(() => {
 	const thickEdges = getVisualEdgesCss(

package/src/runtime/components/LayoutFrame.vue

@@ -1,5 +1,4 @@
 <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"
@@ -9,7 +8,7 @@
 		p-[var(--layoutEdgeWidth,_2px)]
 		overflow-hidden
 		`,
-		$attrs.class
+		($attrs as any).class
 	)"
 	v-bind="{...$attrs, class: undefined}"
 	@focus="emit('focus')"
@@ -24,15 +23,18 @@
 </template>
 <script lang="ts" setup>
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { type PropType } from "vue"
 import { useAttrs } from "vue"
 const $attrs = useAttrs()
 
+defineOptions({
+	inheritAttrs: false,
+})
+
 import LayoutShapeSquare from "./LayoutShapeSquare.vue"
 
 import { getShapeSquareCss } from "../helpers/getShapeSquareCss"
 import { debugFrame } from "../layout/debugFrame.js"
-import { type LayoutFrame } from "../types/index.js"
+import { type LayoutFrameProps } from "../types/index.js"
 
 
 const emit = defineEmits<{
@@ -40,8 +42,6 @@ const emit = defineEmits<{
 	(e: "focus"): void
 }>()
 
-/* const props =  */defineProps({
-	frame: { type: Object as PropType<LayoutFrame>, required: true },
-	isActiveFrame: { type: Boolean, required: true },
-})
+/* const props =  */defineProps<LayoutFrameProps>(
+)
 </script>

package/src/runtime/components/LayoutShapeSquare.vue

@@ -15,7 +15,7 @@
 		left-[var(--posX)]
 	`,
 		css.translate && `[transform:var(--translate)]`,
-		$attrs.class as any
+		($attrs as any).class
 	)"
 	v-bind="{...$attrs, class: undefined}"
 >
@@ -24,15 +24,14 @@
 </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"
+import type { LayoutShapeSquareProps } from "../types/index.js"
 const $attrs = useAttrs()
 
-
-const props = defineProps({
-	style: { type: String, required: false, default: "" },
-	css: { type: Object as PropType<BaseSquareCss>, required: true },
+defineOptions({
+	inheritAttrs: false,
 })
+
+const props = defineProps<LayoutShapeSquareProps>()
 </script>

package/src/runtime/components/LayoutWindow.vue

@@ -7,17 +7,17 @@
 	`,
 		isDragging && `dragging cursor-pointer`,
 		requestType && `request-${requestType}`,
-		$attrs.attrs.class
+		($attrs as any).class
 	)"
 	ref="windowEl"
-	v-bind="{...$attrs.attrs, class: undefined}"
+	v-bind="{...$attrs, class: undefined}"
 >
 	<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="$attrs.frameAttrs"
+			v-bind="frameProps"
 			@focus="windowSetActiveFrame(win, frame.id)"
 		>
 			<slot :name="`frame-${frame.id}`" v-bind="{frame}"/>
@@ -29,14 +29,13 @@
 			:intersections="intersections"
 			:dragging-edge="draggingEdges.length === 1 ? draggingEdges[0] : undefined"
 			:dragging-intersection="draggingIntersection"
-			v-bind="$attrs.edgesAttrs"
+			v-bind="edgesProps"
 			@drag-start="dragStart"
 		/>
 		<LayoutDecosComponent
 			:frames="frames"
 			:split-decos="splitDecos"
 			:close-decos="closeDecos"
-			v-bind="$attrs.decosAttrs"
 		/>
 		<slot name="extra-decos"/>
 	</template>
@@ -45,7 +44,6 @@
 			<span
 				class="
 					after:content-['┃']
-					after:text-accent-500
 					last:after:content-none
 					after:mx-1
 					after:text-gray-500
@@ -60,10 +58,10 @@
 </div>
 </template>
 <script lang="ts" setup>
-import { useDivideAttrs } from "@witchcraft/ui/composables/useDivideAttrs"
 import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalResizeObserver"
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { computed, ref,watch } from "vue"
+import { computed, ref,useAttrs,watch } from "vue"
+import { type HTMLAttributes } from "vue"
 
 import LayoutDecosComponent from "./LayoutDecos.vue"
 import LayoutEdgesComponent from "./LayoutEdges.vue"
@@ -76,10 +74,10 @@ import { SplitAction } from "../drag/SplitAction.js"
 import { type DragState, type IDragAction } from "../drag/types.js"
 import { updateWindowWithEvent } from "../helpers/updateWindowSizeWithEvent.js"
 import { windowSetActiveFrame } from "../layout/windowSetActiveFrame.js"
-import { type CloseDeco, type LayoutWindow, type SplitDeco } from "../types/index.js"
+import { type CloseDeco, type LayoutEdgesProps, type LayoutFrameProps, type LayoutWindow, type SplitDeco } from "../types/index.js"
 
-const $attrs = useDivideAttrs(["frame", "edges", "decos"] as const)
 
+const $attrs = useAttrs()
 const win = defineModel<LayoutWindow>("win", { required: true })
 
 const props = withDefaults(defineProps<{
@@ -96,13 +94,15 @@ 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">>
 }>(), {
 	additionalDragActions: () => ([]),
 	splitKeyHandler: undefined,
 	closeKeyHandler: undefined,
 	usageInstructions: () => ({ }),
 	instructionTeleportTo: undefined,
-	allowWindowSizeUpdate: true
+	allowWindowSizeUpdate: true,
 })
 const emit = defineEmits<{
 	(e: "isShowingDrag", value: boolean): void

package/src/runtime/demo/App.vue

@@ -60,7 +60,7 @@
 import { keys } from "@alanscodelog/utils/keys"
 // playground not resolving???
 // todo this breaks the non-playground build
-import WRoot from "@witchcraft/ui/components/LibRoot"
+import WRoot from "@witchcraft/ui/components/WRoot"
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
 import { computed, onBeforeMount, ref } from "vue"
 

package/src/runtime/demo/DemoControls.vue

@@ -6,7 +6,7 @@
 </div>
 </template>
 <script lang="ts" setup>
-import WDarkModeSwitcher from "@witchcraft/ui/components/LibDarkModeSwitcher"
+import WDarkModeSwitcher from "@witchcraft/ui/components/WDarkModeSwitcher"
 
 import type { LayoutFrame } from "../types/index.js"
 

package/src/runtime/types/index.ts

@@ -4,6 +4,8 @@ import { z } from "zod"
 
 export * from "../drag/types.js"
 
+import type { HTMLAttributes, StyleValue } from "vue"
+
 import { getMaxInt } from "../settings.js"
 
 export const zUuid = z.uuid()
@@ -234,11 +236,9 @@ export const LAYOUT_ERROR = enumFromArray([
 
 export type LayoutError = EnumLike<typeof LAYOUT_ERROR>
 
-export type AllErrors = LayoutError
-
-export type ErrorInfo<T extends AllErrors> = AllErrorsInfo[T] extends undefined ? never : AllErrorsInfo[T]
+export type LayoutErrorInfo<T extends LayoutError> = LayoutErrorsInfo[T] extends undefined ? never : LayoutErrorsInfo[T]
 
-type AllErrorsInfo = {
+export type LayoutErrorsInfo = {
 	[LAYOUT_ERROR.INVALID_ID]: {
 		id: string | undefined
 	}
@@ -291,3 +291,33 @@ export const zFrameCreate = zLayoutFrame.partial({
 	width: true,
 	height: true
 })
+
+
+export type LayoutShapeSquareProps
+	= & {
+		css: BaseSquareCss
+		style?: StyleValue
+	}
+	& /** @vue-ignore */ Omit<HTMLAttributes, "class" | "onFocus"> & { class?: string }
+
+
+export type LayoutEdgesProps
+	= & {
+		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
+	}
+	& Partial<LayoutShapeSquareProps>
+
+
+export type LayoutFrameProps
+	= & {
+		frame: LayoutFrame
+		isActiveFrame: boolean
+	}
+	& Partial<LayoutShapeSquareProps>

package/src/runtime/utils/KnownError.ts

@@ -1,12 +1,12 @@
-import type { AllErrors, ErrorInfo } from "../types/index.js"
+import type { LayoutError, LayoutErrorInfo } from "../types/index.js"
 
 /**
  * Creates a known error that extends the base Error with some extra information.
  * All the variables used to create the error message are stored in it's info property so we can easily re-craft error messages for users.
  */
 export class KnownError<
-	T extends AllErrors = AllErrors,
-	TInfo extends ErrorInfo<T> = ErrorInfo<T>
+	T extends LayoutError = LayoutError,
+	TInfo extends LayoutErrorInfo<T> = LayoutErrorInfo<T>
 > extends Error {
 	code: T