@threadlabs/looma 0.1.15 → 0.1.17

package/dist/index.cjs

@@ -24,11 +24,243 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// dist/esm/ui-affordance-scope.entry.js
-var ui_affordance_scope_entry_exports = {};
-__export(ui_affordance_scope_entry_exports, {
-  ui_affordance_scope: () => UIAffordanceScope
-});
+// dist/esm/positioning-Bu0dmLBE.js
+function bindAnchorName(anchor, name) {
+  const binding = anchorBindings.get(anchor) ?? {
+    original: anchor.style.getPropertyValue("anchor-name"),
+    names: /* @__PURE__ */ new Set()
+  };
+  binding.names.add(name);
+  anchorBindings.set(anchor, binding);
+  const values = [binding.original, ...binding.names].filter(Boolean);
+  anchor.style.setProperty("anchor-name", values.join(", "));
+}
+function unbindAnchorName(anchor, name) {
+  const binding = anchorBindings.get(anchor);
+  if (!binding)
+    return;
+  binding.names.delete(name);
+  if (binding.names.size) {
+    const values = [binding.original, ...binding.names].filter(Boolean);
+    anchor.style.setProperty("anchor-name", values.join(", "));
+    return;
+  }
+  if (binding.original)
+    anchor.style.setProperty("anchor-name", binding.original);
+  else
+    anchor.style.removeProperty("anchor-name");
+  anchorBindings.delete(anchor);
+}
+function supportsAnchorPositioning(owner) {
+  const css = owner.CSS;
+  return typeof css?.supports === "function" && css.supports("anchor-name: --ui-anchor-test") && css.supports("position-anchor: --ui-anchor-test") && css.supports("top: anchor(bottom)");
+}
+function topLayerOpen(surface) {
+  try {
+    return surface.matches(":popover-open");
+  } catch {
+    return !surface.hidden;
+  }
+}
+function showInTopLayer(surface) {
+  surface.setAttribute("popover", "manual");
+  surface.hidden = false;
+  if (typeof surface.showPopover === "function" && !topLayerOpen(surface)) {
+    try {
+      surface.showPopover();
+    } catch {
+    }
+  }
+}
+function hideFromTopLayer(surface) {
+  if (typeof surface.hidePopover === "function" && topLayerOpen(surface)) {
+    try {
+      surface.hidePopover();
+    } catch {
+    }
+  }
+  surface.hidden = true;
+}
+function createViewportSurface(surface) {
+  surface.setAttribute("popover", "manual");
+  surface.dataset.uiPositioning = "viewport";
+  return {
+    show() {
+      showInTopLayer(surface);
+    },
+    hide() {
+      hideFromTopLayer(surface);
+    },
+    destroy() {
+      hideFromTopLayer(surface);
+    }
+  };
+}
+function fallbackPosition(surface, anchor, placement, gap, viewportGap) {
+  const owner = surface.ownerDocument.defaultView ?? window;
+  const viewport = getVisualViewportRect(owner);
+  const rect = surface.getBoundingClientRect();
+  const preferTop = placement.startsWith("top");
+  const preferEnd = placement.endsWith("end");
+  const spaceBelow = viewport.bottom - anchor.bottom - viewportGap;
+  const spaceAbove = anchor.top - viewport.top - viewportGap;
+  const useTop = preferTop ? !(spaceAbove < rect.height + gap && spaceBelow > spaceAbove) : spaceBelow < rect.height + gap && spaceAbove > spaceBelow;
+  const unclampedTop = useTop ? anchor.top - rect.height - gap : anchor.bottom + gap;
+  const unclampedLeft = preferEnd ? anchor.right - rect.width : anchor.left;
+  const shifted = clampRectToViewport({
+    left: unclampedLeft,
+    top: unclampedTop,
+    width: rect.width,
+    height: rect.height
+  }, viewport, viewportGap);
+  surface.style.left = `${Math.round(unclampedLeft + shifted.x)}px`;
+  surface.style.top = `${Math.round(unclampedTop + shifted.y)}px`;
+  surface.style.right = "auto";
+  surface.style.bottom = "auto";
+}
+function createAnchoredSurface(surface, options = {}) {
+  const owner = surface.ownerDocument.defaultView ?? window;
+  const placement = options.placement ?? "bottom-start";
+  const gap = Math.max(0, options.gap ?? 4);
+  const viewportGap = Math.max(0, options.viewportGap ?? 8);
+  const nativeAnchor = supportsAnchorPositioning(owner);
+  const anchorName = `--ui-anchor-${++anchorSequence}`;
+  let anchor = options.anchor ?? null;
+  let point = null;
+  let open = false;
+  let frame = null;
+  let listenerAbort = null;
+  surface.setAttribute("popover", "manual");
+  surface.dataset.uiPositioning = nativeAnchor ? "anchor" : "fallback";
+  surface.style.position = "fixed";
+  surface.style.margin = "0";
+  const bindAnchor = (next) => {
+    if (anchor)
+      unbindAnchorName(anchor, anchorName);
+    anchor = next;
+    if (!anchor) {
+      surface.style.removeProperty("position-anchor");
+      return;
+    }
+    bindAnchorName(anchor, anchorName);
+    surface.style.setProperty("position-anchor", anchorName);
+  };
+  const positionNative = () => {
+    const blockEnd = placement.startsWith("bottom");
+    const inlineEnd = placement.endsWith("end");
+    surface.style.top = blockEnd ? `calc(anchor(bottom) + ${gap}px)` : "auto";
+    surface.style.bottom = blockEnd ? "auto" : `calc(anchor(top) + ${gap}px)`;
+    surface.style.left = inlineEnd ? "auto" : "anchor(left)";
+    surface.style.right = inlineEnd ? "anchor(right)" : "auto";
+    surface.style.setProperty("position-try-fallbacks", "flip-block, flip-inline");
+  };
+  const position = () => {
+    frame = null;
+    if (!open)
+      return;
+    if (point) {
+      fallbackPosition(surface, {
+        left: point.x,
+        right: point.x,
+        top: point.y,
+        bottom: point.y
+      }, "bottom-start", gap, viewportGap);
+      return;
+    }
+    if (!anchor)
+      return;
+    if (nativeAnchor)
+      positionNative();
+    else
+      fallbackPosition(surface, anchor.getBoundingClientRect(), placement, gap, viewportGap);
+  };
+  const schedule = () => {
+    if (!open || frame !== null)
+      return;
+    frame = owner.requestAnimationFrame(position);
+  };
+  const syncFallbackListeners = () => {
+    const needsListeners = open && (point !== null || !nativeAnchor);
+    if (!needsListeners) {
+      listenerAbort?.abort();
+      listenerAbort = null;
+      return;
+    }
+    if (listenerAbort)
+      return;
+    listenerAbort = new AbortController();
+    const signal = listenerAbort.signal;
+    owner.addEventListener("resize", schedule, { passive: true, signal });
+    owner.addEventListener("scroll", schedule, { passive: true, capture: true, signal });
+    owner.visualViewport?.addEventListener("resize", schedule, { passive: true, signal });
+    owner.visualViewport?.addEventListener("scroll", schedule, { passive: true, signal });
+  };
+  bindAnchor(anchor);
+  return {
+    setAnchor(next) {
+      point = null;
+      bindAnchor(next);
+      syncFallbackListeners();
+      schedule();
+    },
+    show() {
+      point = null;
+      open = true;
+      syncFallbackListeners();
+      showInTopLayer(surface);
+      position();
+    },
+    showAtPoint(nextPoint) {
+      point = nextPoint;
+      open = true;
+      syncFallbackListeners();
+      showInTopLayer(surface);
+      position();
+    },
+    hide() {
+      open = false;
+      point = null;
+      syncFallbackListeners();
+      if (frame !== null)
+        owner.cancelAnimationFrame(frame);
+      frame = null;
+      hideFromTopLayer(surface);
+    },
+    refresh: schedule,
+    destroy() {
+      open = false;
+      listenerAbort?.abort();
+      listenerAbort = null;
+      if (frame !== null)
+        owner.cancelAnimationFrame(frame);
+      frame = null;
+      hideFromTopLayer(surface);
+      bindAnchor(null);
+    }
+  };
+}
+function getVisualViewportRect(owner = window) {
+  const viewport = owner.visualViewport;
+  const left = viewport?.offsetLeft ?? 0;
+  const top = viewport?.offsetTop ?? 0;
+  const width = viewport?.width ?? owner.innerWidth;
+  const height = viewport?.height ?? owner.innerHeight;
+  return {
+    left,
+    top,
+    right: left + width,
+    bottom: top + height,
+    width,
+    height
+  };
+}
+function clampRectToViewport(rect, viewport = getVisualViewportRect(), gutter = 0) {
+  const availableWidth = Math.max(0, viewport.width - gutter * 2);
+  const availableHeight = Math.max(0, viewport.height - gutter * 2);
+  const targetLeft = rect.width > availableWidth ? viewport.left + gutter : Math.min(Math.max(rect.left, viewport.left + gutter), viewport.right - gutter - rect.width);
+  const targetTop = rect.height > availableHeight ? viewport.top + gutter : Math.min(Math.max(rect.top, viewport.top + gutter), viewport.bottom - gutter - rect.height);
+  return { x: targetLeft - rect.left, y: targetTop - rect.top };
+}
 function distanceFromPointToRect(point, rect) {
   const dx = Math.max(rect.left - point.x, 0, point.x - rect.right);
   const dy = Math.max(rect.top - point.y, 0, point.y - rect.bottom);
@@ -123,11 +355,25 @@ function createProximityCoordinator(scope, options = {}) {
     }
   };
 }
