@xleddyl/443-components-vue 0.10.2 → 0.11.0

package/dist/composables/useSortable.mjs

@@ -0,0 +1,215 @@
+import { nextTick, onScopeDispose, readonly, ref, toValue } from "vue";
+import { useLocale } from "./useLocale.mjs";
+import { useLiveMessage } from "../internal/core/live.mjs";
+import { isClient } from "../internal/core/env.mjs";
+import { SORTABLE_ATTR, insertionIndex, isRtl, sortableElements } from "../internal/data/sortable.mjs";
+const THRESHOLD = 4;
+const INTERACTIVE = "button, a[href], input, textarea, select, [contenteditable]";
+export function useSortable(container, options) {
+  const { t } = useLocale();
+  const live = useLiveMessage();
+  const dragging = ref(null);
+  let drag = null;
+  const axis = () => toValue(options.orientation) ?? "vertical";
+  const isDisabled = () => Boolean(toValue(options.disabled));
+  const list = () => toValue(options.items);
+  function movable(index) {
+    const item = list()[index];
+    if (item === void 0 || isDisabled()) return false;
+    return options.canMove ? options.canMove(item, index) : true;
+  }
+  function labelOf(item) {
+    return options.label ? options.label(item) : String(item);
+  }
+  function announceMove(move2) {
+    live.announce(
+      options.movedText ? options.movedText(move2) : t("sortable.moved", {
+        label: labelOf(move2.item),
+        position: move2.to + 1,
+        count: move2.items.length
+      })
+    );
+  }
+  function move(from, to, moveOptions = {}) {
+    const items = list();
+    const target = Math.max(0, Math.min(items.length - 1, to));
+    if (from === target || !movable(from)) return false;
+    const next = [...items];
+    const [item] = next.splice(from, 1);
+    next.splice(target, 0, item);
+    const entry = {
+      item,
+      from,
+      to: target,
+      items: next,
+      source: moveOptions.source ?? "api"
+    };
+    const focused = isClient() ? document.activeElement : null;
+    options.onMove(next, entry);
+    if (moveOptions.announce) announceMove(entry);
+    if (focused && focused !== document.body)
+      nextTick(() => {
+        if (focused.isConnected && document.activeElement !== focused)
+          focused.focus({ preventScroll: true });
+      });
+    return true;
+  }
+  function keyDelta(event) {
+    const rtl = isRtl(event.currentTarget);
+    switch (event.key) {
+      case "ArrowUp":
+        return -1;
+      case "ArrowDown":
+        return 1;
+      case "ArrowLeft":
+        return rtl ? 1 : -1;
+      case "ArrowRight":
+        return rtl ? -1 : 1;
+      case "Home":
+        return -Infinity;
+      case "End":
+        return Infinity;
+      default:
+        return 0;
+    }
+  }
+  function onKeydown(event, index) {
+    if (!event.altKey || event.ctrlKey || event.metaKey) return;
+    const delta = keyDelta(event);
+    if (!delta) return;
+    event.preventDefault();
+    const to = delta === -Infinity ? 0 : delta === Infinity ? list().length - 1 : index + delta;
+    move(index, to, { announce: true, source: "keyboard" });
+  }
+  function preventSelection(event) {
+    event.preventDefault();
+  }
+  function suppressClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  function listen(enable) {
+    if (enable) {
+      window.addEventListener("pointermove", onPointerMove);
+      window.addEventListener("pointerup", onPointerUp);
+      window.addEventListener("pointercancel", onPointerCancel);
+      window.addEventListener("keydown", onDragKeydown, true);
+      document.addEventListener("selectstart", preventSelection);
+      return;
+    }
+    window.removeEventListener("pointermove", onPointerMove);
+    window.removeEventListener("pointerup", onPointerUp);
+    window.removeEventListener("pointercancel", onPointerCancel);
+    window.removeEventListener("keydown", onDragKeydown, true);
+    document.removeEventListener("selectstart", preventSelection);
+  }
+  function follow(event) {
+    if (!drag) return;
+    const element = drag.element;
+    const current = element.style.translate.split(" ").map((value) => parseFloat(value) || 0);
+    const rect = element.getBoundingClientRect();
+    const layoutX = rect.left - (current[0] ?? 0);
+    const layoutY = rect.top - (current[1] ?? 0);
+    const x = event.clientX - drag.startX - (layoutX - drag.layoutX);
+    const y = event.clientY - drag.startY - (layoutY - drag.layoutY);
+    element.style.translate = `${x}px ${y}px`;
+  }
+  function onPointerDown(event, index) {
+    if (event.button !== 0 || !event.isPrimary || drag) return;
+    const element = event.currentTarget;
+    const target = event.target;
+    if (options.handle) {
+      if (!target.closest(options.handle)) return;
+    } else if (target !== element && target.closest(INTERACTIVE)) return;
+    if (!movable(index)) return;
+    const rect = element.getBoundingClientRect();
+    drag = {
+      pointerId: event.pointerId,
+      element,
+      origin: index,
+      index,
+      startX: event.clientX,
+      startY: event.clientY,
+      layoutX: rect.left,
+      layoutY: rect.top,
+      active: false
+    };
+    listen(true);
+  }
+  function onPointerMove(event) {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    if (!drag.active) {
+      if (Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < THRESHOLD)
+        return;
+      drag.active = true;
+      dragging.value = drag.index;
+      window.getSelection()?.removeAllRanges();
+    }
+    event.preventDefault();
+    const root = toValue(container);
+    const others = sortableElements(root).filter((element) => element !== drag.element);
+    const target = insertionIndex(others, event.clientX, event.clientY, axis(), isRtl(root));
+    if (target !== drag.index && move(drag.index, target, { source: "pointer" })) {
+      drag.index = target;
+      dragging.value = target;
+      nextTick(() => follow(event));
+    }
+    follow(event);
+  }
+  function finish(cancelled) {
+    const state = drag;
+    drag = null;
+    listen(false);
+    if (!state) return;
+    state.element.style.translate = "";
+    dragging.value = null;
+    if (!state.active) return;
+    window.addEventListener("click", suppressClick, { capture: true, once: true });
+    setTimeout(() => window.removeEventListener("click", suppressClick, { capture: true }), 0);
+    if (cancelled) {
+      if (state.index !== state.origin) move(state.index, state.origin, { source: "pointer" });
+      return;
+    }
+    if (state.index !== state.origin) {
+      const items = list();
+      const item = items[state.index];
+      announceMove({
+        item,
+        from: state.origin,
+        to: state.index,
+        items: [...items],
+        source: "pointer"
+      });
+    }
+  }
+  function onPointerUp(event) {
+    if (drag && event.pointerId === drag.pointerId) finish(false);
+  }
+  function onPointerCancel(event) {
+    if (drag && event.pointerId === drag.pointerId) finish(true);
+  }
+  function onDragKeydown(event) {
+    if (event.key !== "Escape" || !drag?.active) return;
+    event.preventDefault();
+    event.stopPropagation();
+    finish(true);
+  }
+  function itemProps(index) {
+    return {
+      [SORTABLE_ATTR]: index,
+      "aria-keyshortcuts": movable(index) ? "Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown Alt+Home Alt+End" : void 0,
+      onPointerdown: (event) => onPointerDown(event, index),
+      onKeydown: (event) => onKeydown(event, index)
+    };
+  }
+  onScopeDispose(() => {
+    if (drag) finish(true);
+  });
+  return {
+    dragging: readonly(dragging),
+    announcement: live.message,
+    itemProps,
+    move,
+    canMove: movable
+  };
+}

