uidex 0.5.2 → 0.7.0

package/dist/headless/index.js

@@ -18,11 +18,6 @@ function isMetaEntity(entity) {
 function entityKey(entity) {
   return entity.kind === "route" ? entity.path : entity.id;
 }
-function sameRef(a, b) {
-  if (a === b) return true;
-  if (a === null || b === null) return false;
-  return a.kind === b.kind && a.id === b.id;
-}
 var UnknownEntityKindError = class extends Error {
   kind;
   constructor(kind) {
@@ -67,6 +62,7 @@ function freezeEntity(entity, flows) {
 function createRegistry() {
   const store = emptyStore();
   let flowsCache = null;
+  const patternCache = /* @__PURE__ */ new Map();
   const getFlows = () => {
     if (flowsCache === null) flowsCache = Array.from(store.flow.values());
     return flowsCache;
@@ -76,6 +72,7 @@ function createRegistry() {
     const key = entityKey(entity);
     store[entity.kind].set(key, entity);
     flowsCache = null;
+    patternCache.delete(entity.kind);
   };
   const get = (kind, id) => {
     assertEntityKind(kind);
@@ -83,6 +80,51 @@ function createRegistry() {
     if (raw === void 0) return void 0;
     return freezeEntity(raw, getFlows());
   };
+  const getPatternsForKind = (kind) => {
+    const cached = patternCache.get(kind);
+    if (cached !== void 0) return cached;
+    const patterns = [];
+    for (const [key, entity] of store[kind]) {
+      if (key.includes("*")) {
+        const segments = key.split("*");
+        patterns.push({
+          segments,
+          staticLength: segments.reduce((n, s) => n + s.length, 0),
+          entity
+        });
+      }
+    }
+    patternCache.set(
+      kind,
+      patterns
+    );
+    return patterns;
+  };
+  const matchesSegments = (segments, id) => {
+    const first = segments[0];
+    const last = segments[segments.length - 1];
+    if (!id.startsWith(first)) return false;
+    let pos = first.length;
+    for (let i = 1; i < segments.length - 1; i++) {
+      const idx = id.indexOf(segments[i], pos);
+      if (idx === -1) return false;
+      pos = idx + segments[i].length;
+    }
+    return id.endsWith(last) && id.length - last.length >= pos;
+  };
+  const matchPattern = (kind, id) => {
+    assertEntityKind(kind);
+    const patterns = getPatternsForKind(kind);
+    if (patterns.length === 0) return void 0;
+    let best;
+    for (const entry of patterns) {
+      if (matchesSegments(entry.segments, id) && (best === void 0 || entry.staticLength > best.staticLength)) {
+        best = entry;
+      }
+    }
+    if (best === void 0) return void 0;
+    return freezeEntity(best.entity, getFlows());
+  };
   const list = (kind) => {
     assertEntityKind(kind);
     const flows = getFlows();
@@ -133,6 +175,7 @@ function createRegistry() {
   return {
     add,
     get,
+    matchPattern,
     list,
     query,
     byScope,
@@ -266,8 +309,7 @@ var COMMAND_PALETTE_ENTRY = {
 function createModeStore(options) {
   const { nav, bindings } = options;
   const store = createStore(() => ({
-    mode: "idle",
-    inspectorActive: false
+    mode: "idle"
   }));
   const transition = {
     openPalette() {
@@ -276,17 +318,17 @@ function createModeStore(options) {
         bindings?.destroyInspector?.();
       }
       nav.nav.reset([COMMAND_PALETTE_ENTRY]);
-      store.setState({ mode: "palette", inspectorActive: false });
+      store.setState({ mode: "palette" });
     },
     openInspector() {
       bindings?.mountInspector?.();
       nav.nav.clear();
-      store.setState({ mode: "inspecting", inspectorActive: true });
+      store.setState({ mode: "inspecting" });
     },
     closeInspector() {
       bindings?.destroyInspector?.();
       nav.nav.clear();
-      store.setState({ mode: "idle", inspectorActive: false });
+      store.setState({ mode: "idle" });
     },
     toggleInspector() {
       if (store.getState().mode === "inspecting") {
@@ -301,7 +343,7 @@ function createModeStore(options) {
         bindings?.destroyInspector?.();
       }
       nav.nav.reset(initialStack);
-      store.setState({ mode: "viewing", inspectorActive: false });
+      store.setState({ mode: "viewing" });
     },
     dismiss() {
       const prev = store.getState();
@@ -309,7 +351,7 @@ function createModeStore(options) {
         bindings?.destroyInspector?.();
       }
       nav.nav.clear();
-      store.setState({ mode: "idle", inspectorActive: false });
+      store.setState({ mode: "idle" });
     },
     popOrTransition() {
       const { stack } = nav.getState();
@@ -317,12 +359,12 @@ function createModeStore(options) {
         nav.nav.pop();
       } else if (stack.length === 2 && stack[0]?.id === "command-palette") {
         nav.nav.reset([COMMAND_PALETTE_ENTRY]);
-        store.setState({ mode: "palette", inspectorActive: false });
+        store.setState({ mode: "palette" });
       } else if (stack.length === 2) {
         nav.nav.pop();
       } else {
         nav.nav.clear();
-        store.setState({ mode: "idle", inspectorActive: false });
+        store.setState({ mode: "idle" });
       }
     },
     pushView(entry) {
@@ -339,7 +381,7 @@ function createModeStore(options) {
         case "inspecting":
           bindings?.destroyInspector?.();
           nav.nav.reset([entry]);
-          store.setState({ mode: "viewing", inspectorActive: false });
+          store.setState({ mode: "viewing" });
           break;
         case "palette":
         case "viewing":
@@ -374,14 +416,6 @@ function createNavigationStore() {
         store.setState({ stack: s.slice(0, -1) });
       }
     },
-    replace(entry) {
-      const s = store.getState().stack;
-      if (s.length === 0) {
-        store.setState({ stack: [entry] });
-      } else {
-        store.setState({ stack: [...s.slice(0, -1), entry] });
-      }
-    },
     clear() {
       store.setState({ stack: [] });
     },
@@ -396,14 +430,11 @@ function createNavigationStore() {
 
 // src/browser/session/store.ts
 var defaultSnapshot = {
-  hover: null,
-  selection: null,
   stack: [],
   pinnedHighlight: null,
-  inspectorActive: false,
+  mode: "idle",
   theme: "auto",
   resolvedTheme: "light",
-  ingestActive: false,
   user: null
 };
 function resolveTheme(preference, detect) {
@@ -454,7 +485,6 @@ function createSession(options = {}) {
       } else if (highlightMode === "transient") {
         onUpdateOverlay?.(hlCtx);
       }
-      store.setState({ hover: ref });
     },
     unhover() {
       if (highlightMode === "transient") {
@@ -464,7 +494,6 @@ function createSession(options = {}) {
         hlCtx.color = null;
         onHideOverlay?.();
       }
-      store.setState({ hover: null });
     },
     pin(ref) {
       const pinRef = ref ?? hlCtx.ref;
@@ -492,14 +521,11 @@ function createSession(options = {}) {
   };
   const store = createStore3(() => ({
     ...defaultSnapshot,
-    hover: overrides.hover ?? null,
-    selection: overrides.selection ?? null,
     stack: [],
     pinnedHighlight: null,
-    inspectorActive: false,
+    mode: "idle",
     theme: initialPref,
     resolvedTheme: initialResolved,
-    ingestActive: overrides.ingestActive ?? false,
     user: overrides.user ?? null
   }));
   nav.subscribe(() => {
@@ -509,29 +535,21 @@ function createSession(options = {}) {
     }
   });
   modeStore.subscribe(() => {
-    const { inspectorActive } = modeStore.getState();
-    if (store.getState().inspectorActive !== inspectorActive) {
-      store.setState({ inspectorActive });
+    const { mode } = modeStore.getState();
+    if (store.getState().mode !== mode) {
+      store.setState({ mode });
     }
   });
   const session = store;
   session.nav = nav;
   session.mode = modeStore;
   session.highlight = highlightActions;
-  session.select = (ref) => {
-    if (sameRef(store.getState().selection, ref)) return;
-    store.setState({ selection: ref });
-  };
   session.setTheme = (theme, resolved) => {
     const state = store.getState();
     const nextResolved = resolved ?? resolveTheme(theme, detectTheme);
     if (state.theme === theme && state.resolvedTheme === nextResolved) return;
     store.setState({ theme, resolvedTheme: nextResolved });
   };
-  session.setIngest = (active) => {
-    if (store.getState().ingestActive === active) return;
-    store.setState({ ingestActive: active });
-  };
   if (initialStack.length > 0) {
     modeStore.transition.openPalette();
     for (let i = 1; i < initialStack.length; i++) {
@@ -823,6 +841,9 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -841,9 +862,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
-  .right-2 {
-    right: calc(var(--spacing) * 2);
-  }
   .bottom-full {
     bottom: 100%;
   }
@@ -886,9 +904,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
-  .my-1 {
-    margin-block: calc(var(--spacing) * 1);
-  }
   .ms-auto {
     margin-inline-start: auto;
   }
@@ -925,9 +940,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .inline-flex {
     display: inline-flex;
   }
-  .list-item {
-    display: list-item;
-  }
   .table {
     display: table;
   }
@@ -935,10 +947,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
   }
-  .size-3 {
-    width: calc(var(--spacing) * 3);
-    height: calc(var(--spacing) * 3);
-  }
   .size-3\\.5 {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -996,15 +1004,9 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .h-\\[26rem\\] {
     height: 26rem;
   }
-  .h-auto {
-    height: auto;
-  }
   .h-full {
     height: 100%;
   }
-  .h-px {
-    height: 1px;
-  }
   .max-h-32 {
     max-height: calc(var(--spacing) * 32);
   }
@@ -1014,9 +1016,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
-  .min-h-7 {
-    min-height: calc(var(--spacing) * 7);
-  }
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
@@ -1041,9 +1040,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .w-56 {
     width: calc(var(--spacing) * 56);
   }
-  .w-auto {
-    width: auto;
-  }
   .w-full {
     width: 100%;
   }
@@ -1118,9 +1114,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .animate-spin {
     animation: var(--animate-spin);
   }
-  .cursor-default {
-    cursor: default;
-  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -1130,9 +1123,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .scroll-py-2 {
     scroll-padding-block: calc(var(--spacing) * 2);
   }
-  .list-none {
-    list-style-type: none;
-  }
   .appearance-none {
     appearance: none;
   }
@@ -1154,9 +1144,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .justify-center {
     justify-content: center;
   }
-  .justify-start {
-    justify-content: flex-start;
-  }
   .gap-0 {
     gap: calc(var(--spacing) * 0);
   }
@@ -1181,9 +1168,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
-  .self-start {
-    align-self: flex-start;
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1398,9 +1382,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
-  .px-0 {
-    padding-inline: calc(var(--spacing) * 0);
-  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -1425,9 +1406,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .py-0 {
-    padding-block: calc(var(--spacing) * 0);
-  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -1500,9 +1478,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .text-\\[9px\\] {
     font-size: 9px;
   }
-  .text-\\[10px\\] {
-    font-size: 10px;
-  }
   .text-\\[11px\\] {
     font-size: 11px;
   }
@@ -1742,10 +1717,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
-  .blur {
-    --tw-blur: blur(8px);
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -1911,25 +1882,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus-within\\:border-ring {
-    &:focus-within {
-      border-color: var(--ring);
-    }
-  }
-  .focus-within\\:ring-\\[3px\\] {
-    &:focus-within {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .focus-within\\:ring-ring\\/30 {
-    &:focus-within {
-      --tw-ring-color: var(--ring);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--ring) 30%, transparent);
-      }
-    }
-  }
   .hover\\:border-destructive\\/30 {
     &:hover {
       @media (hover: hover) {
@@ -2073,11 +2025,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
       pointer-events: none;
     }
   }
-  .disabled\\:cursor-not-allowed {
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
   .disabled\\:opacity-50 {
     &:disabled {
       opacity: 50%;
@@ -2088,11 +2035,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
       opacity: 60%;
     }
   }
-  .has-disabled\\:opacity-60 {
-    &:has(*:disabled) {
-      opacity: 60%;
-    }
-  }
   .aria-invalid\\:border-destructive\\/40 {
     &[aria-invalid="true"] {
       border-color: var(--destructive);
@@ -2499,32 +2441,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
       height: calc(var(--spacing) * 4.5);
     }
   }
-  .\\[\\&\\>svg\\]\\:pointer-events-none {
-    &>svg {
-      pointer-events: none;
-    }
-  }
-  .\\[\\&\\>svg\\]\\:-mx-0\\.5 {
-    &>svg {
-      margin-inline: calc(var(--spacing) * -0.5);
-    }
-  }
-  .\\[\\&\\>svg\\]\\:shrink-0 {
-    &>svg {
-      flex-shrink: 0;
-    }
-  }
-  .\\[\\&\\>svg\\:not\\(\\[class\\*\\=\\'opacity-\\'\\]\\)\\]\\:opacity-80 {
-    &>svg:not([class*='opacity-']) {
-      opacity: 80%;
-    }
-  }
-  .\\[\\&\\>svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {
-    &>svg:not([class*='size-']) {
-      width: calc(var(--spacing) * 4);
-      height: calc(var(--spacing) * 4);
-    }
-  }
   .\\[\\[data-kbd-nav\\]_\\&\\]\\:focus-within\\:bg-accent {
     [data-kbd-nav] & {
       &:focus-within {
@@ -3086,11 +3002,10 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
 
 // src/browser/surface/constants.ts
 var SURFACE_HOST_CLASS = "uidex-surface-host";
-var SURFACE_CONTAINER_CLASS = "uidex-container";
 var Z_BASE = 2147483630;
 var Z_OVERLAY = 2147483635;
 var Z_CHROME = 2147483645;
-var SURFACE_IGNORE_SELECTOR = `.${SURFACE_HOST_CLASS},.${SURFACE_CONTAINER_CLASS}`;
+var SURFACE_IGNORE_SELECTOR = `.${SURFACE_HOST_CLASS}`;
 var UIDEX_ATTR_TO_KIND = [
   ["data-uidex", "element"],
   ["data-uidex-region", "region"],
@@ -3274,7 +3189,7 @@ function createCursorTooltip(deps) {
 // src/browser/surface/inspector.ts
 function entityForRef(ref, registry) {
   if (registry) {
-    const found = registry.get(ref.kind, ref.id);
+    const found = registry.get(ref.kind, ref.id) ?? registry.matchPattern?.(ref.kind, ref.id);
     if (found) return found;
   }
   if (ref.kind === "route") return { kind: "route", path: ref.id, page: ref.id };
@@ -3377,7 +3292,6 @@ function createInspector(options) {
     e.preventDefault();
     e.stopPropagation();
     const match = stack[layerIndex];
-    session.select(match.ref);
     onSelect?.(match, { x: e.clientX, y: e.clientY });
   };
   const onContextMenu = (e) => {
@@ -3426,8 +3340,6 @@ function createInspector(options) {
 
 // src/browser/surface/menu-bar.ts
 import {
-  ChevronLeft,
-  ChevronRight,
   Command,
   Highlighter,
   MapPin,
@@ -3583,49 +3495,12 @@ function createMenuBar(options) {
     },
     pinIcon
   );
-  const commitCycler = el("div", {
-    class: "relative z-1 inline-flex items-center gap-0.5",
-    attrs: { "data-uidex-menubar-commit-cycler": "" }
-  });
-  commitCycler.hidden = true;
-  const prevIcon = createLucideElement2(ChevronLeft);
-  prevIcon.setAttribute("class", "size-3");
-  prevIcon.setAttribute("aria-hidden", "true");
-  const prevBtn = el(
-    "button",
-    {
-      class: BUTTON_CLASS,
-      attrs: { type: "button", "aria-label": "Previous commit" },
-      style: { width: "18px", height: "18px" }
-    },
-    prevIcon
-  );
-  const commitLabel = el("span", {
-    class: "relative z-1 whitespace-nowrap px-1 text-[10px] font-mono text-muted-foreground",
-    attrs: { "data-uidex-menubar-commit-label": "" }
-  });
-  const nextIcon = createLucideElement2(ChevronRight);
-  nextIcon.setAttribute("class", "size-3");
-  nextIcon.setAttribute("aria-hidden", "true");
-  const nextBtn = el(
-    "button",
-    {
-      class: BUTTON_CLASS,
-      attrs: { type: "button", "aria-label": "Next commit" },
-      style: { width: "18px", height: "18px" }
-    },
-    nextIcon
-  );
-  commitCycler.appendChild(prevBtn);
-  commitCycler.appendChild(commitLabel);
-  commitCycler.appendChild(nextBtn);
   const pinWrapper = el("div", {
     class: "relative z-1 inline-flex items-center gap-0.5",
     attrs: { "data-uidex-menubar-pin-wrapper": "" }
   });
   pinWrapper.hidden = true;
   pinWrapper.appendChild(pinBtn);
-  pinWrapper.appendChild(commitCycler);
   root.appendChild(pinWrapper);
   const updatePinUI = () => {
     if (!activePinLayer) {
@@ -3633,16 +3508,7 @@ function createMenuBar(options) {
       return;
     }
     const pinsVisible = activePinLayer.visible;
-    const state = activePinLayer.filterState;
-    const hasCommits = state.commits.length > 0;
     pinWrapper.hidden = false;
-    commitCycler.hidden = !pinsVisible || !hasCommits;
-    if (state.commitIndex === -1 || !state.commits[state.commitIndex]) {
-      commitLabel.textContent = `all (${state.commits.length})`;
-    } else {
-      const sha = state.commits[state.commitIndex] ?? "";
-      commitLabel.textContent = sha.slice(0, 7);
-    }
     pinBtn.className = cn(BUTTON_CLASS, pinsVisible && BUTTON_ACTIVE_CLASS);
   };
   pinBtn.addEventListener("click", (e) => {
@@ -3651,14 +3517,6 @@ function createMenuBar(options) {
       activePinLayer.setVisible(!activePinLayer.visible);
     }
   });
-  prevBtn.addEventListener("click", (e) => {
-    e.stopPropagation();
-    activePinLayer?.prevCommit();
-  });
-  nextBtn.addEventListener("click", (e) => {
-    e.stopPropagation();
-    activePinLayer?.nextCommit();
-  });
   let unsubscribePinFilter = activePinLayer?.onFilterChange(() => updatePinUI());
   const presenceIcon = createLucideElement2(Users);
   presenceIcon.setAttribute("class", "size-3.5");
@@ -3752,7 +3610,7 @@ function createMenuBar(options) {
   container.appendChild(root);
   const syncButtonStates = () => {
     const state = session.getState();
-    const inspectActive = state.inspectorActive;
+    const inspectActive = state.mode === "inspecting";
     inspectBtn.setAttribute(
       "data-uidex-menubar-inspect-active",
       inspectActive ? "true" : "false"
@@ -3871,6 +3729,49 @@ function createMenuBar(options) {
   };
 }
 
+// src/browser/internal/repositioner.ts
+function createRepositioner(onReflow) {
+  let rafId = null;
+  let attached = false;
+  const schedule = () => {
+    if (rafId !== null) return;
+    rafId = typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => {
+      rafId = null;
+      onReflow();
+    }) : setTimeout(() => {
+      rafId = null;
+      onReflow();
+    }, 0);
+  };
+  const cancel = () => {
+    if (rafId === null) return;
+    if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(rafId);
+    else clearTimeout(rafId);
+    rafId = null;
+  };
+  const onScroll = () => schedule();
+  const onResize = () => schedule();
+  const attach = () => {
+    if (attached) return;
+    attached = true;
+    window.addEventListener("resize", onResize);
+    window.addEventListener("scroll", onScroll, {
+      capture: true,
+      passive: true
+    });
+  };
+  const detach = () => {
+    if (!attached) return;
+    attached = false;
+    window.removeEventListener("resize", onResize);
+    window.removeEventListener("scroll", onScroll, {
+      capture: true
+    });
+    cancel();
+  };
+  return { schedule, cancel, attach, detach };
+}
+
 // src/browser/surface/overlay.ts
 var DEFAULT_COLOR = "#34d399";
 var DEFAULT_BORDER_WIDTH = 2;
@@ -3938,44 +3839,7 @@ function createOverlay(deps) {
     fillOpacity: DEFAULT_FILL_OPACITY,
     backdrop: false
   };
-  let rafId = null;
-  let attached = false;
-  const schedule = () => {
-    if (rafId !== null) return;
-    rafId = typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => {
-      rafId = null;
-      updatePosition();
-    }) : setTimeout(() => {
-      rafId = null;
-      updatePosition();
-    }, 0);
-  };
-  const cancelSchedule = () => {
-    if (rafId === null) return;
-    if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(rafId);
-    else clearTimeout(rafId);
-    rafId = null;
-  };
-  const onScroll = () => schedule();
-  const onResize = () => schedule();
-  const attach = () => {
-    if (attached) return;
-    attached = true;
-    window.addEventListener("resize", onResize);
-    window.addEventListener("scroll", onScroll, {
-      capture: true,
-      passive: true
-    });
-  };
-  const detach = () => {
-    if (!attached) return;
-    attached = false;
-    window.removeEventListener("resize", onResize);
-    window.removeEventListener("scroll", onScroll, {
-      capture: true
-    });
-    cancelSchedule();
-  };
+  const repositioner = createRepositioner(() => updatePosition());
   function updatePosition() {
     if (!target) return;
     const rect = target.getBoundingClientRect();
@@ -4039,16 +3903,16 @@ function createOverlay(deps) {
         box.offsetHeight;
       }
       box.style.opacity = "1";
-      attach();
+      repositioner.attach();
     },
     hide() {
       target = null;
       box.style.opacity = "0";
       backdrop.style.opacity = "0";
-      detach();
+      repositioner.detach();
     },
     destroy() {
-      detach();
+      repositioner.detach();
       box.remove();
       backdrop.remove();
       target = null;
@@ -4165,8 +4029,7 @@ function createSurfaceShell(options) {
   const overlay = createOverlay({ container: host.shadowRoot });
   cleanup.add(overlay);
   const tooltip = createCursorTooltip({
-    container: host.chromeEl,
-    session: options.session
+    container: host.chromeEl
   });
   cleanup.add(tooltip);
   const afterHover = options.inspector?.onAfterHover;