@witchcraft/layout 0.3.0 → 0.4.0

package/dist/runtime/composables/useFrames.js

@@ -47,6 +47,7 @@ export function useFrames(win, handler) {
   const intersections = computed(() => getIntersections(visualEdges.value));
   const debounceGetDraggableEdges = debounce((f) => {
     visualEdges.value = getVisualEdges(f, { includeWindowEdges: true });
+    handler.annotateEdges?.(visualEdges.value, f);
   }, 50, {});
   watch([isDragging, frames], () => {
     if (isDragging.value) return;
@@ -55,6 +56,7 @@ export function useFrames(win, handler) {
   debounceGetDraggableEdges(Object.values(frames.value));
   function forceRecalculateEdges() {
     visualEdges.value = getVisualEdges(Object.values(frames.value), { includeWindowEdges: true });
+    handler.annotateEdges?.(visualEdges.value, Object.values(frames.value));
   }
   const dragDirStore = new DragDirectionStore({
     onUpdate: (dir) => dragDirections.value = dir

package/dist/runtime/demo/App.vue

@@ -12,6 +12,7 @@
 		:win="win"
 		:dragActionHandler="dragActionHandler"
 	/>
+
 	<LayoutWindow
 		ref="layoutComponent"
 		v-if="win"
@@ -19,25 +20,11 @@
   `
 			flex-1
 			w-full
+			self-stretch
 			border-1
 			border-neutral-300
 			dark:border-neutral-700
 			rounded-md
-			self-stretch
-			[&_.frame]:flex
-			[&_.frame]:flex-col
-			[&_.frame]:outline-hidden
-			[&_.active-frame-edge]:rounded-md
-			[&_.active-frame-edge]:border-none
-			[&_.drag-edge:hover+.edge]:bg-accent-500/20
-			[&_.grabbed-edge]:bg-accent-500
-			[&.request-split_.grabbed-edge]:hidden
-			[&.request-split_.drag-edge]:hidden
-			[&.deco-split-error]:rounded-md
-			[&_.deco-split-new-frame]:rounded-md
-			[&_.deco-close-frame]:rounded-md
-			[&_.deco-close-frame-force]:rounded-md
-			[&_.deco-frame-drag]:rounded-md
 		`,
   collapsedDocks.top && `border-t-2 border-t-green-500`,
   collapsedDocks.bottom && `border-b-2 border-b-green-500`,
@@ -50,60 +37,110 @@
 		@is-showing-drag="isShowingDrag = $event"
 		@drag-state="dragState = $event"
 	>
-		<template #[`frame-${f.id}`] v-for="f in frames" :key="f.id" >
-			<div
-				v-if="!(f.collapsed && (f.width === 0 || f.height === 0))"
-				:data-is-active="win.activeFrame === f.id"
-				:class="twMerge(
+			<LayoutFrame class="
+				flex
+				flex-col
+				outline-hidden
+			">
+				<template #[`frame-${f.id}`] v-for="f in frames" :key="f.id" >
+					<div
+						v-if="!(f.collapsed && (f.width === 0 || f.height === 0))"
+						:data-is-active="win.activeFrame === f.id"
+						:class="twMerge(
   `
-					border-2
-					border-neutral-500
-					h-full
-					rounded-md
-					overflow-auto
-				`,
+							border-2
+							border-neutral-500
+							h-full
+							rounded-md
+							overflow-auto
+						`,
   win.activeFrame === f.id && `border-blue-500`
 )"
-				@click="win.activeFrame = f.id"
-			>
-				<!--
-					Avoid placing the padding on the first div in the frame.
-					Set it on the first child instead, so that the frame can shrink as small as possible.
-					Too big a border can also be a problem, but usually it's small enough that it's beneath the min frame width/height allowed.
-				-->
-				<div class="p-2 flex flex-col">
-					<FrameDragHandle :frame-id="f.id">
-						<div
-							class="cursor-grab bg-neutral-200 dark:bg-neutral-700 px-2 py-1 text-xs select-none"
-						>
-							⠿ Drag to move frame
+						@click="win.activeFrame = f.id"
+					>
+						<!--
+							Avoid placing the padding on the first div in the frame.
+							Set it on the first child instead, so that the frame can shrink as small as possible.
+							Too big a border can also be a problem, but usually it's small enough that it's beneath the min frame width/height allowed.
+						-->
+						<div class="p-2 flex flex-col">
+							<FrameDragHandle :frame-id="f.id">
+								<div
+									class="cursor-grab bg-neutral-200 dark:bg-neutral-700 px-2 py-1 text-xs select-none"
+								>
+									⠿ Drag to move frame
+								</div>
+							</FrameDragHandle>
+							<div class="flex gap-1 px-2 py-1 flex-wrap">
+								<button
+									v-if="f.docked && !f.collapsed"
+									class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
+									@click="handleUndock(f.id)"
+								>Undock</button>
+								<button
+									v-if="f.docked && !f.collapsed"
+									class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
+									@click="handleCollapse(f.id)"
+								>Collapse</button>
+								<button
+									v-if="f.docked && f.collapsed"
+									class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
+									@click="handleUncollapse(f.id)"
+								>Uncollapse</button>
+							</div>
+							<div class="p-2 whitespace-pre-wrap">
+								{{ debugFrame(f) }}
+							</div>
 						</div>
-					</FrameDragHandle>
-					<div class="flex gap-1 px-2 py-1 flex-wrap">
-						<button
-							v-if="f.docked && !f.collapsed"
-							class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
-							@click="handleUndock(f.id)"
-						>Undock</button>
-						<button
-							v-if="f.docked && !f.collapsed"
-							class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
-							@click="handleCollapse(f.id)"
-						>Collapse</button>
-						<button
-							v-if="f.docked && typeof f.collapsed === 'number'"
-							class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
-							@click="handleUncollapse(f.id)"
-						>Uncollapse</button>
 					</div>
-					<div class="p-2 whitespace-pre-wrap">
-						{{ debugFrame(f) }}
+					<div v-else>
 					</div>
-				</div>
-			</div>
-			<div v-else>
-			</div>
-		</template>
+				</template>
+			</LayoutFrame>
+			<LayoutEdgesActiveFrame class="rounded-md border-none"/>
+			<!-- Following slot usage is just done as an example for how to override the slots and further customize the components. You could place classes on the parent LayoutWindow instead or if you don't need to customize anything you can just do:
+			<LayoutIntersections/>
+			...
+			<LayoutDragEdges/>
+			-->
+			<LayoutDragEdges>
+				<template #handle="slotProps">
+					<LayoutDragEdgeHandle
+						class="..."
+						v-bind="slotProps"
+					/>
+				</template>
+				<template #indicator="slotProps">
+					<LayoutDragEdgeVisible
+						class="..."
+						v-bind="slotProps"
+					/>
+				</template>
+			</LayoutDragEdges>
+			<LayoutDecosEdges/>
+			<!-- Decos add only the most basic color indicators (which you can override, we also pretty them up here with from rounded edges. -->
+			<LayoutDecosRects class="
+				[&.deco-split-error]:rounded-md
+				[&.deco-split-new-frame]:rounded-md
+				[&.deco-close-frame]:rounded-md
+				[&.deco-close-frame-force]:rounded-md
+				[&.deco-frame-drag]:rounded-md
+			"/>
+			<LayoutDragEdgeGrabbed class="bg-accent-500"/>
+			<LayoutIntersections>
+				<template #handler="slotProps">
+					<LayoutIntersectionHandle
+						class="..."
+						v-bind="slotProps"
+					/>
+				</template>
+				<template #indicator="slotProps">
+					<LayoutIntersectionVisible
+						class="..."
+						v-bind="slotProps"
+					/>
+				</template>
+			</LayoutIntersections>
 	</LayoutWindow>
 </WRoot>
 </template>
@@ -116,7 +153,14 @@ import { computed, onBeforeMount, ref } from "vue";
 import DemoControls from "./DemoControls.vue";
 import { app } from "./sharedLayoutInstance.js";
 import FrameDragHandle from "../components/FrameDragHandle.vue";
-import LayoutWindow from "../components/LayoutWindow.vue";
+import LayoutFrame from "../components/LayoutFrame.vue";
+import LayoutDecosEdges from "../components/LayoutDecosEdges.vue";
+import LayoutDecosRects from "../components/LayoutDecosRects.vue";
+import LayoutDragEdgeGrabbed from "../components/LayoutDragEdgeGrabbed.vue";
+import LayoutIntersections from "../components/LayoutIntersections.vue";
+import LayoutEdgesActiveFrame from "../components/LayoutEdgesActiveFrame.vue";
+import LayoutDragEdges from "../components/LayoutDragEdges.vue";
+import LayoutIntersectionHandle from "../components/LayoutIntersectionHandle.vue";
 import { applyFrameChanges } from "../layout/applyFrameChanges.js";
 import { debugFrame } from "../layout/debugFrame.js";
 import { getFrameCollapseInfo } from "../layout/getFrameCollapseInfo.js";
@@ -132,9 +176,13 @@ import { settings } from "../settings.js";
 import { throwIfError } from "@alanscodelog/utils/throwIfError";
 import { useTemplateRef } from "vue";
 import { DragActionHandler } from "../drag/DragActionHandler.js";
+import LayoutDragEdgeHandle from "../components/LayoutDragEdgeHandle.vue";
+import LayoutDragEdgeVisible from "../components/LayoutDragEdgeVisible.vue";
+import LayoutIntersectionVisible from "../components/LayoutIntersectionVisible.vue";
+import LayoutWindow from "../components/LayoutWindow.vue";
 const winId = ref(void 0);
 const win = computed(() => winId.value !== void 0 ? app.layout.windows[winId.value] : void 0);
-const layoutComponent = useTemplateRef("layoutComponent");
+const layoutComponent = ref(void 0);
 const frames = computed(() => {
   if (!win.value) return;
   return Object.values(win.value.frames);
@@ -185,15 +233,6 @@ function handleUncollapse(frameId) {
   applyFrameChanges(win.value, changes);
   DragActionHandler.debugState("uncollapse", "after", dragState.value, {}, void 0);
 }
-const textHints = computed(() => {
-  const isDragging = dragState.value?.isDragging;
-  const textHints2 = dragActionHandler.value?.textHints ?? { actions: [], errors: [] };
-  return [
-    ...!isDragging ? [{ classes: "", text: "Drag from an edge to create a new frame." }] : [],
-    ...textHints2.errors.map((_) => ({ classes: "text-red-500", text: _ })),
-    ...textHints2.actions.map((_) => ({ text: _ }))
-  ];
-});
 const collapsedDocks = computed(() => {
   const sides = {};
   for (const frame of Object.values(win.value?.frames ?? {})) {
@@ -204,4 +243,13 @@ const collapsedDocks = computed(() => {
   return sides;
 });
 const dragActionHandler = computed(() => layoutComponent.value?.dragActionHandler);
+const textHints = computed(() => {
+  const isDragging = dragState.value?.isDragging;
+  const textHints2 = dragActionHandler.value?.textHints ?? { actions: [], errors: [] };
+  return [
+    ...!isDragging ? [{ classes: "", text: "Drag from an edge to create a new frame." }] : [],
+    ...textHints2.errors.map((_) => ({ classes: "text-red-500", text: _ })),
+    ...textHints2.actions.map((_) => ({ text: _ }))
+  ];
+});
 </script>

package/dist/runtime/demo/DemoControls.vue

@@ -9,7 +9,7 @@
 		</template>
 		<template #popover>
 			<div class="flex flex-col gap-2 rounded-md w-full`">
-				<label class="text-xs">Collapse Size (%):</label>
+				<label class="text-xs">Collapse Size (px):</label>
 				<input
 					type="number"
 					class="w-full min-w-0 border border-neutral-300 dark:border-neutral-700 rounded px-1 py-0.5 text-xs bg-neutral-100 dark:bg-neutral-800"
@@ -42,7 +42,9 @@
 import WDarkModeSwitcher from "@witchcraft/ui/components/WDarkModeSwitcher";
 import WButton from "@witchcraft/ui/components/WButton";
 import WPopover from "@witchcraft/ui/components/WPopover";
-import { copy } from "@witchcraft/ui/helpers";
+import WCheckbox from "@witchcraft/ui/components/WCheckbox";
+import WSimpleInput from "@witchcraft/ui/components/WSimpleInput";
+import { copyToClipboard } from "@alanscodelog/utils/copyToClipboard";
 import { ref, watch } from "vue";
 import { applyFrameChanges } from "../layout/applyFrameChanges.js";
 import { getFrameUncollapseInfo } from "../layout/getFrameUncollapseInfo.js";
@@ -56,9 +58,9 @@ const props = defineProps({
   dragActionHandler: { type: Object, required: false }
 });
 const showDevActions = ref(false);
-const collapseSizeValue = ref(Math.round(settings.collapseSizeScaled.width / settings.maxInt * 100));
+const collapseSizeValue = ref(settings.collapseSizePx.width);
 function handleCollapseSizeChange(value) {
-  settings.collapseSize = value;
+  settings.collapseSizePx = value;
   collapseSizeValue.value = value;
 }
 function uncollapseAll() {
@@ -95,7 +97,7 @@ function copyState() {
     }
   }
   const state = JSON.stringify(clone, null, 2);
-  copy(state);
+  copyToClipboard(state);
 }
 const debugKey = ref(import.meta.dev ? "state.win.frames" : "false");
 watch(debugKey, () => {

package/dist/runtime/demo/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@witchcraft/layout Vue Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/dist/runtime/demo/tailwind.css

@@ -1 +1 @@
-@import "tailwindcss";@import "../../../playground/.nuxt/witchcraft-ui.css";@import "../../../playground/.nuxt/witchcraft-layout.css";
+@import "tailwindcss";@import "../../../playground/.nuxt/witchcraft-ui.css";@import "../../../playground/.nuxt/witchcraft-layout.css";@source "../../../src/runtime/demo";

package/dist/runtime/drag/CloseAction.d.ts

@@ -1,6 +1,5 @@
-import type { ActionDragChangeResult, DragState, IDragAction } from "./types.js";
 import { getCloseFrameInfo } from "../layout/getCloseFrameInfo.js";
-import type { CloseDeco } from "../types/index.js";
+import type { ActionDragChangeResult, CloseDeco, DragState, IDragAction } from "../types/index.js";
 import type { KnownError } from "../utils/KnownError.js";
 export type CloseInfo = Exclude<ReturnType<typeof getCloseFrameInfo>, KnownError>;
 export declare class CloseAction implements IDragAction {

package/dist/runtime/drag/CloseAction.js

@@ -53,7 +53,7 @@ export class CloseAction {
         force,
         shapes: [
           {
-            type: "square",
+            type: "rect",
             data: { x: _.x, y: _.y, width: _.width, height: _.height },
             attrs: {
               class: force ? `deco-close-force-frame bg-orange-500/50` : `deco-close-frame bg-orange-500/20`

package/dist/runtime/drag/DragActionHandler.d.ts

@@ -1,6 +1,5 @@
 import { type RecordFromArray } from "@alanscodelog/utils";
-import type { DragChangeHandler, DragChangeResult, DragState, IDragAction } from "./types.js";
-import type { LayoutShape } from "../types/index.js";
+import type { DragChangeHandler, DragChangeResult, DragState, Edge, IDragAction, LayoutFrame, LayoutShape } from "../types/index.js";
 /**
  * Handles the lifecycle of a drag actions {@link IDragAction} and provides additional hooks.
  *
@@ -41,14 +40,17 @@ export declare class DragActionHandler<TRawDragActions extends IDragAction[], TD
      * Default onDragChange handler for when no action can handle the request.
      *
      * Should return true to allow the edges to be moved, or false to prevent it.
+     *
+     * The default prevents movement when the edge is a window edge and when the edge is touching a collapsed frame.
      */
     defaultOnDragChange?: DragChangeHandler);
     eventHandler(e: KeyboardEvent | PointerEvent, state: DragState, forceRecalculateEdges: () => void): undefined;
     onDragChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: DragState, forceRecalculateEdges: () => void, cancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void): DragChangeResult;
     setTextHints(type: "start" | "move" | "end"): void;
+    annotateEdges(edges: Edge[], frames: LayoutFrame[]): void;
     onDragApply(state: DragState, forceRecalculateEdges: () => void): boolean;
     cancel(e: PointerEvent | KeyboardEvent | undefined, state: DragState): void;
     static debugState(pluginName: string, type: "before" | "after" | string, state: DragState, pluginState?: Record<string, any>, 
-    /** Object key to filter the state by, e.g. state.win.frames. If boolean is ignored. The idea is you pass this.debug and users can set this.debug to a string to filter. */
+    /** Object key to filter the state by, e.g. state.win.frames. If false is ignored. The idea is you pass this.debug and users can set this.debug to a string to filter. */
     key?: string | boolean): void;
 }

package/dist/runtime/drag/DragActionHandler.js

@@ -1,13 +1,25 @@
 import { get } from "@alanscodelog/utils";
+import { isWindowEdge } from "../helpers/isWindowEdge.js";
+import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js";
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
 export class DragActionHandler {
   activeAction;
   actions;
   eventCanceller = void 0;
   boundCancel;
-  defaultOnDragChange = (type, _e, state, _forceRecalculateEdges, _cancel) => ({
-    updateEdges: type === "move" ? !state.isDraggingFromWindowEdge : true,
-    shapes: []
-  });
+  defaultOnDragChange = (type, _e, state, _forceRecalculateEdges, _cancel) => {
+    const isTouchingCollapsedFrameEdge = type === "move" && state.isDragging === "edge" && state.touchingFramesArrays.some(
+      (frames) => (
+        // we check with a falsy check on PURPOSE, frames collapsed to 0 aren't an issue, they are ignored anyways
+        Object.values(frames).some((f) => f.collapsed)
+      )
+    );
+    return {
+      updateEdges: type === "move" ? !(state.isDraggingFromWindowEdge || isTouchingCollapsedFrameEdge) : true,
+      shapes: []
+    };
+  };
   hooks;
   /** All action shapes merged into a single array. If using vue you can set this to a reactive array for reactivity. */
   shapes = [];
@@ -84,6 +96,28 @@ export class DragActionHandler {
       this.textHints.errors.push(...res?.errors ?? []);
     }
   }
+  annotateEdges(edges, frames) {
+    for (const edge of edges) {
+      if (edge.error) continue;
+      for (const action of Object.values(this.actions)) {
+        action.annotateEdge?.(edge, frames);
+        if (edge.error) break;
+      }
+      if (!edge.error && !isWindowEdge(edge)) {
+        const touching = findFramesTouchingEdge(edge, frames);
+        if (touching) {
+          const collapsedFrame = touching.find((f) => f.frame.collapsed);
+          if (collapsedFrame) {
+            edge.error = new KnownError(
+              LAYOUT_ERROR.CANT_RESIZE_COLLAPSED_FRAME,
+              "Cannot Move: Can't Resize Collapsed Frame",
+              { frame: collapsedFrame.frame }
+            );
+          }
+        }
+      }
+    }
+  }
   onDragApply(state, forceRecalculateEdges) {
     if (this.activeAction) {
       const res = this.actions[this.activeAction].onDragApply(state, forceRecalculateEdges);
@@ -102,11 +136,11 @@ export class DragActionHandler {
     this.hooks.onEnd?.({ cancelled: true, applied: false });
   }
   static debugState(pluginName, type, state, pluginState = {}, key) {
+    if (key === false) return;
     let res = { state, pluginState };
-    let pickedRes = {};
     if (typeof key === "string" && key !== "") {
-      pickedRes = {};
       const paths = key.split(",").map((_) => _.trim()).filter((_) => _);
+      const pickedRes = {};
       for (const path of paths) {
         pickedRes[path] = get(res, path.split("."));
       }

package/dist/runtime/drag/FrameDragAction.js

@@ -58,23 +58,22 @@ export class FrameDragAction {
     return this.textHints;
   }
   getDecos(matchedZone, state, result) {
-    let decos = [];
     const isError = result instanceof Error;
     const frame = state.dragHoveredFrame;
     if (!matchedZone || !frame) {
-      decos = [];
-      this.modifyDecos(decos);
-      return decos;
+      const decos2 = [];
+      this.modifyDecos(decos2);
+      return decos2;
     }
     const clipPath = createZoneSideClipPath(matchedZone, settings.zoneSizes);
     const classes = isError ? `deco-frame-drag deco-frame-drag-error deco-frame-drag-${matchedZone.type}-${matchedZone.side} bg-red-500/50` : `deco-frame-drag deco-frame-drag-${matchedZone.type}-${matchedZone.side} bg-blue-500/50`;
-    decos = [{
+    const decos = [{
       id: frame.id,
       type: "drop",
       position: matchedZone.side ?? "center",
       shapes: [
         {
-          type: "square",
+          type: "rect",
           data: matchedZone,
           attrs: clipPath ? { class: classes, style: `clip-path:${clipPath}` } : { class: classes }
         }
@@ -105,7 +104,7 @@ export class FrameDragAction {
         this.state.lastReturn = getFrameSwapInfo(win, draggingFrameId, dragHoveredFrame.id);
         if (!(this.state.lastReturn instanceof Error)) this.state.lastReturn.info = "swap";
       }
-    } else if (matchedZone.type === "window") {
+    } else if (matchedZone.type === "window" && dragHoveredFrame && !dragHoveredFrame.docked) {
       this.state.lastReturn = getFrameDockInfo(win, draggingFrameId, matchedZone.side);
       if (!(this.state.lastReturn instanceof Error)) this.state.lastReturn.info = "dock";
     }

package/dist/runtime/drag/SplitAction.d.ts

@@ -1,6 +1,5 @@
-import type { ActionDragChangeResult, DragState, IDragAction } from "./types.js";
 import { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js";
-import type { Point, SplitDeco } from "../types/index.js";
+import type { ActionDragChangeResult, DragState, IDragAction, Point, SplitDeco } from "../types/index.js";
 import type { KnownError } from "../utils/KnownError.js";
 export type SplitInfo = Exclude<ReturnType<typeof getFrameSplitInfo>, KnownError>;
 export declare class SplitAction implements IDragAction {

package/dist/runtime/drag/SplitAction.js

@@ -129,7 +129,7 @@ export class SplitAction {
     if (!ok) {
       if (dragHoveredFrame && dragHoveredFrame.docked) {
         const errorDeco = {
-          type: "square",
+          type: "rect",
           data: {
             x: dragHoveredFrame.x,
             y: dragHoveredFrame.y,

package/dist/runtime/drag/createDefaultHandlers.d.ts

@@ -1,4 +1,4 @@
-import type { IDragAction } from "./types.js";
+import type { IDragAction } from "../types/index.js";
 /**
  * Creates the default drag actions (Split, Close, FrameDrag).
  */

package/dist/runtime/drag/defaultDragActions.d.ts

@@ -1,4 +1,4 @@
-import type { IDragAction } from "./types.js";
+import type { IDragAction } from "../types/index.js";
 /**
  * Creates the default drag actions (Split, Close, FrameDrag).
  */

package/dist/runtime/helpers/consoleDebugWindow.d.ts

@@ -0,0 +1,43 @@
+import type { LayoutWindow, Point, Size } from "../types/index.js";
+/**
+ * See also {@link createDebugLabeler} for customizing the labeling function, for
+ * example to debug the pixel sizes instead of position/size:
+ *
+ * ```ts
+ * consoleDebugWindow(clone, 50, createDebugLabeler({
+ * 	showPxSize: true,
+ * 	showSize: false,
+ * 	showPos: false,
+ * 	getWin: () => clone
+ * }))
+ *
+ * @experimental
+ */
+export declare function consoleDebugWindow(win: LayoutWindow, targetWidth?: number, labelFunc?: (f: LayoutWindow["frames"][string]) => string): void;
+type Border = {
+    horizontal: string;
+    vertical: string;
+    topLeft: string;
+    topRight: string;
+    bottomLeft: string;
+    bottomRight: string;
+    cross: string;
+    fill: string;
+    labelBg: string;
+};
+export declare function boxesToText<T extends Size & Point & {
+    id?: string;
+}>(boxes: T[], targetWidth?: number, { border, heightScale, labelFunc }?: {
+    border?: Partial<Border>;
+    heightScale?: number;
+    labelFunc?: (box: T) => string;
+}): string | Error;
+export declare function createDebugLabeler({ showPxSize, showCollapsed, showDocked, showSize, showPos, getWin }?: {
+    showPxSize?: boolean;
+    showCollapsed?: boolean;
+    showDocked?: boolean;
+    showSize?: boolean;
+    showPos?: boolean;
+    getWin?: (f: LayoutWindow["frames"][string]) => Pick<LayoutWindow, "pxWidth" | "pxHeight">;
+}): (f: LayoutWindow["frames"][string]) => string;
+export {};