-var DEFAULT_AFFORDANCE_NEAR_RADIUS, uiAffordanceScopeCss, UIAffordanceScope;
+var DEFAULT_AFFORDANCE_NEAR_RADIUS, anchorSequence, anchorBindings;
+var init_positioning_Bu0dmLBE = __esm({
+  "dist/esm/positioning-Bu0dmLBE.js"() {
+    DEFAULT_AFFORDANCE_NEAR_RADIUS = 16;
+    anchorSequence = 0;
+    anchorBindings = /* @__PURE__ */ new WeakMap();
+  }
+});
+
+// dist/esm/ui-affordance-scope.entry.js
+var ui_affordance_scope_entry_exports = {};
+__export(ui_affordance_scope_entry_exports, {
+  ui_affordance_scope: () => UIAffordanceScope
+});
+var uiAffordanceScopeCss, UIAffordanceScope;
 var init_ui_affordance_scope_entry = __esm({
   "dist/esm/ui-affordance-scope.entry.js"() {
     init_index_CEeiinfk();
-    DEFAULT_AFFORDANCE_NEAR_RADIUS = 16;
+    init_positioning_Bu0dmLBE();
     uiAffordanceScopeCss = () => `:host{display:contents;--ui-affordance-scope-engaged:0}:host([data-ui-interaction='engaged']){--ui-affordance-scope-engaged:1}`;
     UIAffordanceScope = class {
       constructor(hostRef) {
@@ -496,7 +742,7 @@ var init_ui_checkbox_entry = __esm({
   }
 });
 
-// dist/esm/manager-CR7f2MQC.js
+// dist/esm/manager-PM9a74r7.js
 function syncScrollLock() {
   if (typeof document === "undefined") {
     return;
@@ -525,8 +771,11 @@ function handleLightDismiss(event) {
     return;
   }
   const target = event.target;
-  if (target instanceof Node && top.element.contains(target)) {
-    return;
+  if (target instanceof Node) {
+    if (top.element.contains(target))
+      return;
+    if (top.relatedElements?.some((element) => element.contains(target)))
+      return;
   }
   requestTopOverlayClose("light-dismiss", "pointer");
 }
@@ -581,8 +830,8 @@ function requestTopOverlayClose(reason, trigger) {
   return true;
 }
 var stack, scrollLockAttribute, modalCount, listenersAttached;
-var init_manager_CR7f2MQC = __esm({
-  "dist/esm/manager-CR7f2MQC.js"() {
+var init_manager_PM9a74r7 = __esm({
+  "dist/esm/manager-PM9a74r7.js"() {
     stack = [];
     scrollLockAttribute = "data-ui-scroll-lock";
     modalCount = 0;
@@ -599,9 +848,10 @@ var uiContextMenuCss, UIContextMenu;
 var init_ui_context_menu_entry = __esm({
   "dist/esm/ui-context-menu.entry.js"() {
     init_index_CEeiinfk();
-    init_manager_CR7f2MQC();
+    init_manager_PM9a74r7();
     init_events_JwSoedEO();
-    uiContextMenuCss = () => `:host{display:contents}.menu{position:fixed;z-index:var(--ui-z-overlay, 1000);min-width:12rem}.menu[data-open]{display:block}.menu:not([data-open]){display:none !important}`;
+    init_positioning_Bu0dmLBE();
+    uiContextMenuCss = () => `:host{display:contents}.menu{position:fixed;inset:auto;margin:0;z-index:var(--ui-z-overlay, 1000);min-width:12rem;opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}.menu:popover-open{opacity:1;transform:translateY(0) scale(1)}@starting-style{.menu:popover-open{opacity:0;transform:translateY(-4px) scale(0.99)}}.menu[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){.menu{transition:none}}`;
     UIContextMenu = class {
       constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -621,6 +871,8 @@ var init_ui_context_menu_entry = __esm({
       contextTarget = null;
       pointerX = 0;
       pointerY = 0;
+      pointPositioned = false;
+      surface = null;
       syncFromProp() {
         this.internalOpen = this.open;
       }
@@ -631,6 +883,11 @@ var init_ui_context_menu_entry = __esm({
       syncOverlay() {
         this.syncTriggerState();
         if (this.internalOpen) {
+          if (this.pointPositioned) {
+            this.surface?.showAtPoint({ x: this.pointerX, y: this.pointerY });
+          } else {
+            this.surface?.show();
+          }
           openOverlay({
             id: this.overlayId,
             modal: false,
@@ -639,6 +896,7 @@ var init_ui_context_menu_entry = __esm({
             requestClose: (reason, trigger) => this.closeMenu(reason, trigger)
           });
         } else {
+          this.surface?.hide();
           closeOverlay(this.overlayId);
         }
       }
@@ -647,18 +905,33 @@ var init_ui_context_menu_entry = __esm({
         this.internalOpen = this.internalOpen || this.defaultOpen;
         this.resolveTargets();
         this.attachTargetListeners();
+        this.setupSurface();
         this.syncTriggerState();
         this.syncOverlay();
       }
       componentDidUpdate() {
         this.resolveTargets();
         this.attachTargetListeners();
+        if (!this.pointPositioned)
+          this.surface?.setAnchor(this.trigger);
         this.syncTriggerState();
       }
       disconnectedCallback() {
         this.detachTargetListeners();
+        this.surface?.destroy();
+        this.surface = null;
         closeOverlay(this.overlayId);
       }
+      setupSurface() {
+        const menu = this.host.shadowRoot?.querySelector(".menu");
+        if (!menu)
+          return;
+        this.surface?.destroy();
+        this.surface = createAnchoredSurface(menu, {
+          anchor: this.trigger,
+          placement: "bottom-start"
+        });
+      }
       resolveTargets() {
         const previousTrigger = this.trigger;
         const previousContextTarget = this.contextTarget;
@@ -698,6 +971,8 @@ var init_ui_context_menu_entry = __esm({
       openMenu(x, y, trigger) {
         this.pointerX = x;
         this.pointerY = y;
+        this.pointPositioned = true;
+        this.surface?.showAtPoint({ x, y });
         this.internalOpen = true;
         dispatchDetail(this.host, "open", {
           open: true,
@@ -709,8 +984,14 @@ var init_ui_context_menu_entry = __esm({
       openFromTrigger(trigger) {
         if (!this.trigger)
           return;
-        const rect = this.trigger.getBoundingClientRect();
-        this.openMenu(rect.left, rect.bottom, trigger);
+        this.pointPositioned = false;
+        this.internalOpen = true;
+        dispatchDetail(this.host, "open", {
+          open: true,
+          reason: "action",
+          trigger
+        });
+        this.focusFirstItem();
       }
       closeMenu(reason, trigger, returnFocus = true) {
         if (!this.internalOpen)
@@ -776,7 +1057,7 @@ var init_ui_context_menu_entry = __esm({
         this.closeMenu("action", "pointer");
       };
       render() {
-        return h(Host, { key: "79fbca2c89f1d1fd1f4796ad88d2a599e811a3f9", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: "9308cadfa155930e3e46dfb4a69a847ae388958b", name: "trigger" }), h("div", { key: "16cfba2b32444ac9e3cac1f040f81f17fd5db23c", class: "menu", "data-open": this.internalOpen ? "" : void 0, style: { left: `${this.pointerX}px`, top: `${this.pointerY}px` } }, h("ui-menu", { key: "59f18e0df3bb1fe85efa8eeca00b336bbde47c70", open: this.internalOpen }, h("slot", { key: "5bdbb7773c9c1ae43ec2e05fca9558482815e28a" }))));
+        return h(Host, { key: "aee76fad23434fb3cdaf885c698f62237c2a9468", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: "da047f870b7a93f1acbba5fa1628b5cb66139d99", name: "trigger" }), h("div", { key: "388a473ac7fb626a20d0feda14f0d8dd16f6ab94", class: "menu", "data-open": this.internalOpen ? "" : void 0 }, h("ui-menu", { key: "67ca5c05ff40d2dd1d5f17a8634636503f98c02d", open: this.internalOpen }, h("slot", { key: "b7c7dfac4342afa1df67459e94de7ac7dca4a251" }))));
       }
       static get watchers() {
         return {
@@ -805,7 +1086,7 @@ var uiDialogCss, UIDialog;
 var init_ui_dialog_entry = __esm({
   "dist/esm/ui-dialog.entry.js"() {
     init_index_CEeiinfk();
-    init_manager_CR7f2MQC();
+    init_manager_PM9a74r7();
     init_events_JwSoedEO();
     uiDialogCss = () => `:host{display:block}:host:not([data-open]){display:none}:host dialog{--ui-dialog-duration:var(--ui-motion-base);--ui-dialog-viewport-gap:var(--ui-space-4, 1rem);position:fixed;inset:0;inline-size:min(     calc(100% - (var(--ui-dialog-viewport-gap) * 2)),     var(--ui-dialog-max-width, 440px)   );max-inline-size:none;max-block-size:calc(100dvh - (var(--ui-dialog-viewport-gap) * 2));margin:auto;padding:var(--ui-space-4);overflow:auto;background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-dialog);box-shadow:var(--ui-shadow-dialog);visibility:hidden;pointer-events:none;opacity:0;transform:scale(0.96);transition:opacity var(--ui-dialog-duration) var(--ui-motion-ease),     transform var(--ui-dialog-duration) var(--ui-motion-ease),     visibility var(--ui-dialog-duration),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]{visibility:visible;pointer-events:auto;opacity:1;transform:scale(1);animation:ui-dialog-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-enter{from{opacity:0;transform:scale(0.96)}}:host dialog::backdrop{background-color:transparent;transition:background-color var(--ui-dialog-duration) var(--ui-motion-ease),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]::backdrop{background-color:var(--ui-overlay-backdrop);animation:ui-dialog-backdrop-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-backdrop-enter{from{background-color:transparent}}`;
     UIDialog = class {
@@ -1289,7 +1570,9 @@ var init_ui_menu_entry = __esm({
   "dist/esm/ui-menu.entry.js"() {
     init_index_CEeiinfk();
     init_events_JwSoedEO();
-    uiMenuCss = () => `:host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;inline-size:max-content;min-inline-size:min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));max-inline-size:calc(100vw - (var(--ui-menu-viewport-gap) * 2));padding:var(--ui-space-1);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg)}::slotted(ui-menu-item){display:block;width:100%;padding:var(--ui-space-2) var(--ui-space-3);text-align:left;background:none;border:none;border-radius:var(--ui-radius-2);color:var(--ui-text-primary);font-size:var(--ui-font-size-md);font-weight:var(--ui-font-medium, 500);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(ui-menu-item:hover:not([aria-disabled='true']):not([disabled])){background:var(--ui-surface-subtle)}::slotted(ui-menu-item[aria-disabled='true']),::slotted(ui-menu-item[disabled]){opacity:0.6;cursor:not-allowed}`;
+    init_manager_PM9a74r7();
+    init_positioning_Bu0dmLBE();
+    uiMenuCss = () => `:host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;inline-size:max-content;min-inline-size:min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));max-inline-size:calc(100vw - (var(--ui-menu-viewport-gap) * 2));padding:var(--ui-space-1);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg)}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;overflow:auto;max-block-size:calc(100dvh - (var(--ui-menu-viewport-gap) * 2));opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}::slotted(ui-menu-item){display:block;width:100%;padding:var(--ui-space-2) var(--ui-space-3);text-align:left;background:none;border:none;border-radius:var(--ui-radius-2);color:var(--ui-text-primary);font-size:var(--ui-font-size-md);font-weight:var(--ui-font-medium, 500);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(ui-menu-item:hover:not([aria-disabled='true']):not([disabled])){background:var(--ui-surface-subtle)}::slotted(ui-menu-item[aria-disabled='true']),::slotted(ui-menu-item[disabled]){opacity:0.6;cursor:not-allowed}`;
     UIMenu = class {
       constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -1299,19 +1582,83 @@ var init_ui_menu_entry = __esm({
       }
       open = false;
       defaultOpen = false;
+      /** Id of the control that anchors this menu in the top layer. */
+      for;
+      /** Preferred placement; Looma flips and shifts when space is constrained. */
+      placement = "bottom-start";
       internalOpen = false;
+      overlayId = `ui-menu-${Math.random().toString(36).slice(2, 11)}`;
+      anchor = null;
+      surface = null;
       syncFromProp() {
         this.internalOpen = this.open;
       }
+      resetSurface() {
+        this.setupSurface();
+        this.syncSurface();
+      }
+      syncSurface() {
+        this.syncAnchorState();
+        if (!this.surface)
+          return;
+        if (this.internalOpen) {
+          this.surface.show();
+          openOverlay({
+            id: this.overlayId,
+            modal: false,
+            element: this.host,
+            relatedElements: this.anchor ? [this.anchor] : void 0,
+            dismissible: true,
+            requestClose: (reason, trigger) => this.closeMenu(reason, trigger)
+          });
+        } else {
+          this.surface.hide();
+          closeOverlay(this.overlayId);
+        }
+      }
       componentDidLoad() {
         this.syncFromProp();
         this.internalOpen = this.internalOpen || this.defaultOpen;
         this.host.addEventListener("click", this.onItemClick);
         this.host.addEventListener("keydown", this.onKeydown);
+        this.setupSurface();
+        this.syncSurface();
       }
       disconnectedCallback() {
         this.host.removeEventListener("click", this.onItemClick);
         this.host.removeEventListener("keydown", this.onKeydown);
+        this.surface?.destroy();
+        this.surface = null;
+        closeOverlay(this.overlayId);
+      }
+      setupSurface() {
+        this.surface?.destroy();
+        this.surface = null;
+        this.anchor = this.for ? this.host.ownerDocument.getElementById(this.for) : null;
+        if (!this.anchor)
+          return;
+        this.surface = createAnchoredSurface(this.host, {
+          anchor: this.anchor,
+          placement: this.placement
+        });
+      }
+      syncAnchorState() {
+        if (!this.anchor)
+          return;
+        this.anchor.setAttribute("aria-haspopup", "menu");
+        this.anchor.setAttribute("aria-expanded", this.internalOpen ? "true" : "false");
+      }
+      closeMenu(reason, trigger) {
+        if (!this.internalOpen)
+          return;
+        this.internalOpen = false;
+        dispatchDetail(this.host, "close", {
+          open: false,
+          reason,
+          trigger
+        });
+        if (reason === "escape")
+          this.anchor?.focus();
       }
       getItems() {
         return Array.from(this.host.querySelectorAll("ui-menu-item"));
@@ -1335,6 +1682,11 @@ var init_ui_menu_entry = __esm({
         this.internalOpen = false;
       };
       onKeydown = (e) => {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          requestTopOverlayClose("escape", "keyboard");
+          return;
+        }
         const items = this.getItems().filter((i) => !this.isItemDisabled(i));
         if (items.length === 0)
           return;
@@ -1361,12 +1713,21 @@ var init_ui_menu_entry = __esm({
         }
       };
       render() {
-        return h(Host, { key: "5e463cbbce272c6b6132a839b818deef3e39a532", role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "feea6a21d41a7b27a6270814bcf0b3f3ded394a1" }));
+        return h(Host, { key: "06ad0750df843cb874bd4f257d8567157c855493", role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "50118ac749a2747ca06f4d483499c4cd20125a89" }));
       }
       static get watchers() {
         return {
           "open": [{
             "syncFromProp": 0
+          }],
+          "for": [{
+            "resetSurface": 0
+          }],
+          "placement": [{
+            "resetSurface": 0
+          }],
+          "internalOpen": [{
+            "syncSurface": 0
           }]
         };
       }
@@ -1384,9 +1745,10 @@ var uiPopoverCss, UIPopover;
 var init_ui_popover_entry = __esm({
   "dist/esm/ui-popover.entry.js"() {
     init_index_CEeiinfk();
-    init_manager_CR7f2MQC();
+    init_manager_PM9a74r7();
     init_events_JwSoedEO();
-    uiPopoverCss = () => `:host{--ui-popover-viewport-gap:var(--ui-space-2, 0.5rem);padding:var(--ui-space-3);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg);max-inline-size:min(     20rem,     calc(100vw - (var(--ui-popover-viewport-gap) * 2))   );max-block-size:calc(100dvh - (var(--ui-popover-viewport-gap) * 2));overflow:auto}`;
+    init_positioning_Bu0dmLBE();
+    uiPopoverCss = () => `:host{--ui-popover-viewport-gap:var(--ui-space-2, 0.5rem);padding:var(--ui-space-3);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg);max-inline-size:min(     20rem,     calc(100vw - (var(--ui-popover-viewport-gap) * 2))   );max-block-size:calc(100dvh - (var(--ui-popover-viewport-gap) * 2));overflow:auto}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}`;
     UIPopover = class {
       constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -1396,8 +1758,13 @@ var init_ui_popover_entry = __esm({
       }
       open = false;
       defaultOpen = false;
+      /** Optional id of the element this popover follows in the top layer. */
+      for;
+      placement = "bottom-start";
       internalOpen = false;
       overlayId = `ui-popover-${Math.random().toString(36).slice(2, 11)}`;
+      anchor = null;
+      surface = null;
       syncFromProp() {
         this.internalOpen = this.open;
       }
@@ -1417,12 +1784,37 @@ var init_ui_popover_entry = __esm({
           });
         }
       }
+      resetSurface() {
+        this.setupSurface();
+        this.syncSurface();
+      }
+      setupSurface() {
+        this.surface?.destroy();
+        this.surface = null;
+        this.anchor = this.for ? this.host.ownerDocument.getElementById(this.for) : null;
+        if (!this.anchor)
+          return;
+        this.surface = createAnchoredSurface(this.host, {
+          anchor: this.anchor,
+          placement: this.placement
+        });
+      }
+      syncSurface() {
+        if (!this.surface)
+          return;
+        if (this.internalOpen)
+          this.surface.show();
+        else
+          this.surface.hide();
+      }
       syncOverlay() {
+        this.syncSurface();
         if (this.internalOpen) {
           openOverlay({
             id: this.overlayId,
             modal: false,
             element: this.host,
+            relatedElements: this.anchor ? [this.anchor] : void 0,
             dismissible: true,
             requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger)
           });
@@ -1434,10 +1826,13 @@ var init_ui_popover_entry = __esm({
         this.syncFromProp();
         this.internalOpen = this.internalOpen || this.defaultOpen;
         this.host.addEventListener("keydown", this.onKeydown);
+        this.setupSurface();
         this.syncOverlay();
       }
       disconnectedCallback() {
         this.host.removeEventListener("keydown", this.onKeydown);
+        this.surface?.destroy();
+        this.surface = null;
         closeOverlay(this.overlayId);
       }
       componentDidUpdate() {
@@ -1457,7 +1852,7 @@ var init_ui_popover_entry = __esm({
         }
       };
       render() {
-        return h(Host, { key: "67e7f52220db9d997fb11b686d6abcbdf9557a8d", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "d7c1fa2ab75994fe0a7dd63f8289754c7754c30f" }));
+        return h(Host, { key: "8e45be54147ff8f76a0d5e7fd875c3f4cf5ac40a", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "3141729cd32c8dcdaec1fbd763eb034242563c8f" }));
       }
       static get watchers() {
         return {
@@ -1466,6 +1861,12 @@ var init_ui_popover_entry = __esm({
           }],
           "internalOpen": [{
             "onOpenChange": 0
+          }],
+          "for": [{
+            "resetSurface": 0
+          }],
+          "placement": [{
+            "resetSurface": 0
           }]
         };
       }
@@ -2234,7 +2635,8 @@ var init_ui_toast_region_entry = __esm({
   "dist/esm/ui-toast-region.entry.js"() {
     init_index_CEeiinfk();
     init_events_JwSoedEO();
-    uiToastRegionCss = () => `:host{position:fixed;top:calc(var(--ui-space-4) + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9999;display:grid;gap:var(--ui-space-2);inline-size:min(24rem, calc(100vw - (var(--ui-space-4) * 2)));max-inline-size:100%;pointer-events:none}:host>*{pointer-events:auto}::slotted([data-ui-toast]){display:grid;grid-template-columns:1fr auto;gap:var(--ui-space-2);align-items:start;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);padding:var(--ui-space-3) var(--ui-space-4);background:var(--ui-surface-elevated);color:var(--ui-text-primary);box-shadow:var(--ui-shadow-lg);animation:ui-toast-enter 0.25s var(--ui-motion-ease) forwards}@keyframes ui-toast-enter{from{opacity:0;transform:translateY(-0.5rem)}to{opacity:1;transform:translateY(0)}}::slotted([data-ui-toast][aria-hidden='true']){display:none}::slotted([data-ui-toast-dismiss]){border:0;background:transparent;color:var(--ui-text-secondary);cursor:pointer;font:inherit}`;
+    init_positioning_Bu0dmLBE();
+    uiToastRegionCss = () => `:host{position:fixed;top:calc(var(--ui-space-4) + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9999;display:grid;gap:var(--ui-space-2);inline-size:min(24rem, calc(100vw - (var(--ui-space-4) * 2)));max-inline-size:100%;pointer-events:none}:host([popover]){right:auto;bottom:auto;margin:0}:host>*{pointer-events:auto}::slotted([data-ui-toast]){display:grid;grid-template-columns:1fr auto;gap:var(--ui-space-2);align-items:start;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);padding:var(--ui-space-3) var(--ui-space-4);background:var(--ui-surface-elevated);color:var(--ui-text-primary);box-shadow:var(--ui-shadow-lg);animation:ui-toast-enter 0.25s var(--ui-motion-ease) forwards}@keyframes ui-toast-enter{from{opacity:0;transform:translateY(-0.5rem)}to{opacity:1;transform:translateY(0)}}::slotted([data-ui-toast][aria-hidden='true']){display:none}::slotted([data-ui-toast-dismiss]){border:0;background:transparent;color:var(--ui-text-secondary);cursor:pointer;font:inherit}`;
     UIToastRegion = class {
       constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -2244,15 +2646,26 @@ var init_ui_toast_region_entry = __esm({
       }
       open = true;
       internalOpen = true;
+      surface = null;
       syncFromProp() {
         this.internalOpen = this.open;
       }
+      syncSurface() {
+        if (this.internalOpen)
+          this.surface?.show();
+        else
+          this.surface?.hide();
+      }
       componentDidLoad() {
+        this.surface = createViewportSurface(this.host);
         this.syncFromProp();
+        this.syncSurface();
         this.host.addEventListener("click", this.onClick);
       }
       disconnectedCallback() {
         this.host.removeEventListener("click", this.onClick);
+        this.surface?.destroy();
+        this.surface = null;
       }
       getToasts() {
         return Array.from(this.host.querySelectorAll("[data-ui-toast]"));
@@ -2286,12 +2699,15 @@ var init_ui_toast_region_entry = __esm({
         }
       };
       render() {
-        return h(Host, { key: "0edcce54864ba991b092d004d3b45cf697b9c3ac", role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "2e30794a05b018fb55c4313c8e17f7262ecee7da" }));
+        return h(Host, { key: "693e24016ec0881a4d619a489f1b655feee41784", role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "e666b2a73a5d7eb8dd607df3d1c5135b78cf3775" }));
       }
       static get watchers() {
         return {
           "open": [{
             "syncFromProp": 0
+          }],
+          "internalOpen": [{
+            "syncSurface": 0
           }]
         };
       }
@@ -2309,9 +2725,10 @@ var uiTooltipCss, UITooltip;
 var init_ui_tooltip_entry = __esm({
   "dist/esm/ui-tooltip.entry.js"() {
     init_index_CEeiinfk();
-    init_manager_CR7f2MQC();
+    init_manager_PM9a74r7();
     init_events_JwSoedEO();
-    uiTooltipCss = () => `:host{display:inline-block;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md)}:host([hidden]){display:none !important}`;
+    init_positioning_Bu0dmLBE();
+    uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md);opacity:0;transform:translateY(4px);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
     UITooltip = class {
       constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -2322,49 +2739,76 @@ var init_ui_tooltip_entry = __esm({
       for = "";
       open = false;
       defaultOpen = false;
+      placement = "top-start";
+      /** Pointer hover intent delay in milliseconds. Keyboard focus is immediate. */
+      showDelay = 500;
+      /** Pointer leave grace period in milliseconds. */
+      hideDelay = 100;
       internalOpen = false;
       overlayId = `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
       trigger = null;
+      surface = null;
+      showTimer = null;
+      hideTimer = null;
       syncFromProp() {
+        this.clearTimers();
         this.internalOpen = this.open;
       }
+      resetSurface() {
+        this.syncTrigger();
+        this.setupSurface();
+        this.syncOverlay();
+      }
       syncOverlay() {
         if (this.internalOpen) {
+          this.surface?.show();
           openOverlay({
             id: this.overlayId,
             modal: false,
             element: this.host,
+            relatedElements: this.trigger ? [this.trigger] : void 0,
             dismissible: true,
             requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger)
           });
         } else {
+          this.surface?.hide();
           closeOverlay(this.overlayId);
         }
       }
       componentDidLoad() {
         this.syncFromProp();
         this.internalOpen = this.internalOpen || this.defaultOpen;
-        this.resolveTrigger();
-        this.attachTriggerListeners();
+        this.syncTrigger();
+        this.setupSurface();
         this.host.addEventListener("keydown", this.onKeydown);
         this.syncOverlay();
       }
       componentDidUpdate() {
-        this.resolveTrigger();
-        this.attachTriggerListeners();
-        this.syncOverlay();
+        this.syncTrigger();
       }
       disconnectedCallback() {
+        this.clearTimers();
         this.detachTriggerListeners();
+        this.surface?.destroy();
+        this.surface = null;
         this.host.removeEventListener("keydown", this.onKeydown);
         closeOverlay(this.overlayId);
       }
-      resolveTrigger() {
-        if (this.for) {
-          this.trigger = document.getElementById(this.for);
-        } else {
-          this.trigger = this.host.previousElementSibling;
-        }
+      syncTrigger() {
+        const next = this.for ? this.host.ownerDocument.getElementById(this.for) : this.host.previousElementSibling;
+        if (next === this.trigger)
+          return;
+        this.detachTriggerListeners();
+        this.trigger = next;
+        this.attachTriggerListeners();
+        this.surface?.setAnchor(next);
+      }
+      setupSurface() {
+        this.surface?.destroy();
+        this.surface = createAnchoredSurface(this.host, {
+          anchor: this.trigger,
+          placement: this.placement
+        });
       }
       attachTriggerListeners() {
         this.detachTriggerListeners();
@@ -2383,31 +2827,64 @@ var init_ui_tooltip_entry = __esm({
         this.trigger.removeEventListener("focusin", this.onTriggerFocusIn);
         this.trigger.removeEventListener("focusout", this.onTriggerFocusOut);
       }
+      clearShowTimer() {
+        if (this.showTimer === null)
+          return;
+        clearTimeout(this.showTimer);
+        this.showTimer = null;
+      }
+      clearHideTimer() {
+        if (this.hideTimer === null)
+          return;
+        clearTimeout(this.hideTimer);
+        this.hideTimer = null;
+      }
+      clearTimers() {
+        this.clearShowTimer();
+        this.clearHideTimer();
+      }
+      setInteractionOpen(nextOpen, trigger) {
+        if (this.internalOpen === nextOpen)
+          return;
+        this.internalOpen = nextOpen;
+        dispatchDetail(this.host, nextOpen ? "open" : "close", {
+          open: nextOpen,
+          reason: "action",
+          trigger
+        });
+      }
       onTriggerEnter = () => {
-        this.internalOpen = true;
-        dispatchDetail(this.host, "open", { open: true, reason: "action", trigger: "pointer" });
-        this.syncOverlay();
+        this.clearHideTimer();
+        if (this.internalOpen || this.showTimer !== null)
+          return;
+        this.showTimer = setTimeout(() => {
+          this.showTimer = null;
+          this.setInteractionOpen(true, "pointer");
+        }, Math.max(0, this.showDelay));
       };
       onTriggerLeave = () => {
-        this.internalOpen = false;
-        dispatchDetail(this.host, "close", { open: false, reason: "action", trigger: "pointer" });
-        this.syncOverlay();
+        this.clearShowTimer();
+        if (!this.internalOpen || this.hideTimer !== null)
+          return;
+        this.hideTimer = setTimeout(() => {
+          this.hideTimer = null;
+          this.setInteractionOpen(false, "pointer");
+        }, Math.max(0, this.hideDelay));
       };
       onTriggerFocusIn = () => {
-        this.internalOpen = true;
-        dispatchDetail(this.host, "open", { open: true, reason: "action", trigger: "keyboard" });
-        this.syncOverlay();
+        this.clearTimers();
+        this.setInteractionOpen(true, "keyboard");
       };
       onTriggerFocusOut = (e) => {
         const related = e.relatedTarget;
         if (related && this.host.contains(related))
           return;
-        this.internalOpen = false;
-        dispatchDetail(this.host, "close", { open: false, reason: "action", trigger: "keyboard" });
-        this.syncOverlay();
+        this.clearTimers();
+        this.setInteractionOpen(false, "keyboard");
       };
       handleRequestClose(reason, trigger) {
         if (reason === "escape") {
+          this.clearTimers();
           this.internalOpen = false;
           dispatchDetail(this.host, "close", {
             open: false,
@@ -2423,13 +2900,19 @@ var init_ui_tooltip_entry = __esm({
         }
       };
       render() {
-        return h(Host, { key: "64b5f4e7a56cbf5560edc6d7118022a49d5e2786", role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "cf6f96689021a42a01b782f0e1d0730b5a9aa1f8" }));
+        return h(Host, { key: "4c3890a7371508ede06a5b370d1cec32db25280f", role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "2e3bcd0dc69b0c3e3376d73dc4efc82e4f4cfaaa" }));
       }
       static get watchers() {
         return {
           "open": [{
             "syncFromProp": 0
           }],
+          "for": [{
+            "resetSurface": 0
+          }],
+          "placement": [{
+            "resetSurface": 0
+          }],
           "internalOpen": [{
             "syncOverlay": 0
           }]
@@ -2775,7 +3258,7 @@ var init_ui_tree_item_entry = __esm({
       underline: Underline,
       undo: Undo2
     };
-    uiTreeItemCss = () => `:host{--ui-tree-indent:16px;--ui-tree-row-min-height:44px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease),     opacity var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}@media (hover: none), (pointer: coarse){.drag-handle{display:none}}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}`;
+    uiTreeItemCss = () => `:host{--ui-tree-indent:16px;--ui-tree-row-min-height:32px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;font-size:var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease),     opacity var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     min-block-size var(--ui-motion-base) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}:host-context(html[data-ui-input-modality='touch']){--ui-tree-row-min-height:44px}:host-context(html[data-ui-input-modality='touch']) .drag-handle{display:none}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}`;
     UITreeItem = class {
       constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -4695,14 +5178,17 @@ var index_exports = {};
 __export(index_exports, {
   DEFAULT_AFFORDANCE_NEAR_RADIUS: () => DEFAULT_AFFORDANCE_NEAR_RADIUS2,
   LOOMA_ICONS: () => LOOMA_ICONS2,
-  clampRectToViewport: () => clampRectToViewport,
+  clampRectToViewport: () => clampRectToViewport2,
   classifyDropPosition: () => classifyDropPosition2,
   closeOverlay: () => closeOverlay2,
+  createAnchoredSurface: () => createAnchoredSurface2,
   createHoverIntent: () => createHoverIntent2,
   createProximityCoordinator: () => createProximityCoordinator2,
+  createViewportSurface: () => createViewportSurface2,
   distanceFromPointToRect: () => distanceFromPointToRect2,
   getTopOverlay: () => getTopOverlay2,
-  getVisualViewportRect: () => getVisualViewportRect,
+  getVisualViewportRect: () => getVisualViewportRect2,
+  initializeInputModality: () => initializeInputModality,
   isTopOverlay: () => isTopOverlay,
   loomaIconMarkup: () => loomaIconMarkup2,
   openOverlay: () => openOverlay2,
@@ -4723,7 +5209,7 @@ var globalScripts = () => {
 var defineCustomElements = async (win2, options) => {
   if (typeof window === "undefined") return void 0;
   await globalScripts();
-  return bootstrapLazy([["ui-context-menu", [[769, "ui-context-menu", { "open": [4], "defaultOpen": [4, "default-open"], "for": [1], "internalOpen": [32] }, null, { "open": [{ "syncFromProp": 0 }], "for": [{ "syncTarget": 0 }], "internalOpen": [{ "syncOverlay": 0 }] }]]], ["ui-affordance-scope", [[769, "ui-affordance-scope", { "nearRadius": [514, "near-radius"] }, null, { "nearRadius": [{ "connectCoordinator": 0 }] }]]], ["ui-avatar", [[513, "ui-avatar", { "src": [1], "alt": [1], "name": [1], "fallback": [1], "hasImage": [32] }, null, { "src": [{ "watchSrc": 0 }] }]]], ["ui-avatar-group", [[769, "ui-avatar-group", { "max": [2], "label": [1], "overflowCount": [32] }, null, { "max": [{ "syncOverflow": 0 }] }]]], ["ui-badge", [[769, "ui-badge", { "variant": [1], "tone": [1] }]]], ["ui-button", [[769, "ui-button", { "variant": [1], "size": [1], "disabled": [4] }, null, { "variant": [{ "syncToButton": 0 }], "size": [{ "syncToButton": 0 }], "disabled": [{ "syncToButton": 0 }] }]]], ["ui-checkbox", [[769, "ui-checkbox", { "checked": [4], "defaultChecked": [4, "default-checked"], "disabled": [4], "indeterminate": [4], "required": [4], "value": [1], "internalChecked": [32] }, null, { "checked": [{ "syncFromProp": 0 }], "internalChecked": [{ "syncToInput": 0 }], "indeterminate": [{ "syncToInput": 0 }], "disabled": [{ "syncToInput": 0 }], "required": [{ "syncToInput": 0 }] }]]], ["ui-dialog", [[769, "ui-dialog", { "open": [4], "defaultOpen": [4, "default-open"], "modal": [4], "dismissible": [4], "label": [1], "internalOpen": [32] }, null, { "open": [{ "syncFromProp": 0 }], "internalOpen": [{ "syncOpen": 0 }] }]]], ["ui-disclosure", [[769, "ui-disclosure", { "open": [4], "defaultOpen": [4, "default-open"], "disabled": [4], "internalOpen": [32], "contentId": [32] }, null, { "open": [{ "syncFromProp": 0 }], "internalOpen": [{ "syncState": 0 }] }]]], ["ui-floating-action-button", [[769, "ui-floating-action-button", { "disabled": [516], "mobileOnly": [516, "mobile-only"], "label": [1] }]]], ["ui-form-field", [[769, "ui-form-field", { "invalid": [4], "disabled": [4], "required": [4] }]]], ["ui-icon-button", [[769, "ui-icon-button", { "disabled": [516], "label": [1], "size": [513], "variant": [513], "anticipatory": [516] }]]], ["ui-input", [[769, "ui-input", { "value": [1], "defaultValue": [1, "default-value"], "disabled": [4], "invalid": [4], "readOnly": [4, "readonly"], "internalValue": [32] }, null, { "value": [{ "syncFromProp": 0 }], "internalValue": [{ "syncToInput": 0 }], "defaultValue": [{ "syncToInput": 0 }], "disabled": [{ "syncToInput": 0 }], "invalid": [{ "syncToInput": 0 }], "readOnly": [{ "syncToInput": 0 }] }]]], ["ui-menu-item", [[769, "ui-menu-item", { "disabled": [516], "value": [1] }]]], ["ui-popover", [[769, "ui-popover", { "open": [4], "defaultOpen": [4, "default-open"], "internalOpen": [32] }, null, { "open": [{ "syncFromProp": 0 }], "internalOpen": [{ "onOpenChange": 0 }] }]]], ["ui-radio", [[769, "ui-radio", { "checked": [4], "defaultChecked": [4, "default-checked"], "disabled": [4], "name": [1], "required": [4], "value": [1] }, null, { "checked": [{ "syncToInput": 0 }], "disabled": [{ "syncToInput": 0 }], "name": [{ "syncToInput": 0 }], "required": [{ "syncToInput": 0 }], "value": [{ "syncToInput": 0 }] }]]], ["ui-radio-group", [[769, "ui-radio-group", { "value": [1], "name": [1], "orientation": [1], "disabled": [4], "required": [4], "internalValue": [32] }, null, { "value": [{ "syncFromProp": 0 }], "internalValue": [{ "syncToRadios": 0 }], "name": [{ "syncToRadios": 0 }], "orientation": [{ "syncToRadios": 0 }], "disabled": [{ "syncToRadios": 0 }] }]]], ["ui-search-result-row", [[769, "ui-search-result-row", { "disabled": [516], "selected": [516], "hasLeading": [32], "hasMeta": [32], "hasExcerpt": [32], "hasTrailing": [32] }]]], ["ui-search-shell", [[769, "ui-search-shell", { "hasStatus": [32], "hasFooter": [32] }]]], ["ui-select", [[769, "ui-select", { "value": [1], "defaultValue": [1, "default-value"], "disabled": [4], "invalid": [4], "required": [4], "internalValue": [32] }, null, { "value": [{ "syncFromProp": 0 }], "internalValue": [{ "syncToSelect": 0 }], "defaultValue": [{ "syncToSelect": 0 }], "disabled": [{ "syncToSelect": 0 }], "invalid": [{ "syncToSelect": 0 }], "required": [{ "syncToSelect": 0 }] }]]], ["ui-switch", [[769, "ui-switch", { "checked": [4], "defaultChecked": [4, "default-checked"], "disabled": [4], "required": [4], "value": [1], "internalChecked": [32] }, null, { "checked": [{ "syncFromProp": 0 }] }]]], ["ui-tabs", [[769, "ui-tabs", { "value": [1], "defaultValue": [1, "default-value"], "orientation": [1], "internalValue": [32] }, null, { "value": [{ "syncFromProp": 0 }], "internalValue": [{ "syncState": 0 }], "orientation": [{ "syncState": 0 }] }]]], ["ui-textarea", [[769, "ui-textarea", { "value": [1], "defaultValue": [1, "default-value"], "disabled": [4], "invalid": [4], "readOnly": [4, "readonly"], "rows": [2], "internalValue": [32] }, null, { "value": [{ "syncFromProp": 0 }], "internalValue": [{ "syncToTextarea": 0 }], "defaultValue": [{ "syncToTextarea": 0 }], "disabled": [{ "syncToTextarea": 0 }], "invalid": [{ "syncToTextarea": 0 }], "readOnly": [{ "syncToTextarea": 0 }], "rows": [{ "syncToTextarea": 0 }] }]]], ["ui-toast-region", [[769, "ui-toast-region", { "open": [4], "internalOpen": [32] }, null, { "open": [{ "syncFromProp": 0 }] }]]], ["ui-tooltip", [[769, "ui-tooltip", { "for": [1], "open": [4], "defaultOpen": [4, "default-open"], "internalOpen": [32] }, null, { "open": [{ "syncFromProp": 0 }], "internalOpen": [{ "syncOverlay": 0 }] }]]], ["ui-top-bar", [[769, "ui-top-bar", { "hasLeading": [32], "hasSearch": [32], "hasActions": [32] }]]], ["ui-tree", [[769, "ui-tree", { "label": [1], "hoverExpandDelay": [2, "hover-expand-delay"] }]]], ["ui-tree-item", [[769, "ui-tree-item", { "itemId": [1, "item-id"], "label": [1], "depth": [2], "container": [4], "sortable": [4], "dragType": [1, "drag-type"], "dropScope": [1, "drop-scope"], "accepts": [1], "expanded": [4], "defaultExpanded": [4, "default-expanded"], "selected": [4], "disabled": [4], "internalExpanded": [32] }, null, { "expanded": [{ "syncExpandedFromProp": 0 }] }]]], ["ui-menu", [[769, "ui-menu", { "open": [4], "defaultOpen": [4, "default-open"], "internalOpen": [32] }, null, { "open": [{ "syncFromProp": 0 }] }]]]], options);
+  return bootstrapLazy([["ui-context-menu", [[769, "ui-context-menu", { "open": [4], "defaultOpen": [4, "default-open"], "for": [1], "internalOpen": [32] }, null, { "open": [{ "syncFromProp": 0 }], "for": [{ "syncTarget": 0 }], "internalOpen": [{ "syncOverlay": 0 }] }]]], ["ui-affordance-scope", [[769, "ui-affordance-scope", { "nearRadius": [514, "near-radius"] }, null, { "nearRadius": [{ "connectCoordinator": 0 }] }]]], ["ui-avatar", [[513, "ui-avatar", { "src": [1], "alt": [1], "name": [1], "fallback": [1], "hasImage": [32] }, null, { "src": [{ "watchSrc": 0 }] }]]], ["ui-avatar-group", [[769, "ui-avatar-group", { "max": [2], "label": [1], "overflowCount": [32] }, null, { "max": [{ "syncOverflow": 0 }] }]]], ["ui-badge", [[769, "ui-badge", { "variant": [1], "tone": [1] }]]], ["ui-button", [[769, "ui-button", { "variant": [1], "size": [1], "disabled": [4] }, null, { "variant": [{ "syncToButton": 0 }], "size": [{ "syncToButton": 0 }], "disabled": [{ "syncToButton": 0 }] }]]], ["ui-checkbox", [[769, "ui-checkbox", { "checked": [4], "defaultChecked": [4, "default-checked"], "disabled": [4], "indeterminate": [4], "required": [4], "value": [1], "internalChecked": [32] }, null, { "checked": [{ "syncFromProp": 0 }], "internalChecked": [{ "syncToInput": 0 }], "indeterminate": [{ "syncToInput": 0 }], "disabled": [{ "syncToInput": 0 }], "required": [{ "syncToInput": 0 }] }]]], ["ui-dialog", [[769, "ui-dialog", { "open": [4], "defaultOpen": [4, "default-open"], "modal": [4], "dismissible": [4], "label": [1], "internalOpen": [32] }, null, { "open": [{ "syncFromProp": 0 }], "internalOpen": [{ "syncOpen": 0 }] }]]], ["ui-disclosure", [[769, "ui-disclosure", { "open": [4], "defaultOpen": [4, "default-open"], "disabled": [4], "internalOpen": [32], "contentId": [32] }, null, { "open": [{ "syncFromProp": 0 }], "internalOpen": [{ "syncState": 0 }] }]]], ["ui-floating-action-button", [[769, "ui-floating-action-button", { "disabled": [516], "mobileOnly": [516, "mobile-only"], "label": [1] }]]], ["ui-form-field", [[769, "ui-form-field", { "invalid": [4], "disabled": [4], "required": [4] }]]], ["ui-icon-button", [[769, "ui-icon-button", { "disabled": [516], "label": [1], "size": [513], "variant": [513], "anticipatory": [516] }]]], ["ui-input", [[769, "ui-input", { "value": [1], "defaultValue": [1, "default-value"], "disabled": [4], "invalid": [4], "readOnly": [4, "readonly"], "internalValue": [32] }, null, { "value": [{ "syncFromProp": 0 }], "internalValue": [{ "syncToInput": 0 }], "defaultValue": [{ "syncToInput": 0 }], "disabled": [{ "syncToInput": 0 }], "invalid": [{ "syncToInput": 0 }], "readOnly": [{ "syncToInput": 0 }] }]]], ["ui-menu-item", [[769, "ui-menu-item", { "disabled": [516], "value": [1] }]]], ["ui-popover", [[769, "ui-popover", { "open": [4], "defaultOpen": [4, "default-open"], "for": [1], "placement": [1], "internalOpen": [32] }, null, { "open": [{ "syncFromProp": 0 }], "internalOpen": [{ "onOpenChange": 0 }], "for": [{ "resetSurface": 0 }], "placement": [{ "resetSurface": 0 }] }]]], ["ui-radio", [[769, "ui-radio", { "checked": [4], "defaultChecked": [4, "default-checked"], "disabled": [4], "name": [1], "required": [4], "value": [1] }, null, { "checked": [{ "syncToInput": 0 }], "disabled": [{ "syncToInput": 0 }], "name": [{ "syncToInput": 0 }], "required": [{ "syncToInput": 0 }], "value": [{ "syncToInput": 0 }] }]]], ["ui-radio-group", [[769, "ui-radio-group", { "value": [1], "name": [1], "orientation": [1], "disabled": [4], "required": [4], "internalValue": [32] }, null, { "value": [{ "syncFromProp": 0 }], "internalValue": [{ "syncToRadios": 0 }], "name": [{ "syncToRadios": 0 }], "orientation": [{ "syncToRadios": 0 }], "disabled": [{ "syncToRadios": 0 }] }]]], ["ui-search-result-row", [[769, "ui-search-result-row", { "disabled": [516], "selected": [516], "hasLeading": [32], "hasMeta": [32], "hasExcerpt": [32], "hasTrailing": [32] }]]], ["ui-search-shell", [[769, "ui-search-shell", { "hasStatus": [32], "hasFooter": [32] }]]], ["ui-select", [[769, "ui-select", { "value": [1], "defaultValue": [1, "default-value"], "disabled": [4], "invalid": [4], "required": [4], "internalValue": [32] }, null, { "value": [{ "syncFromProp": 0 }], "internalValue": [{ "syncToSelect": 0 }], "defaultValue": [{ "syncToSelect": 0 }], "disabled": [{ "syncToSelect": 0 }], "invalid": [{ "syncToSelect": 0 }], "required": [{ "syncToSelect": 0 }] }]]], ["ui-switch", [[769, "ui-switch", { "checked": [4], "defaultChecked": [4, "default-checked"], "disabled": [4], "required": [4], "value": [1], "internalChecked": [32] }, null, { "checked": [{ "syncFromProp": 0 }] }]]], ["ui-tabs", [[769, "ui-tabs", { "value": [1], "defaultValue": [1, "default-value"], "orientation": [1], "internalValue": [32] }, null, { "value": [{ "syncFromProp": 0 }], "internalValue": [{ "syncState": 0 }], "orientation": [{ "syncState": 0 }] }]]], ["ui-textarea", [[769, "ui-textarea", { "value": [1], "defaultValue": [1, "default-value"], "disabled": [4], "invalid": [4], "readOnly": [4, "readonly"], "rows": [2], "internalValue": [32] }, null, { "value": [{ "syncFromProp": 0 }], "internalValue": [{ "syncToTextarea": 0 }], "defaultValue": [{ "syncToTextarea": 0 }], "disabled": [{ "syncToTextarea": 0 }], "invalid": [{ "syncToTextarea": 0 }], "readOnly": [{ "syncToTextarea": 0 }], "rows": [{ "syncToTextarea": 0 }] }]]], ["ui-toast-region", [[769, "ui-toast-region", { "open": [4], "internalOpen": [32] }, null, { "open": [{ "syncFromProp": 0 }], "internalOpen": [{ "syncSurface": 0 }] }]]], ["ui-tooltip", [[769, "ui-tooltip", { "for": [1], "open": [4], "defaultOpen": [4, "default-open"], "placement": [1], "showDelay": [2, "show-delay"], "hideDelay": [2, "hide-delay"], "internalOpen": [32] }, null, { "open": [{ "syncFromProp": 0 }], "for": [{ "resetSurface": 0 }], "placement": [{ "resetSurface": 0 }], "internalOpen": [{ "syncOverlay": 0 }] }]]], ["ui-top-bar", [[769, "ui-top-bar", { "hasLeading": [32], "hasSearch": [32], "hasActions": [32] }]]], ["ui-tree", [[769, "ui-tree", { "label": [1], "hoverExpandDelay": [2, "hover-expand-delay"] }]]], ["ui-tree-item", [[769, "ui-tree-item", { "itemId": [1, "item-id"], "label": [1], "depth": [2], "container": [4], "sortable": [4], "dragType": [1, "drag-type"], "dropScope": [1, "drop-scope"], "accepts": [1], "expanded": [4], "defaultExpanded": [4, "default-expanded"], "selected": [4], "disabled": [4], "internalExpanded": [32] }, null, { "expanded": [{ "syncExpandedFromProp": 0 }] }]]], ["ui-menu", [[769, "ui-menu", { "open": [4], "defaultOpen": [4, "default-open"], "for": [1], "placement": [1], "internalOpen": [32] }, null, { "open": [{ "syncFromProp": 0 }], "for": [{ "resetSurface": 0 }], "placement": [{ "resetSurface": 0 }], "internalOpen": [{ "syncSurface": 0 }] }]]]], options);
 };
 
 // loader/index.js
@@ -4739,6 +5225,24 @@ var defineCustomElements = async (win2, options) => {
   }
 })();
 
+// src/input-modality.ts
+var initializedDocuments = /* @__PURE__ */ new WeakSet();
+function initializeInputModality(owner = document) {
+  if (initializedDocuments.has(owner)) return;
+  initializedDocuments.add(owner);
+  const markTouch = () => {
+    if (owner.documentElement.getAttribute("data-ui-input-modality") === "touch") return;
+    owner.documentElement.setAttribute("data-ui-input-modality", "touch");
+    owner.dispatchEvent(new CustomEvent("ui-input-modality-change", {
+      detail: { modality: "touch" }
+    }));
+  };
+  owner.addEventListener("pointerdown", (event) => {
+    if (event.pointerType === "touch") markTouch();
+  }, { capture: true, passive: true });
+  owner.addEventListener("touchstart", markTouch, { capture: true, passive: true });
+}
+
 // src/overlay/manager.ts
 var stack2 = [];
 var scrollLockAttribute2 = "data-ui-scroll-lock";
@@ -4772,8 +5276,9 @@ function handleLightDismiss2(event) {
     return;
   }
   const target = event.target;
-  if (target instanceof Node && top.element.contains(target)) {
-    return;
+  if (target instanceof Node) {
+    if (top.element.contains(target)) return;
+    if (top.relatedElements?.some((element) => element.contains(target))) return;
   }
   requestTopOverlayClose2("light-dismiss", "pointer");
 }
@@ -4833,7 +5338,215 @@ function requestTopOverlayClose2(reason, trigger) {
 
 // src/overlay/positioning.ts
 var DEFAULT_AFFORDANCE_NEAR_RADIUS2 = 16;
-function getVisualViewportRect(owner = window) {
+var anchorSequence2 = 0;
+var anchorBindings2 = /* @__PURE__ */ new WeakMap();
+function bindAnchorName2(anchor, name) {
+  const binding = anchorBindings2.get(anchor) ?? {
+    original: anchor.style.getPropertyValue("anchor-name"),
+    names: /* @__PURE__ */ new Set()
+  };
+  binding.names.add(name);
+  anchorBindings2.set(anchor, binding);
+  const values = [binding.original, ...binding.names].filter(Boolean);
+  anchor.style.setProperty("anchor-name", values.join(", "));
+}
+function unbindAnchorName2(anchor, name) {
+  const binding = anchorBindings2.get(anchor);
+  if (!binding) return;
+  binding.names.delete(name);
+  if (binding.names.size) {
+    const values = [binding.original, ...binding.names].filter(Boolean);
+    anchor.style.setProperty("anchor-name", values.join(", "));
+    return;
+  }
+  if (binding.original) anchor.style.setProperty("anchor-name", binding.original);
+  else anchor.style.removeProperty("anchor-name");
+  anchorBindings2.delete(anchor);
+}
+function supportsAnchorPositioning2(owner) {
+  const css = owner.CSS;
+  return typeof css?.supports === "function" && css.supports("anchor-name: --ui-anchor-test") && css.supports("position-anchor: --ui-anchor-test") && css.supports("top: anchor(bottom)");
+}
+function topLayerOpen2(surface) {
+  try {
+    return surface.matches(":popover-open");
+  } catch {
+    return !surface.hidden;
+  }
+}
+function showInTopLayer2(surface) {
+  surface.setAttribute("popover", "manual");
+  surface.hidden = false;
+  if (typeof surface.showPopover === "function" && !topLayerOpen2(surface)) {
+    try {
+      surface.showPopover();
+    } catch {
+    }
+  }
+}
+function hideFromTopLayer2(surface) {
+  if (typeof surface.hidePopover === "function" && topLayerOpen2(surface)) {
+    try {
+      surface.hidePopover();
+    } catch {
+    }
+  }
+  surface.hidden = true;
+}
+function createViewportSurface2(surface) {
+  surface.setAttribute("popover", "manual");
+  surface.dataset.uiPositioning = "viewport";
+  return {
+    show() {
+      showInTopLayer2(surface);
+    },
+    hide() {
+      hideFromTopLayer2(surface);
+    },
+    destroy() {
+      hideFromTopLayer2(surface);
+    }
+  };
+}
+function fallbackPosition2(surface, anchor, placement, gap, viewportGap) {
+  const owner = surface.ownerDocument.defaultView ?? window;
+  const viewport = getVisualViewportRect2(owner);
+  const rect = surface.getBoundingClientRect();
+  const preferTop = placement.startsWith("top");
+  const preferEnd = placement.endsWith("end");
+  const spaceBelow = viewport.bottom - anchor.bottom - viewportGap;
+  const spaceAbove = anchor.top - viewport.top - viewportGap;
+  const useTop = preferTop ? !(spaceAbove < rect.height + gap && spaceBelow > spaceAbove) : spaceBelow < rect.height + gap && spaceAbove > spaceBelow;
+  const unclampedTop = useTop ? anchor.top - rect.height - gap : anchor.bottom + gap;
+  const unclampedLeft = preferEnd ? anchor.right - rect.width : anchor.left;
+  const shifted = clampRectToViewport2({
+    left: unclampedLeft,
+    top: unclampedTop,
+    right: unclampedLeft + rect.width,
+    bottom: unclampedTop + rect.height,
+    width: rect.width,
+    height: rect.height
+  }, viewport, viewportGap);
+  surface.style.left = `${Math.round(unclampedLeft + shifted.x)}px`;
+  surface.style.top = `${Math.round(unclampedTop + shifted.y)}px`;
+  surface.style.right = "auto";
+  surface.style.bottom = "auto";
+}
+function createAnchoredSurface2(surface, options = {}) {
+  const owner = surface.ownerDocument.defaultView ?? window;
+  const placement = options.placement ?? "bottom-start";
+  const gap = Math.max(0, options.gap ?? 4);
+  const viewportGap = Math.max(0, options.viewportGap ?? 8);
+  const nativeAnchor = supportsAnchorPositioning2(owner);
+  const anchorName = `--ui-anchor-${++anchorSequence2}`;
+  let anchor = options.anchor ?? null;
+  let point = null;
+  let open = false;
+  let frame = null;
+  let listenerAbort = null;
+  surface.setAttribute("popover", "manual");
+  surface.dataset.uiPositioning = nativeAnchor ? "anchor" : "fallback";
+  surface.style.position = "fixed";
+  surface.style.margin = "0";
+  const bindAnchor = (next) => {
+    if (anchor) unbindAnchorName2(anchor, anchorName);
+    anchor = next;
+    if (!anchor) {
+      surface.style.removeProperty("position-anchor");
+      return;
+    }
+    bindAnchorName2(anchor, anchorName);
+    surface.style.setProperty("position-anchor", anchorName);
+  };
+  const positionNative = () => {
+    const blockEnd = placement.startsWith("bottom");
+    const inlineEnd = placement.endsWith("end");
+    surface.style.top = blockEnd ? `calc(anchor(bottom) + ${gap}px)` : "auto";
+    surface.style.bottom = blockEnd ? "auto" : `calc(anchor(top) + ${gap}px)`;
+    surface.style.left = inlineEnd ? "auto" : "anchor(left)";
+    surface.style.right = inlineEnd ? "anchor(right)" : "auto";
+    surface.style.setProperty("position-try-fallbacks", "flip-block, flip-inline");
+  };
+  const position = () => {
+    frame = null;
+    if (!open) return;
+    if (point) {
+      fallbackPosition2(surface, {
+        left: point.x,
+        right: point.x,
+        top: point.y,
+        bottom: point.y,
+        width: 0,
+        height: 0
+      }, "bottom-start", gap, viewportGap);
+      return;
+    }
+    if (!anchor) return;
+    if (nativeAnchor) positionNative();
+    else fallbackPosition2(surface, anchor.getBoundingClientRect(), placement, gap, viewportGap);
+  };
+  const schedule = () => {
+    if (!open || frame !== null) return;
+    frame = owner.requestAnimationFrame(position);
+  };
+  const syncFallbackListeners = () => {
+    const needsListeners = open && (point !== null || !nativeAnchor);
+    if (!needsListeners) {
+      listenerAbort?.abort();
+      listenerAbort = null;
+      return;
+    }
+    if (listenerAbort) return;
+    listenerAbort = new AbortController();
+    const signal = listenerAbort.signal;
+    owner.addEventListener("resize", schedule, { passive: true, signal });
+    owner.addEventListener("scroll", schedule, { passive: true, capture: true, signal });
+    owner.visualViewport?.addEventListener("resize", schedule, { passive: true, signal });
+    owner.visualViewport?.addEventListener("scroll", schedule, { passive: true, signal });
+  };
+  bindAnchor(anchor);
+  return {
+    setAnchor(next) {
+      point = null;
+      bindAnchor(next);
+      syncFallbackListeners();
+      schedule();
+    },
+    show() {
+      point = null;
+      open = true;
+      syncFallbackListeners();
+      showInTopLayer2(surface);
+      position();
+    },
+    showAtPoint(nextPoint) {
+      point = nextPoint;
+      open = true;
+      syncFallbackListeners();
+      showInTopLayer2(surface);
+      position();
+    },
+    hide() {
+      open = false;
+      point = null;
+      syncFallbackListeners();
+      if (frame !== null) owner.cancelAnimationFrame(frame);
+      frame = null;
+      hideFromTopLayer2(surface);
+    },
+    refresh: schedule,
+    destroy() {
+      open = false;
+      listenerAbort?.abort();
+      listenerAbort = null;
+      if (frame !== null) owner.cancelAnimationFrame(frame);
+      frame = null;
+      hideFromTopLayer2(surface);
+      bindAnchor(null);
+    }
+  };
+}
+function getVisualViewportRect2(owner = window) {
   const viewport = owner.visualViewport;
   const left = viewport?.offsetLeft ?? 0;
   const top = viewport?.offsetTop ?? 0;
@@ -4848,7 +5561,7 @@ function getVisualViewportRect(owner = window) {
     height
   };
 }
-function clampRectToViewport(rect, viewport = getVisualViewportRect(), gutter = 0) {
+function clampRectToViewport2(rect, viewport = getVisualViewportRect2(), gutter = 0) {
   const availableWidth = Math.max(0, viewport.width - gutter * 2);
   const availableHeight = Math.max(0, viewport.height - gutter * 2);
   const targetLeft = rect.width > availableWidth ? viewport.left + gutter : Math.min(
@@ -5056,6 +5769,7 @@ function createHoverIntent2(delay, onIntent) {
 }
 
 // index.ts
+if (typeof document !== "undefined") initializeInputModality(document);
 defineCustomElements();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -5064,11 +5778,14 @@ defineCustomElements();
   clampRectToViewport,
   classifyDropPosition,
   closeOverlay,
+  createAnchoredSurface,
   createHoverIntent,
   createProximityCoordinator,
+  createViewportSurface,
   distanceFromPointToRect,
   getTopOverlay,
   getVisualViewportRect,
+  initializeInputModality,
   isTopOverlay,
   loomaIconMarkup,
   openOverlay,