@owdproject/nuxt 0.0.0-stage → 4.0.0-alpha.3

package/dist/runtime/components/window/DesktopCoreWindow.vue

@@ -0,0 +1,403 @@
+<script setup>
+import { ref, provide, onMounted, computed, watch } from "vue";
+import { useAppConfig } from "#imports";
+import { useDraggable, useEventListener } from "@vueuse/core";
+import { handleWindowControllerProps } from "../../utils/utilWindowControllerAdapter";
+import { useDesktopWorkspaceStore } from "../../stores/storeDesktopWorkspace";
+import { useDesktopWorkspaceEdgeDrop } from "../../composables/workspace/useDesktopWorkspaceEdgeDrop";
+import { useDesktopWindowSnapDrop } from "../../composables/window/useDesktopWindowSnapDrop";
+import { useDesktopWindow } from "../../composables/window/useDesktopWindow";
+const props = defineProps({
+  window: { type: null, required: false },
+  content: { type: null, required: false }
+});
+const desktopWorkspaceStore = useDesktopWorkspaceStore();
+const { topMaximizedWindow } = useDesktopWindow();
+const { beginWindowDrag, endWindowDrag } = useDesktopWorkspaceEdgeDrop();
+const { beginWindowSnapDrag, endWindowSnapDrag } = useDesktopWindowSnapDrop();
+const emit = defineEmits([
+  "resize:start",
+  "resize:move",
+  "resize:end",
+  "drag:start",
+  "drag:move",
+  "drag:end",
+  "close",
+  "open",
+  "blur",
+  "focus",
+  "minimize",
+  "restore",
+  "maximize",
+  "unmaximize",
+  "toggle-maximize"
+]);
+const appConfig = useAppConfig();
+const windowController = handleWindowControllerProps(
+  props.window
+);
+const isHovered = ref(false);
+const isDragging = computed(() => !!windowController?.state?.dragging);
+const isResizing = computed(() => !!windowController?.state?.resizing);
+const isHibernated = computed(() => {
+  if (!windowController?.state) return false;
+  if (windowController.state.active === false) return true;
+  if (!desktopWorkspaceStore.overview) {
+    const winWorkspace = windowController.state.workspace;
+    if (winWorkspace && winWorkspace !== desktopWorkspaceStore.active) {
+      return true;
+    }
+    const topMax = topMaximizedWindow.value;
+    if (topMax && topMax.state.id !== windowController.state.id && (topMax.position?.z ?? 0) > (windowController.position?.z ?? 0)) {
+      return true;
+    }
+  }
+  return false;
+});
+const showResizeHandles = computed(
+  () => Boolean(
+    windowController?.isResizable && !desktopWorkspaceStore.overview && !windowController?.state?.maximized && !isHibernated.value && (windowController?.state?.focused || isHovered.value || isResizing.value)
+  )
+);
+provide("windowController", windowController);
+provide("windowContent", props.content ?? {});
+provide("windowHibernated", isHibernated);
+const windowRef = ref(null);
+const dragHandleRef = ref(null);
+onMounted(() => {
+  if (windowController?.state?.focused) {
+    windowController.actions.bringToFront();
+  }
+  if (windowRef.value) {
+    dragHandleRef.value = windowRef.value.querySelector(".desktop-window-nav__draggable");
+  }
+});
+const { x, y } = useDraggable(windowRef, {
+  handle: dragHandleRef,
+  initialValue: {
+    x: windowController?.position?.x ?? 0,
+    y: windowController?.position?.y ?? 0
+  },
+  onStart(event) {
+    if (!windowController?.isDraggable || desktopWorkspaceStore.overview || windowController?.state?.maximized) {
+      return false;
+    }
+    onWindowPointerDown();
+    windowController?.startDrag();
+    beginWindowDrag(windowController.state.id);
+    beginWindowSnapDrag(
+      windowController.state.id,
+      desktopWorkspaceStore.workarea,
+      windowController.isMaximizable
+    );
+    emit("drag:start", event);
+  },
+  onMove(position, event) {
+    emit("drag:move", { left: position.x, top: position.y });
+  },
+  onEnd(position, event) {
+    windowController?.stopDrag();
+    if (!desktopWorkspaceStore.overview) {
+      const snapped = endWindowSnapDrag(windowController);
+      if (!snapped) {
+        const moved = endWindowDrag(windowController);
+        if (!moved) {
+          windowController?.actions?.setPosition({
+            x: position.x,
+            y: position.y
+          });
+          if (windowController.state.layout && windowController.state.layout !== "normal") {
+            windowController.actions.clearLayout();
+          }
+        }
+      }
+    } else {
+      windowController?.actions?.setPosition({
+        x: position.x,
+        y: position.y
+      });
+    }
+    emit("drag:end", { left: position.x, top: position.y });
+  }
+});
+watch(
+  () => [
+    windowController?.state?.position?.x ?? windowController?.position?.x,
+    windowController?.state?.position?.y ?? windowController?.position?.y
+  ],
+  ([posX, posY]) => {
+    x.value = posX ?? 0;
+    y.value = posY ?? 0;
+  }
+);
+const width = ref(windowController?.size?.width ?? 300);
+const height = ref(windowController?.size?.height ?? 200);
+watch(
+  () => [
+    windowController?.state?.size?.width ?? windowController?.size?.width,
+    windowController?.state?.size?.height ?? windowController?.size?.height
+  ],
+  ([w, h]) => {
+    width.value = w ?? 300;
+    height.value = h ?? 200;
+  },
+  { immediate: true }
+);
+function onWindowPointerDown() {
+  windowController?.actions?.setActive(true);
+  windowController?.actions?.bringToFront();
+}
+function startResize(e, direction) {
+  if (!windowController) return;
+  e.stopPropagation();
+  e.preventDefault();
+  onWindowPointerDown();
+  windowController.startResize();
+  emit("resize:start", e);
+  const startX = e.clientX;
+  const startY = e.clientY;
+  const startWidth = windowRef.value ? windowRef.value.offsetWidth : windowController.size.width ?? 300;
+  const startHeight = windowRef.value ? windowRef.value.offsetHeight : windowController.size.height ?? 200;
+  const startLeft = windowController.position?.x ?? 0;
+  const startTop = windowController.position?.y ?? 0;
+  const minWidth = windowController.size.minWidth ?? 150;
+  const minHeight = windowController.size.minHeight ?? 150;
+  const maxWidth = windowController.size.maxWidth ?? Infinity;
+  const maxHeight = windowController.size.maxHeight ?? Infinity;
+  let currentLeft = startLeft;
+  let currentTop = startTop;
+  let currentWidth = startWidth;
+  let currentHeight = startHeight;
+  const cleanupMove = useEventListener(window, "pointermove", (event) => {
+    const deltaX = event.clientX - startX;
+    const deltaY = event.clientY - startY;
+    let nextWidth = startWidth;
+    let nextHeight = startHeight;
+    let nextLeft = startLeft;
+    let nextTop = startTop;
+    if (direction.includes("e")) {
+      nextWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + deltaX));
+    }
+    if (direction.includes("w")) {
+      const proposedWidth = startWidth - deltaX;
+      nextWidth = Math.max(minWidth, Math.min(maxWidth, proposedWidth));
+      if (proposedWidth >= minWidth && proposedWidth <= maxWidth) {
+        nextLeft = startLeft + deltaX;
+      }
+    }
+    if (direction.includes("s")) {
+      nextHeight = Math.max(minHeight, Math.min(maxHeight, startHeight + deltaY));
+    }
+    if (direction.includes("n")) {
+      const proposedHeight = startHeight - deltaY;
+      nextHeight = Math.max(minHeight, Math.min(maxHeight, proposedHeight));
+      if (proposedHeight >= minHeight && proposedHeight <= maxHeight) {
+        nextTop = startTop + deltaY;
+      }
+    }
+    currentLeft = nextLeft;
+    currentTop = nextTop;
+    currentWidth = nextWidth;
+    currentHeight = nextHeight;
+    x.value = nextLeft;
+    y.value = nextTop;
+    width.value = nextWidth;
+    height.value = nextHeight;
+    emit("resize:move", { left: nextLeft, top: nextTop, width: nextWidth, height: nextHeight });
+  });
+  const cleanupUp = useEventListener(window, "pointerup", (event) => {
+    cleanupMove();
+    cleanupUp();
+    windowController.actions.setPosition({
+      x: currentLeft,
+      y: currentTop
+    });
+    windowController.actions.setSize({
+      width: currentWidth,
+      height: currentHeight
+    });
+    windowController.stopResize();
+    emit("resize:end", { left: currentLeft, top: currentTop, width: currentWidth, height: currentHeight });
+  });
+}
+const classes = computed(() => {
+  const list = ["desktop-window", "resizable-component"];
+  if (windowController?.state.focused) {
+    list.push("desktop-window--focused");
+  }
+  if (isDragging.value) {
+    list.push("desktop-window--dragging");
+  }
+  if (isResizing.value) {
+    list.push("desktop-window--resizing");
+  }
+  if (isHibernated.value) {
+    list.push("desktop-window--hibernated");
+  }
+  return list;
+});
+function onOverviewNativeDragStart(e) {
+  if (!desktopWorkspaceStore.overview || !windowController) return;
+  e.stopPropagation();
+  e.dataTransfer?.setData("text/plain", windowController.state.id);
+  e.dataTransfer.effectAllowed = "move";
+  try {
+    const img = new Image();
+    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+    e.dataTransfer?.setDragImage(img, 0, 0);
+  } catch {
+  }
+}
+const windowPositionMode = computed(
+  () => appConfig.desktop?.windows?.position ?? "fixed"
+);
+</script>
+
+<template>
+  <div
+    ref="windowRef"
+    :class="classes"
+    :style="{
+  left: `${x}px`,
+  top: `${y}px`,
+  width: typeof width === 'number' ? `${width}px` : width,
+  height: typeof height === 'number' ? `${height}px` : height,
+  zIndex: windowController?.position?.z,
+  position: windowPositionMode
+}"
+    :draggable="desktopWorkspaceStore.overview"
+    :aria-hidden="isHibernated ? 'true' : void 0"
+    @pointerenter="isHovered = true"
+    @pointerleave="isHovered = false"
+    @pointerdown="onWindowPointerDown"
+    @dragstart="onOverviewNativeDragStart"
+  >
+    <!-- 8-way Lazy Resize Handles (mounted only when focused, hovered, or resizing) -->
+    <div v-if="showResizeHandles" class="window-resize-handles">
+      <div class="resize-handle handle-t" @pointerdown.stop.prevent="startResize($event, 't')"></div>
+      <div class="resize-handle handle-b" @pointerdown.stop.prevent="startResize($event, 'b')"></div>
+      <div class="resize-handle handle-r" @pointerdown.stop.prevent="startResize($event, 'r')"></div>
+      <div class="resize-handle handle-l" @pointerdown.stop.prevent="startResize($event, 'l')"></div>
+      <div class="resize-handle handle-tl" @pointerdown.stop.prevent="startResize($event, 'tl')"></div>
+      <div class="resize-handle handle-tr" @pointerdown.stop.prevent="startResize($event, 'tr')"></div>
+      <div class="resize-handle handle-bl" @pointerdown.stop.prevent="startResize($event, 'bl')"></div>
+      <div class="resize-handle handle-br" @pointerdown.stop.prevent="startResize($event, 'br')"></div>
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.desktop-window {
+  position: v-bind("windowPositionMode");
+  box-sizing: border-box;
+  /* Native CSS Containment: isolates layout, style, and paint calculations per window */
+  contain: layout paint style;
+  /* Relax paint containment on focused/hovered/resizing windows so -4px outer resize handles remain interactive */
+}
+.desktop-window--focused, .desktop-window--resizing, .desktop-window:hover {
+  contain: layout style;
+}
+.desktop-window--dragging, .desktop-window--resizing {
+  will-change: left, top, width, height;
+}
+.desktop-window--dragging :deep(.desktop-window__content), .desktop-window--resizing :deep(.desktop-window__content) {
+  pointer-events: none;
+}
+.desktop-window {
+  /* Window Hibernation / Occlusion Culling: skips layout & paint for minimized, off-workspace, or fully occluded windows */
+}
+.desktop-window--hibernated {
+  content-visibility: hidden;
+  pointer-events: none;
+}
+.desktop-window :deep(.desktop-window__content) {
+  overflow-y: auto;
+  height: 100%;
+  min-height: 0;
+  contain: layout paint style;
+  content-visibility: auto;
+}
+
+.window-resize-handles {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+.resize-handle {
+  position: absolute;
+  pointer-events: auto;
+}
+
+/* Borders */
+.handle-t {
+  top: -4px;
+  left: 4px;
+  right: 4px;
+  height: 8px;
+  cursor: ns-resize;
+}
+
+.handle-b {
+  bottom: -4px;
+  left: 4px;
+  right: 4px;
+  height: 8px;
+  cursor: ns-resize;
+}
+
+.handle-r {
+  right: -4px;
+  top: 4px;
+  bottom: 4px;
+  width: 8px;
+  cursor: ew-resize;
+}
+
+.handle-l {
+  left: -4px;
+  top: 4px;
+  bottom: 4px;
+  width: 8px;
+  cursor: ew-resize;
+}
+
+/* Angles */
+.handle-tl {
+  top: -4px;
+  left: -4px;
+  width: 8px;
+  height: 8px;
+  cursor: nwse-resize;
+}
+
+.handle-tr {
+  top: -4px;
+  right: -4px;
+  width: 8px;
+  height: 8px;
+  cursor: nesw-resize;
+}
+
+.handle-bl {
+  bottom: -4px;
+  left: -4px;
+  width: 8px;
+  height: 8px;
+  cursor: nesw-resize;
+}
+
+.handle-br {
+  bottom: -4px;
+  right: -4px;
+  width: 8px;
+  height: 8px;
+  cursor: nwse-resize;
+}
+</style>

package/dist/runtime/components/window/DesktopCoreWindow.vue.d.ts

@@ -0,0 +1,49 @@
+type __VLS_Props = {
+    window?: IWindowController;
+    content?: WindowContent;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    maximize: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
+    minimize: (...args: any[]) => void;
+    unmaximize: (...args: any[]) => void;
+    open: (...args: any[]) => void;
+    blur: (...args: any[]) => void;
+    close: (...args: any[]) => void;
+    "resize:start": (...args: any[]) => void;
+    "resize:move": (...args: any[]) => void;
+    "resize:end": (...args: any[]) => void;
+    "drag:start": (...args: any[]) => void;
+    "drag:move": (...args: any[]) => void;
+    "drag:end": (...args: any[]) => void;
+    restore: (...args: any[]) => void;
+    "toggle-maximize": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMaximize?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onMinimize?: ((...args: any[]) => any) | undefined;
+    onUnmaximize?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onResize:start"?: ((...args: any[]) => any) | undefined;
+    "onResize:move"?: ((...args: any[]) => any) | undefined;
+    "onResize:end"?: ((...args: any[]) => any) | undefined;
+    "onDrag:start"?: ((...args: any[]) => any) | undefined;
+    "onDrag:move"?: ((...args: any[]) => any) | undefined;
+    "onDrag:end"?: ((...args: any[]) => any) | undefined;
+    onRestore?: ((...args: any[]) => any) | undefined;
+    "onToggle-maximize"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/window/DesktopCoreWindowContent.d.vue.ts

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

package/dist/runtime/components/window/DesktopCoreWindowContent.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { inject, computed } from "vue";
+const windowContent = inject("windowContent");
+const windowHibernated = inject("windowHibernated", void 0);
+const classes = computed(() => {
+  const list = ["desktop-window__content"];
+  if (windowContent?.centered) {
+    list.push("desktop-window__content--centered");
+  }
+  if (windowContent?.padded) {
+    list.push("desktop-window__content--padded");
+  }
+  if (windowHibernated?.value) {
+    list.push("desktop-window__content--hibernated");
+  }
+  return list;
+});
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.desktop-window__content {
+  contain: layout paint style;
+  content-visibility: auto;
+}
+.desktop-window__content--hibernated {
+  content-visibility: hidden;
+}
+</style>

package/dist/runtime/components/window/DesktopCoreWindowContent.vue.d.ts

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

package/dist/runtime/components/window/DesktopCoreWindowNav.d.vue.ts

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

package/dist/runtime/components/window/DesktopCoreWindowNav.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { inject } from "vue";
+import { computed } from "@vue/reactivity";
+const windowController = inject("windowController");
+const classes = computed(() => {
+  const list = ["desktop-window-nav"];
+  if (typeof windowController?.state.active === "undefined" || !!windowController?.state.active) {
+    list.push("desktop-window-nav--active");
+  }
+  if (windowController?.state.focused) {
+    list.push("desktop-window-nav--focused");
+  }
+  return list;
+});
+</script>
+
+<template>
+  <div :class="classes">
+    <div class="desktop-window-nav__draggable" />
+
+    <slot />
+  </div>
+</template>
+
+<style>
+/**
+ * Title/icon sit above the drag layer in DOM order; use pointer-events so
+ * mousedown reaches `.desktop-window-nav__draggable` for vue-resizable. Window
+ * controls stay clickable.
+ */
+.desktop-window-nav {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-height: 0;
+}
+.desktop-window-nav__draggable {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+.desktop-window-nav > :not(.desktop-window-nav__draggable) {
+  position: relative;
+  z-index: 2;
+  pointer-events: none;
+}
+.desktop-window-nav > .desktop-window-nav__btn-group {
+  pointer-events: auto;
+}
+.desktop-window-nav > .desktop-window-nav__interactive {
+  pointer-events: auto;
+}
+</style>

package/dist/runtime/components/window/DesktopCoreWindowNav.vue.d.ts

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

package/dist/runtime/components/window/DesktopCoreWindowSnapHintsBase.d.vue.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    enabled?: boolean;
+};
+declare var __VLS_1: {
+    zone: any;
+    rect: import("@owdproject/core").WindowBounds | null;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/window/DesktopCoreWindowSnapHintsBase.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from "vue";
+import { useDesktopWorkspaceStore } from "../../stores/storeDesktopWorkspace";
+import { useDesktopWindowSnapDrop } from "../../composables/window/useDesktopWindowSnapDrop";
+const props = defineProps({
+  enabled: { type: Boolean, required: false }
+});
+const desktopWorkspaceStore = useDesktopWorkspaceStore();
+const { snapHint, snapHintRect, isSnapDragActive } = useDesktopWindowSnapDrop();
+const visible = computed(
+  () => props.enabled !== false && !desktopWorkspaceStore.overview && isSnapDragActive.value && snapHint.value !== null && snapHintRect.value !== null
+);
+const hintStyle = computed(() => {
+  const rect = snapHintRect.value;
+  if (!rect) return void 0;
+  return {
+    left: `${rect.x}px`,
+    top: `${rect.y}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`
+  };
+});
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    class="desktop-window-snap-hints"
+    aria-hidden="true"
+  >
+    <div
+      class="desktop-window-snap-hints__zone"
+      :class="`desktop-window-snap-hints__zone--${snapHint}`"
+      :style="hintStyle"
+    >
+      <slot
+        :zone="snapHint"
+        :rect="snapHintRect"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.desktop-window-snap-hints{inset:0;pointer-events:none;position:fixed;z-index:999998}.desktop-window-snap-hints__zone{background:rgba(96,165,250,.18);border:2px solid rgba(96,165,250,.85);border-radius:4px;box-sizing:border-box;position:fixed;transition:left 80ms ease,top 80ms ease,width 80ms ease,height 80ms ease}
+</style>

package/dist/runtime/components/window/DesktopCoreWindowSnapHintsBase.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    enabled?: boolean;
+};
+declare var __VLS_1: {
+    zone: any;
+    rect: import("@owdproject/core").WindowBounds | null;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};