package/dist/grid/cells/BadgeCell.vue

@@ -1,11 +1,60 @@
 <template>
-   <template v-if="text">
-      <Badge v-if="params.variant" :class="badgeClass" :tone :variant="params.variant" :size>{{
-         text
-      }}</Badge>
-      <span v-else class="k-data-grid-badge" :class="[`k-data-grid-badge-${tone}`, badgeClass]">{{
-         text
-      }}</span>
+   <span
+      v-if="isList && entries.length"
+      class="k-data-grid-badges"
+      :class="{ 'is-wrap': params.wrap }"
+      :title="fullText"
+   >
+      <template v-for="entry in shown" :key="entry.key">
+         <Badge
+            v-if="params.variant"
+            :class="entry.badgeClass"
+            :tone="entry.tone"
+            :variant="params.variant"
+            :size
+            >{{ entry.text }}</Badge
+         >
+         <span
+            v-else
+            class="k-data-grid-badge"
+            :class="[`k-data-grid-badge-${entry.tone}`, entry.badgeClass]"
+            >{{ entry.text }}</span
+         >
+      </template>
+      <template v-if="hiddenCount > 0">
+         <Badge
+            v-if="params.variant"
+            class="k-data-grid-badge-more"
+            tone="neutral"
+            :variant="params.variant"
+            :size
+            aria-hidden="true"
+            >+{{ hiddenCount }}</Badge
+         >
+         <span
+            v-else
+            class="k-data-grid-badge k-data-grid-badge-neutral k-data-grid-badge-more"
+            aria-hidden="true"
+            >+{{ hiddenCount }}</span
+         >
+         <span class="k-visually-hidden">{{ moreText }}</span>
+      </template>
+   </span>
+   <template v-else-if="!isList && single">
+      <Badge
+         v-if="params.variant"
+         :class="single.badgeClass"
+         :tone="single.tone"
+         :variant="params.variant"
+         :size
+         >{{ single.text }}</Badge
+      >
+      <span
+         v-else
+         class="k-data-grid-badge"
+         :class="[`k-data-grid-badge-${single.tone}`, single.badgeClass]"
+         >{{ single.text }}</span
+      >
    </template>
    <EmptyCell v-else :context="cellContext" />
 </template>
@@ -13,22 +62,45 @@
 <script setup>
 import { computed } from "vue";
 import Badge from "../../components/data/Badge.vue";
+import { formatLocaleMessage } from "../../locale";
 import EmptyCell from "./EmptyCell.vue";
 const props = defineProps({
   params: { type: Object, required: true }
 });
-const key = computed(() => {
-  const raw = props.params.value;
-  return raw === null || raw === void 0 ? "" : String(raw);
-});
-const text = computed(() => key.value ? props.params.labels?.[key.value] ?? key.value : "");
-const tone = computed(
-  () => props.params.tones?.[key.value] ?? props.params.defaultTone ?? "neutral"
-);
+const cellContext = computed(() => props.params.context);
 const size = computed(() => props.params.size ?? "sm");
-const badgeClass = computed(() => {
+const isList = computed(() => Array.isArray(props.params.value));
+function keyOf(raw) {
+  return raw === null || raw === void 0 ? "" : String(raw);
+}
+function entryFor(raw, index) {
+  const key = keyOf(raw);
+  if (!key) return null;
   const source = props.params.badgeClass;
-  return typeof source === "function" ? source(props.params.value, props.params.data) : source;
+  return {
+    key: `${index}-${key}`,
+    text: props.params.labels?.[key] ?? key,
+    tone: props.params.tones?.[key] ?? props.params.defaultTone ?? "neutral",
+    badgeClass: typeof source === "function" ? source(raw, props.params.data) : source
+  };
+}
+const single = computed(() => isList.value ? null : entryFor(props.params.value, 0));
+const entries = computed(() => {
+  if (!isList.value) return [];
+  return props.params.value.map((raw, index) => entryFor(raw, index)).filter((entry) => entry !== null);
 });
-const cellContext = computed(() => props.params.context);
+const limit = computed(() => {
+  const max = props.params.max;
+  return max === void 0 || max < 1 ? entries.value.length : Math.floor(max);
+});
+const shown = computed(() => entries.value.slice(0, limit.value));
+const hiddenCount = computed(() => entries.value.length - shown.value.length);
+const fullText = computed(() => entries.value.map((entry) => entry.text).join(", "));
+const moreText = computed(
+  () => formatLocaleMessage(
+    cellContext.value?.locale ?? "en",
+    cellContext.value?.messages?.moreValues ?? "{count} more",
+    { count: hiddenCount.value }
+  )
+);
 </script>

package/dist/grid/cells/BadgeCell.vue.d.ts

@@ -1,13 +1,6 @@
 import type { BadgeCellParams, GridCellContext } from '../types';
 declare const __VLS_export: import("vue").DefineComponent<{
     params: import("ag-grid-community").ICellRendererParams<any, any, any> & BadgeCellParams<unknown>;
-    label?: string | number;
-    tone?: import("../../index.ts").Tone;
-    variant?: import("../../index.ts").BadgeVariant;
-    size?: import("../../index.ts").BadgeSize;
-    dot?: boolean;
-    pulse?: boolean;
-    icon?: import("../../index.ts").IconName;
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     style?: import("vue").StyleValue;
@@ -200,6 +193,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
+    label?: string | number;
+    tone?: import("../../index.ts").Tone;
+    variant?: import("../../index.ts").BadgeVariant;
+    size?: import("../../index.ts").BadgeSize;
+    dot?: boolean;
+    pulse?: boolean;
+    icon?: import("../../index.ts").IconName;
     onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
@@ -209,13 +209,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     context?: GridCellContext;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     params: import("ag-grid-community").ICellRendererParams<any, any, any> & BadgeCellParams<unknown>;
-    label?: string | number;
-    tone?: import("../../index.ts").Tone;
-    variant?: import("../../index.ts").BadgeVariant;
-    size?: import("../../index.ts").BadgeSize;
-    dot?: boolean;
-    pulse?: boolean;
-    icon?: import("../../index.ts").IconName;
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     style?: import("vue").StyleValue;
@@ -408,6 +401,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
+    label?: string | number;
+    tone?: import("../../index.ts").Tone;
+    variant?: import("../../index.ts").BadgeVariant;
+    size?: import("../../index.ts").BadgeSize;
+    dot?: boolean;
+    pulse?: boolean;
+    icon?: import("../../index.ts").IconName;
     onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;

package/dist/grid/data-grid.css

@@ -163,6 +163,30 @@
    white-space: nowrap;
 }
 
+.k-data-grid-badges {
+   display: flex;
+   flex-wrap: nowrap;
+   align-items: center;
+   gap: 0.25rem;
+   min-width: 0;
+   max-width: 100%;
+   overflow: hidden;
+}
+
+.k-data-grid-badges.is-wrap {
+   flex-wrap: wrap;
+   padding-block: 0.25rem;
+   line-height: 1.2;
+}
+
+.k-data-grid-badges > * {
+   flex-shrink: 0;
+}
+
+.k-data-grid-badges > .k-data-grid-badge-more {
+   font-variant-numeric: tabular-nums;
+}
+
 .k-data-grid-badge-accent {
    --k-badge-tone: var(--k-accent-text);
 }

package/dist/grid/spreadsheet.mjs

@@ -102,15 +102,19 @@ export function createGridSpreadsheet(options) {
     const inside = cell.row >= rect.top && cell.row <= rect.bottom && cell.col >= rect.left && cell.col <= rect.right;
     return inside ? cell : null;
   }
+  function onRangeEdge(params, edge) {
+    const cell = rangeCell(params);
+    return !!cell && !!rect && edge(cell, rect);
+  }
   const classRules = {
     "is-range": (params) => {
       const cell = rangeCell(params);
       return !!cell && !sameCell(cell, active);
     },
-    "is-range-top": (params) => rangeCell(params)?.row === rect?.top,
-    "is-range-bottom": (params) => rangeCell(params)?.row === rect?.bottom,
-    "is-range-left": (params) => rangeCell(params)?.col === rect?.left,
-    "is-range-right": (params) => rangeCell(params)?.col === rect?.right,
+    "is-range-top": (params) => onRangeEdge(params, (cell, area) => cell.row === area.top),
+    "is-range-bottom": (params) => onRangeEdge(params, (cell, area) => cell.row === area.bottom),
+    "is-range-left": (params) => onRangeEdge(params, (cell, area) => cell.col === area.left),
+    "is-range-right": (params) => onRangeEdge(params, (cell, area) => cell.col === area.right),
     "is-active": (params) => !!active && sameCell(cellOf(params), active),
     "is-fill-corner": (params) => {
       if (!rect) return false;

package/dist/grid/types.d.ts

@@ -49,6 +49,8 @@ export interface BadgeCellParams<T = unknown> {
     variant?: BadgeVariant;
     size?: BadgeSize;
     badgeClass?: string | ((value: unknown, data: T | undefined) => string | undefined);
+    max?: number;
+    wrap?: boolean;
 }
 export type ImageCellFit = 'cover' | 'contain';
 export interface ImageCellParams<T = unknown> {

package/dist/internal/data/sortable.d.ts

@@ -0,0 +1,5 @@
+export type SortableAxis = 'horizontal' | 'vertical';
+export declare const SORTABLE_ATTR = "data-k-sortable";
+export declare function sortableElements(container: HTMLElement | null | undefined): HTMLElement[];
+export declare function isRtl(element: Element | null | undefined): boolean;
+export declare function insertionIndex(elements: HTMLElement[], x: number, y: number, axis: SortableAxis, rtl: boolean): number;

package/dist/internal/data/sortable.mjs

@@ -0,0 +1,23 @@
+export const SORTABLE_ATTR = "data-k-sortable";
+export function sortableElements(container) {
+  if (!container) return [];
+  return Array.from(container.querySelectorAll(`[${SORTABLE_ATTR}]`)).sort(
+    (a, b) => Number(a.getAttribute(SORTABLE_ATTR)) - Number(b.getAttribute(SORTABLE_ATTR))
+  );
+}
+export function isRtl(element) {
+  return element ? getComputedStyle(element).direction === "rtl" : false;
+}
+function isBefore(rect, x, y, axis, rtl) {
+  if (axis === "vertical") return rect.top + rect.height / 2 < y;
+  if (rect.bottom <= y) return true;
+  if (rect.top > y) return false;
+  const center = rect.left + rect.width / 2;
+  return rtl ? center > x : center < x;
+}
+export function insertionIndex(elements, x, y, axis, rtl) {
+  let index = 0;
+  for (const element of elements)
+    if (isBefore(element.getBoundingClientRect(), x, y, axis, rtl)) index++;
+  return index;
+}

package/dist/internal/overlays/avoid.d.ts

@@ -0,0 +1,26 @@
+import type { Ref } from 'vue';
+export interface ToasterInsets {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export interface ToasterAvoidanceOptions {
+    outlet: () => HTMLElement | null;
+    toaster: Readonly<Ref<HTMLElement | null | undefined>>;
+    position: () => string;
+}
+export declare function useToasterAvoidance(options: ToasterAvoidanceOptions): {
+    insets: Ref<{
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    }, ToasterInsets | {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    }>;
+    refresh: () => void;
+};

package/dist/internal/overlays/avoid.mjs

@@ -0,0 +1,134 @@
+import { onScopeDispose, ref, watch } from "vue";
+import { isClient } from "../core/env.mjs";
+import { waitForAnimations } from "../floating/support.mjs";
+const NONE = { left: 0, right: 0, top: 0, bottom: 0 };
+const GAP = 8;
+function sameInsets(a, b) {
+  return a.left === b.left && a.right === b.right && a.top === b.top && a.bottom === b.bottom;
+}
+function rootPixels() {
+  return parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+}
+function drawerSide(dialog) {
+  if (!dialog.classList.contains("k-drawer")) return null;
+  if (dialog.classList.contains("k-drawer-left")) return "left";
+  if (dialog.classList.contains("k-drawer-bottom")) return "bottom";
+  return "right";
+}
+function overlapsX(rect, span) {
+  return rect.left < span.right && span.left < rect.right;
+}
+function horizontalOf(position) {
+  if (position.endsWith("left")) return "left";
+  if (position.endsWith("right")) return "right";
+  return "center";
+}
+export function useToasterAvoidance(options) {
+  const insets = ref(NONE);
+  let observer;
+  let frame = 0;
+  let current = null;
+  function sideInsets(dialog, panel, toaster) {
+    const side = drawerSide(dialog);
+    if (side !== "left" && side !== "right") return null;
+    const horizontal = horizontalOf(options.position());
+    if (horizontal !== "center" && horizontal !== side) return NONE;
+    const style = getComputedStyle(dialog);
+    const padding = parseFloat(side === "left" ? style.paddingLeft : style.paddingRight) || 0;
+    const occupied = panel.offsetWidth + padding;
+    const margin = rootPixels();
+    const free = dialog.clientWidth - occupied - 2 * margin;
+    if (free < toasterWidth(toaster, dialog.clientWidth)) return null;
+    return { ...NONE, [side]: occupied };
+  }
+  function toasterWidth(toaster, viewport) {
+    const width = toaster.offsetWidth || parseFloat(getComputedStyle(toaster).width) || 0;
+    return Math.min(width, viewport - 2 * rootPixels());
+  }
+  function toasterSpan(toaster) {
+    const viewport = document.documentElement.clientWidth;
+    const margin = rootPixels();
+    const width = toasterWidth(toaster, viewport);
+    const horizontal = horizontalOf(options.position());
+    if (horizontal === "left") return { left: margin, right: margin + width };
+    if (horizontal === "right")
+      return { left: viewport - margin - width, right: viewport - margin };
+    return { left: (viewport - width) / 2, right: (viewport + width) / 2 };
+  }
+  function verticalInsets(panel, toaster) {
+    const bounds = toasterSpan(toaster);
+    const viewport = document.documentElement.clientHeight;
+    const margin = rootPixels();
+    const next = { ...NONE };
+    if (options.position().startsWith("top")) {
+      const header = panel.querySelector(":scope > header");
+      const rect = header?.getBoundingClientRect();
+      if (rect && rect.height && overlapsX(rect, bounds) && rect.bottom < viewport / 2)
+        next.top = Math.max(0, Math.ceil(rect.bottom + GAP - margin));
+    } else {
+      const footer = panel.querySelector(":scope > footer");
+      const rect = footer?.getBoundingClientRect();
+      if (rect && rect.height && overlapsX(rect, bounds) && rect.top > viewport / 2)
+        next.bottom = Math.max(0, Math.ceil(viewport - rect.top + GAP - margin));
+    }
+    return next;
+  }
+  function compute() {
+    frame = 0;
+    const dialog = current;
+    const toaster = options.toaster.value;
+    const panel = dialog?.querySelector(':scope > [class$="-panel"]');
+    if (!dialog || !toaster || !panel) {
+      if (!dialog && !sameInsets(insets.value, NONE)) insets.value = NONE;
+      return;
+    }
+    const next = sideInsets(dialog, panel, toaster) ?? verticalInsets(panel, toaster);
+    if (!sameInsets(next, insets.value)) insets.value = next;
+  }
+  function schedule() {
+    if (!frame) frame = requestAnimationFrame(compute);
+  }
+  function observe(dialog) {
+    observer ??= new ResizeObserver(schedule);
+    const panel = dialog.querySelector(':scope > [class$="-panel"]');
+    for (const element of [
+      dialog,
+      panel,
+      panel?.querySelector(":scope > header"),
+      panel?.querySelector(":scope > footer")
+    ])
+      if (element) observer.observe(element);
+  }
+  function disconnect() {
+    observer?.disconnect();
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+  }
+  watch(
+    [options.outlet, options.toaster],
+    ([dialog, toaster]) => {
+      if (!isClient()) return;
+      disconnect();
+      current = dialog;
+      if (!dialog) {
+        insets.value = NONE;
+        return;
+      }
+      observe(dialog);
+      if (toaster) observer?.observe(toaster);
+      schedule();
+      waitForAnimations(dialog).then(() => {
+        if (current === dialog) schedule();
+      });
+    },
+    { immediate: true, flush: "post" }
+  );
+  if (isClient()) {
+    window.addEventListener("resize", schedule);
+    onScopeDispose(() => {
+      window.removeEventListener("resize", schedule);
+      disconnect();
+    });
+  }
+  return { insets, refresh: schedule };
+}