uidex 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -32,7 +32,6 @@ var src_exports = {};
 __export(src_exports, {
   ENTITY_KINDS: () => ENTITY_KINDS,
   KIND_STYLE: () => KIND_STYLE,
-  SURFACE_CONTAINER_CLASS: () => SURFACE_CONTAINER_CLASS,
   SURFACE_HOST_CLASS: () => SURFACE_HOST_CLASS,
   SURFACE_IGNORE_SELECTOR: () => SURFACE_IGNORE_SELECTOR,
   UnknownEntityKindError: () => UnknownEntityKindError,
@@ -47,7 +46,6 @@ __export(src_exports, {
   createCommandPaletteView: () => createCommandPaletteView,
   createConsoleCapture: () => createConsoleCapture,
   createCursorTooltip: () => createCursorTooltip,
-  createHighlightController: () => createHighlightController,
   createIngest: () => createIngest,
   createInspector: () => createInspector,
   createMenuBar: () => createMenuBar,
@@ -64,13 +62,11 @@ __export(src_exports, {
   createThemeDetector: () => createThemeDetector,
   createUidex: () => createUidex,
   createViewStack: () => createViewStack,
-  defaultResolveMatch: () => defaultResolveMatch,
   displayName: () => displayName,
   entityKey: () => entityKey,
   featureDetailView: () => featureDetailView,
   flowDetailView: () => flowDetailView,
   formatShortcutLabel: () => formatShortcutLabel,
-  getNativeFetch: () => getNativeFetch,
   isMetaKind: () => isMetaKind,
   nativeFetch: () => nativeFetch,
   pageDetailView: () => pageDetailView,
@@ -175,13 +171,14 @@ function createRegistry() {
   };
   const getPatternsForKind = (kind) => {
     const cached = patternCache.get(kind);
-    if (cached !== void 0)
-      return cached;
+    if (cached !== void 0) return cached;
     const patterns = [];
     for (const [key, entity] of store[kind]) {
-      if (key.endsWith("*")) {
+      if (key.includes("*")) {
+        const segments = key.split("*");
         patterns.push({
-          prefix: key.slice(0, -1),
+          segments,
+          staticLength: segments.reduce((n, s) => n + s.length, 0),
           entity
         });
       }
@@ -192,13 +189,25 @@ function createRegistry() {
     );
     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 (id.startsWith(entry.prefix) && (best === void 0 || entry.prefix.length > best.prefix.length)) {
+      if (matchesSegments(entry.segments, id) && (best === void 0 || entry.staticLength > best.staticLength)) {
         best = entry;
       }
     }
@@ -418,9 +427,6 @@ function createConsoleCapture(options = {}) {
 
 // src/browser/ingest/native-fetch.ts
 var nativeFetch = typeof globalThis !== "undefined" && typeof globalThis.fetch === "function" ? globalThis.fetch.bind(globalThis) : void 0;
-function getNativeFetch() {
-  return nativeFetch;
-}
 
 // src/browser/ingest/network.ts
 var DEFAULT_LIMIT2 = 20;
@@ -503,7 +509,7 @@ function createNetworkCapture(options = {}) {
 
 // src/browser/ingest/index.ts
 function createIngest(options = {}) {
-  const { session, ...opts } = options;
+  const opts = options;
   const wantConsole = opts.captureConsole !== false;
   const wantNetwork = opts.captureNetwork !== false;
   const consoleCapture = wantConsole ? createConsoleCapture({
@@ -522,14 +528,12 @@ function createIngest(options = {}) {
     consoleCapture?.start();
     networkCapture?.start();
     active = Boolean(consoleCapture?.isActive || networkCapture?.isActive);
-    if (active) session?.setIngest(true);
   }
   function stop() {
     if (!active) return;
     consoleCapture?.stop();
     networkCapture?.stop();
     active = false;
-    session?.setIngest(false);
   }
   return {
     start,
@@ -651,8 +655,7 @@ var COMMAND_PALETTE_ENTRY = {
 function createModeStore(options) {
   const { nav, bindings } = options;
   const store = (0, import_vanilla.createStore)(() => ({
-    mode: "idle",
-    inspectorActive: false
+    mode: "idle"
   }));
   const transition = {
     openPalette() {
@@ -661,17 +664,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") {
@@ -686,7 +689,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();
@@ -694,7 +697,7 @@ function createModeStore(options) {
         bindings?.destroyInspector?.();
       }
       nav.nav.clear();
-      store.setState({ mode: "idle", inspectorActive: false });
+      store.setState({ mode: "idle" });
     },
     popOrTransition() {
       const { stack } = nav.getState();
@@ -702,12 +705,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) {
@@ -724,7 +727,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":
@@ -759,14 +762,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: [] });
     },
@@ -781,14 +776,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) {
@@ -839,7 +831,6 @@ function createSession(options = {}) {
       } else if (highlightMode === "transient") {
         onUpdateOverlay?.(hlCtx);
       }
-      store.setState({ hover: ref2 });
     },
     unhover() {
       if (highlightMode === "transient") {
@@ -849,7 +840,6 @@ function createSession(options = {}) {
         hlCtx.color = null;
         onHideOverlay?.();
       }
-      store.setState({ hover: null });
     },
     pin(ref2) {
       const pinRef = ref2 ?? hlCtx.ref;
@@ -877,14 +867,11 @@ function createSession(options = {}) {
   };
   const store = (0, import_vanilla3.createStore)(() => ({
     ...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(() => {
@@ -894,29 +881,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 = (ref2) => {
-    if (sameRef(store.getState().selection, ref2)) return;
-    store.setState({ selection: ref2 });
-  };
   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++) {
@@ -1229,9 +1208,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%;
   }
@@ -1274,9 +1250,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;
   }
@@ -1313,9 +1286,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;
   }
@@ -1323,10 +1293,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);
@@ -1384,15 +1350,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);
   }
@@ -1402,9 +1362,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);
   }
@@ -1429,9 +1386,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%;
   }
@@ -1506,9 +1460,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;
   }
@@ -1518,9 +1469,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;
   }
@@ -1542,9 +1490,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);
   }
@@ -1569,9 +1514,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;
@@ -1786,9 +1728,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);
   }
@@ -1813,9 +1752,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);
   }
@@ -1888,9 +1824,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;
   }
@@ -2130,10 +2063,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,);
   }
@@ -2299,25 +2228,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) {
@@ -2461,11 +2371,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%;
@@ -2476,11 +2381,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);
@@ -2887,32 +2787,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 {
@@ -3474,18 +3348,23 @@ 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_PIN_LAYER = 2147483640;
 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"],
   ["data-uidex-widget", "widget"],
   ["data-uidex-primitive", "primitive"]
 ];
+var DOM_BACKED_KINDS = /* @__PURE__ */ new Set([
+  "element",
+  "region",
+  "widget",
+  "primitive"
+]);
 
 // src/browser/surface/host.ts
 function createSurfaceHost(options) {
@@ -3678,29 +3557,6 @@ function entityForRef(ref2, registry) {
   }
   return { kind: ref2.kind, id: ref2.id };
 }
-function defaultResolveMatch(target, registry) {
-  if (target.closest(SURFACE_IGNORE_SELECTOR)) return null;
-  let node = target;
-  while (node) {
-    if (node instanceof HTMLElement) {
-      for (const [attr, kind] of UIDEX_ATTR_TO_KIND) {
-        const id = node.getAttribute(attr);
-        if (id) {
-          const ref2 = { kind, id };
-          const entity = entityForRef(ref2, registry);
-          return {
-            element: node,
-            ref: ref2,
-            entity,
-            label: displayName(entity, node)
-          };
-        }
-      }
-    }
-    node = node.parentElement;
-  }
-  return null;
-}
 function defaultResolveAllMatches(target, registry) {
   if (target.closest(SURFACE_IGNORE_SELECTOR)) return [];
   const semantic = [];
@@ -3745,27 +3601,6 @@ function resolveEntityElement(ref2) {
   if (el2 instanceof HTMLElement && el2.isConnected) return el2;
   return null;
 }
-function createHighlightController(overlay) {
-  let lastKey = null;
-  return {
-    show(ref2, opts) {
-      const el2 = resolveEntityElement(ref2);
-      if (!el2) {
-        lastKey = null;
-        overlay.hide();
-        return;
-      }
-      const key = `${ref2.kind}:${ref2.id}`;
-      if (key === lastKey && overlay.isVisible) return;
-      lastKey = key;
-      overlay.show(el2, opts);
-    },
-    hide() {
-      lastKey = null;
-      overlay.hide();
-    }
-  };
-}
 function createInspector(options) {
   const {
     session,
@@ -3819,7 +3654,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) => {
@@ -4138,49 +3972,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 = (0, import_lucide3.createElement)(import_lucide3.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 = (0, import_lucide3.createElement)(import_lucide3.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) {
@@ -4188,16 +3985,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) => {
@@ -4206,14 +3994,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 = (0, import_lucide3.createElement)(import_lucide3.Users);
   presenceIcon.setAttribute("class", "size-3.5");
@@ -4307,7 +4087,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"
@@ -4426,6 +4206,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;
@@ -4493,44 +4316,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();
@@ -4594,16 +4380,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;
@@ -4720,8 +4506,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;
@@ -4905,9 +4690,6 @@ function createPinLayer(options) {
   const seenIds = /* @__PURE__ */ new Set();
   const byComp = /* @__PURE__ */ new Map();
   const indicators = /* @__PURE__ */ new Map();
-  let filter = { branch: null, commit: null };
-  let commits = [];
-  let commitIndex = -1;
   const filterCbs = /* @__PURE__ */ new Set();
   const notifyFilter = () => {
     for (const cb of filterCbs) cb();
@@ -4922,8 +4704,6 @@ function createPinLayer(options) {
     }
   };
   const rerender = () => {
-    commits = [];
-    commitIndex = -1;
     rebuildFiltered();
     for (const id of Array.from(indicators.keys())) {
       if (!byComp.has(id)) removeIndicator(id);
@@ -4932,45 +4712,8 @@ function createPinLayer(options) {
     notifyFilter();
     onPinsChanged?.();
   };
-  let rafId = null;
-  let winAttached = false;
   let obs = null;
-  const schedulePos = () => {
-    if (rafId !== null) return;
-    rafId = typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => {
-      rafId = null;
-      posAll();
-    }) : setTimeout(() => {
-      rafId = null;
-      posAll();
-    }, 0);
-  };
-  const cancelPos = () => {
-    if (rafId === null) return;
-    if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(rafId);
-    else clearTimeout(rafId);
-    rafId = null;
-  };
-  const onScroll = () => schedulePos();
-  const onResize = () => schedulePos();
-  const attachWin = () => {
-    if (winAttached) return;
-    winAttached = true;
-    window.addEventListener("scroll", onScroll, {
-      capture: true,
-      passive: true
-    });
-    window.addEventListener("resize", onResize);
-  };
-  const detachWin = () => {
-    if (!winAttached) return;
-    winAttached = false;
-    window.removeEventListener("scroll", onScroll, {
-      capture: true
-    });
-    window.removeEventListener("resize", onResize);
-    cancelPos();
-  };
+  const repositioner = createRepositioner(() => posAll());
   const attachObs = () => {
     if (obs || typeof MutationObserver === "undefined") return;
     obs = new MutationObserver((recs) => {
@@ -4994,7 +4737,7 @@ function createPinLayer(options) {
       s.anchor = resolveEntityElement(parseComponentRef(s.componentId));
       changed = true;
     }
-    if (changed) schedulePos();
+    if (changed) repositioner.schedule();
   };
   const expand = (st) => {
     if (st.expanded) return;
@@ -5236,7 +4979,7 @@ function createPinLayer(options) {
     if (!st) {
       st = buildIndicator(componentId);
       indicators.set(componentId, st);
-      attachWin();
+      repositioner.attach();
       attachObs();
     }
     if (st.pinIndex >= pins.length) st.pinIndex = 0;
@@ -5250,7 +4993,7 @@ function createPinLayer(options) {
     st.wrap.remove();
     indicators.delete(componentId);
     if (indicators.size === 0) {
-      detachWin();
+      repositioner.detach();
       detachObs();
     }
   };
@@ -5285,17 +5028,22 @@ function createPinLayer(options) {
       seenIds.clear();
       byComp.clear();
       for (const id of Array.from(indicators.keys())) removeIndicator(id);
-      commits = [];
-      commitIndex = -1;
       notifyFilter();
     },
     getPinsForElement: (id) => byComp.get(id) ?? [],
-    getAllPinsForElement: (id) => allPins.filter((p) => (p.entity ?? "") === id),
     getAllPins: () => allPins.slice(),
     attachChannel(channel) {
-      return channel.onPin((pin) => {
+      const offPin = channel.onPin((pin) => {
         layer.addPin(pin);
       });
+      const offArchived = channel.onPinArchived?.((reportId) => {
+        layer.removePin(reportId);
+      }) ?? (() => {
+      });
+      return () => {
+        offPin();
+        offArchived();
+      };
     },
     attachCloud(opts) {
       const offCh = opts.channel ? layer.attachChannel(opts.channel) : () => {
@@ -5326,39 +5074,6 @@ function createPinLayer(options) {
     async refresh() {
       if (activeRefresh) await activeRefresh();
     },
-    get filterState() {
-      return {
-        branch: filter.branch,
-        commit: filter.commit,
-        commits,
-        commitIndex
-      };
-    },
-    setFilter(next) {
-      filter = {
-        branch: next.branch !== void 0 ? next.branch : filter.branch,
-        commit: next.commit !== void 0 ? next.commit : filter.commit
-      };
-      rerender();
-    },
-    nextCommit() {
-      if (!commits.length) return;
-      commitIndex = commitIndex >= commits.length - 1 ? -1 : commitIndex + 1;
-      filter = {
-        ...filter,
-        commit: commitIndex === -1 ? null : commits[commitIndex]
-      };
-      rerender();
-    },
-    prevCommit() {
-      if (!commits.length) return;
-      commitIndex = commitIndex <= -1 ? commits.length - 1 : commitIndex - 1;
-      filter = {
-        ...filter,
-        commit: commitIndex === -1 ? null : commits[commitIndex]
-      };
-      rerender();
-    },
     onFilterChange(cb) {
       filterCbs.add(cb);
       return () => {
@@ -5377,7 +5092,7 @@ function createPinLayer(options) {
     },
     destroy() {
       layer.clear();
-      detachWin();
+      repositioner.detach();
       detachObs();
       layerEl.remove();
       activeRefresh = null;
@@ -5420,9 +5135,11 @@ function createRouter(options) {
     if (view === null || typeof view !== "object" || typeof view.id !== "string" || view.id.length === 0) {
       throw new ViewValidationError("View must have a non-empty string id");
     }
-    if (typeof view.surface !== "function") {
+    const hasSurface = typeof view.surface === "function";
+    const hasRender = typeof view.render === "function";
+    if (!hasSurface && !hasRender) {
       throw new ViewValidationError(
-        `View ${view.id}: 'surface' must be a function`
+        `View ${view.id}: a 'surface' function (or a 'render' override) is required`
       );
     }
     if (!view.matches && !view.palette) {
@@ -5480,7 +5197,6 @@ function createRouter(options) {
     if (idx >= 0) recentRefs.splice(idx, 1);
     recentRefs.unshift(ref2);
     if (recentRefs.length > MAX_RECENTS) recentRefs.length = MAX_RECENTS;
-    options.session.select(ref2);
     const entry = { id: match.view.id, ref: ref2 };
     const { mode } = options.session.mode.getState();
     if (mode === "idle" || mode === "inspecting") {
@@ -5535,70 +5251,20 @@ function detectDev() {
 
 // src/browser/internal/lit.ts
 var import_lit_html2 = require("lit-html");
-var import_repeat = require("lit-html/directives/repeat.js");
 var import_ref = require("lit-html/directives/ref.js");
-var import_class_map = require("lit-html/directives/class-map.js");
 
-// src/browser/internal/apply-props.ts
-function applyProps(node, props) {
-  const removers = [];
-  for (const [key, rawValue] of Object.entries(props)) {
-    if (key === "children" || key === "dangerouslySetInnerHTML") continue;
-    if (key.startsWith("on") && typeof rawValue === "function") {
-      const eventName = key.slice(2).toLowerCase();
-      const isTextControl = node instanceof HTMLInputElement && node.type !== "checkbox" && node.type !== "radio" || node instanceof HTMLTextAreaElement;
-      const effectiveEvent = eventName === "change" && isTextControl ? "input" : eventName;
-      const listener = rawValue;
-      node.addEventListener(effectiveEvent, listener);
-      removers.push(() => node.removeEventListener(effectiveEvent, listener));
-      continue;
-    }
-    if (rawValue === void 0 || rawValue === null) {
-      node.removeAttribute(key);
-      continue;
-    }
-    if (typeof rawValue === "boolean") {
-      if (rawValue) node.setAttribute(key, "");
-      else node.removeAttribute(key);
-      continue;
-    }
-    if (key === "style" && typeof rawValue === "object") {
-      Object.assign(
-        node.style,
-        rawValue
-      );
-      continue;
-    }
-    if (key === "className" || key === "class") {
-      node.setAttribute("class", String(rawValue));
-      continue;
-    }
-    if (key === "htmlFor") {
-      node.setAttribute("for", String(rawValue));
-      continue;
-    }
-    if (key === "tabIndex") {
-      ;
-      node.tabIndex = Number(rawValue);
-      continue;
-    }
-    node.setAttribute(key, String(rawValue));
-  }
-  return () => removers.forEach((fn) => fn());
-}
-
-// src/browser/internal/lit-icon.ts
-var import_lit_html = require("lit-html");
-var import_directive = require("lit-html/directive.js");
-var import_lucide5 = require("lucide");
-var LucideIconDirective = class extends import_directive.Directive {
-  _icon;
-  _class;
-  _el;
-  constructor(partInfo) {
-    super(partInfo);
-    if (partInfo.type !== import_directive.PartType.CHILD) {
-      throw new Error("icon() can only be used in a child position");
+// src/browser/internal/lit-icon.ts
+var import_lit_html = require("lit-html");
+var import_directive = require("lit-html/directive.js");
+var import_lucide5 = require("lucide");
+var LucideIconDirective = class extends import_directive.Directive {
+  _icon;
+  _class;
+  _el;
+  constructor(partInfo) {
+    super(partInfo);
+    if (partInfo.type !== import_directive.PartType.CHILD) {
+      throw new Error("icon() can only be used in a child position");
     }
   }
   update(_part, [iconNode, className]) {
@@ -5619,6 +5285,16 @@ var LucideIconDirective = class extends import_directive.Directive {
 };
 var icon = (0, import_directive.directive)(LucideIconDirective);
 
+// src/browser/views/primitives/chip.ts
+var CHIP_CLASS = "inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground";
+function createChip(options = {}, children = []) {
+  const { class: extra, ...rest } = options;
+  return el("span", { ...rest, class: cn(CHIP_CLASS, extra) }, children);
+}
+
+// src/browser/views/primitives/kind-icon.ts
+var import_lucide6 = require("lucide");
+
 // src/browser/ui/cva.ts
 function cva(base, config = {}) {
   return (props = {}) => {
@@ -5666,16 +5342,6 @@ function badgeTpl(content, options = {}) {
   `;
 }
 
-// src/browser/views/primitives/chip.ts
-var CHIP_CLASS = "inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground";
-function createChip(options = {}, children = []) {
-  const { class: extra, ...rest } = options;
-  return el("span", { ...rest, class: cn(CHIP_CLASS, extra) }, children);
-}
-
-// src/browser/views/primitives/kind-icon.ts
-var import_lucide6 = require("lucide");
-
 // src/browser/views/primitives/icon-tile.ts
 var TILE_CLASS = "inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground";
 var ICON_SIZE_CLASS_RE = /\b(h-\d+|w-\d+|size-\d+)\b/g;
@@ -6167,6 +5833,54 @@ function createScrollArea(props = {}) {
   );
 }
 
+// src/browser/internal/apply-props.ts
+function applyProps(node, props) {
+  const removers = [];
+  for (const [key, rawValue] of Object.entries(props)) {
+    if (key === "children" || key === "dangerouslySetInnerHTML") continue;
+    if (key.startsWith("on") && typeof rawValue === "function") {
+      const eventName = key.slice(2).toLowerCase();
+      const isTextControl = node instanceof HTMLInputElement && node.type !== "checkbox" && node.type !== "radio" || node instanceof HTMLTextAreaElement;
+      const effectiveEvent = eventName === "change" && isTextControl ? "input" : eventName;
+      const listener = rawValue;
+      node.addEventListener(effectiveEvent, listener);
+      removers.push(() => node.removeEventListener(effectiveEvent, listener));
+      continue;
+    }
+    if (rawValue === void 0 || rawValue === null) {
+      node.removeAttribute(key);
+      continue;
+    }
+    if (typeof rawValue === "boolean") {
+      if (rawValue) node.setAttribute(key, "");
+      else node.removeAttribute(key);
+      continue;
+    }
+    if (key === "style" && typeof rawValue === "object") {
+      Object.assign(
+        node.style,
+        rawValue
+      );
+      continue;
+    }
+    if (key === "className" || key === "class") {
+      node.setAttribute("class", String(rawValue));
+      continue;
+    }
+    if (key === "htmlFor") {
+      node.setAttribute("for", String(rawValue));
+      continue;
+    }
+    if (key === "tabIndex") {
+      ;
+      node.tabIndex = Number(rawValue);
+      continue;
+    }
+    node.setAttribute(key, String(rawValue));
+  }
+  return () => removers.forEach((fn) => fn());
+}
+
 // src/browser/views/builder/spread-props.ts
 function spreadProps(node, props) {
   return applyProps(node, props);
@@ -6186,9 +5900,6 @@ function createPersistentSpreads() {
   };
 }
 
-// src/browser/views/render/detail.ts
-var import_lucide7 = require("lucide");
-
 // src/browser/internal/arrow-nav.ts
 var NAV_KEYS = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "Home", "End"]);
 function bindArrowNav(options) {
@@ -6260,30 +5971,6 @@ function focusItem(items, idx) {
   items[idx].focus();
 }
 
-// src/browser/views/builder/filter.ts
-function normalizeQuery(query) {
-  return query.trim().toLowerCase();
-}
-function matchesQuery(haystack, query) {
-  const q = normalizeQuery(query);
-  if (!q) return true;
-  return haystack.toLowerCase().includes(q);
-}
-function filterEntities(entities, query) {
-  const q = normalizeQuery(query);
-  if (!q) return entities;
-  return entities.filter((e) => {
-    const name = displayName(e).toLowerCase();
-    const id = entityKey(e).toLowerCase();
-    return name.includes(q) || id.includes(q) || e.kind.toLowerCase().includes(q);
-  });
-}
-function filterIds(ids, query) {
-  const q = normalizeQuery(query);
-  if (!q) return ids;
-  return ids.filter((id) => id.toLowerCase().includes(q));
-}
-
 // src/browser/views/labels.ts
 var SECTION_LABELS = {
   acceptance: "Acceptance criteria",
@@ -6308,171 +5995,6 @@ var LIST_ITEM_STATE_CLASS = "data-[disabled]:pointer-events-none data-[disabled]
 var LIST_ITEM_INTERACTIVE_CLASS = "uidex-item-interactive [[data-kbd-nav]_&]:focus:bg-accent [[data-kbd-nav]_&]:focus:text-accent-foreground [[data-kbd-nav]_&]:focus-within:bg-accent [[data-kbd-nav]_&]:focus-within:text-accent-foreground";
 var LIST_GROUP_LABEL_CLASS = "text-muted-foreground px-2 py-1.5 text-xs font-medium";
 
-// src/browser/ui/button.ts
-var buttonBase = "focus-visible:ring-ring focus-visible:ring-offset-background disabled:opacity-60 relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border text-sm font-medium outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg]:pointer-events-none [&_svg]:shrink-0";
-var buttonVariants = cva(buttonBase, {
-  defaultVariants: { size: "default", variant: "default" },
-  variants: {
-    size: {
-      default: "h-8 px-3",
-      sm: "h-7 gap-1.5 px-2.5",
-      xs: "h-6 gap-1 rounded-md px-2 text-xs",
-      lg: "h-9 px-3.5",
-      xl: "h-10 px-4 text-base",
-      icon: "size-8",
-      "icon-sm": "size-7",
-      "icon-lg": "size-9",
-      "icon-xs": "size-6 rounded-md"
-    },
-    variant: {
-      default: "border-primary bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-      destructive: "border-destructive bg-destructive shadow-xs hover:bg-destructive/90 text-white",
-      "destructive-outline": "border-input bg-popover text-destructive-foreground shadow-xs/5 hover:border-destructive/30 hover:bg-destructive/5 dark:bg-input/30",
-      ghost: "text-foreground hover:bg-accent hover:text-accent-foreground border-transparent",
-      link: "text-foreground border-transparent underline-offset-4 hover:underline",
-      outline: "border-input bg-popover text-foreground shadow-xs/5 hover:bg-accent hover:text-accent-foreground dark:bg-input/30",
-      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 border-transparent"
-    }
-  }
-});
-
-// src/browser/views/primitives/entity-presence.ts
-var DOM_BACKED_KINDS = /* @__PURE__ */ new Set([
-  "element",
-  "region",
-  "widget",
-  "primitive"
-]);
-var TOUCH_RESOLVE_KINDS = [
-  "element",
-  "widget",
-  "region",
-  "primitive"
-];
-function isAbsentFromPage(ref2, registry) {
-  if (DOM_BACKED_KINDS.has(ref2.kind)) {
-    return !resolveEntityElement(ref2);
-  }
-  if (ref2.kind === "flow" && registry) {
-    const flow = registry.get("flow", ref2.id);
-    if (!flow) return true;
-    for (const touchId of flow.touches) {
-      for (const kind of TOUCH_RESOLVE_KINDS) {
-        const entity = registry.get(kind, touchId);
-        if (entity && resolveEntityElement({ kind, id: touchId })) return false;
-      }
-    }
-    return true;
-  }
-  return false;
-}
-
-// src/browser/ui/kbd.ts
-var KBD_CLASS = "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3";
-var COMMAND_SHORTCUT_CLASS = "text-muted-foreground/70 ms-auto font-sans text-xs font-medium tracking-widest";
-function createCommandShortcut(options = {}, children = []) {
-  const { class: extra, attrs, ...rest } = options;
-  return el(
-    "kbd",
-    {
-      ...rest,
-      class: cn(COMMAND_SHORTCUT_CLASS, extra),
-      attrs: { "data-slot": "command-shortcut", ...attrs }
-    },
-    children
-  );
-}
-function kbdTpl(text, className) {
-  return import_lit_html2.html`<kbd class=${cn(KBD_CLASS, className)} data-slot="kbd"
-    >${text}</kbd
-  >`;
-}
-function commandShortcutTpl(text, className) {
-  return import_lit_html2.html`<kbd
-    class=${cn(COMMAND_SHORTCUT_CLASS, className)}
-    data-slot="command-shortcut"
-    >${text}</kbd
-  >`;
-}
-
-// src/browser/views/primitives/row.ts
-var LABEL_CLASS = "min-w-0 flex-1 truncate";
-var SUBTITLE_CLASS = "truncate text-xs text-muted-foreground";
-function fillRowWithHandle(host, content) {
-  if (content.leading) host.append(content.leading);
-  const label = el("span", { class: LABEL_CLASS, text: content.label });
-  host.append(label);
-  if (content.subtitle) {
-    host.append(
-      el("span", {
-        class: SUBTITLE_CLASS,
-        attrs: { "data-uidex-row-subtitle": "" },
-        text: content.subtitle
-      })
-    );
-  }
-  if (content.trailing != null) {
-    host.append(
-      typeof content.trailing === "string" ? createCommandShortcut({ text: content.trailing }) : content.trailing
-    );
-  }
-  return { label };
-}
-function rowTpl(content) {
-  return import_lit_html2.html`
-    ${content.leading ?? import_lit_html2.nothing}
-    <span class=${LABEL_CLASS}>${content.label}</span>
-    ${content.subtitle ? import_lit_html2.html`<span class=${SUBTITLE_CLASS} data-uidex-row-subtitle
-          >${content.subtitle}</span
-        >` : import_lit_html2.nothing}
-    ${content.trailing != null ? typeof content.trailing === "string" ? commandShortcutTpl(content.trailing) : content.trailing : import_lit_html2.nothing}
-  `;
-}
-
-// src/browser/views/primitives/entity-link.ts
-var ACTION_CLASS = cn(
-  LIST_ITEM_CLASS,
-  LIST_ITEM_INTERACTIVE_CLASS,
-  "w-full cursor-pointer text-left font-normal"
-);
-function entityLinkTpl(options) {
-  const { ctx, target, label, leading, class: extraClass } = options;
-  const absent = isAbsentFromPage(target);
-  const resolvedLabel = label ?? `${target.kind}: ${target.id}`;
-  const onClick = () => ctx.views.navigate(target);
-  const preview = () => {
-    ctx.highlight.show(target, { color: KIND_STYLE[target.kind].color });
-  };
-  const restoreParent = () => {
-    if (ctx.ref) {
-      ctx.highlight.show(ctx.ref, { color: KIND_STYLE[ctx.ref.kind].color });
-    } else {
-      ctx.highlight.hide();
-    }
-  };
-  return import_lit_html2.html`
-    <button
-      type="button"
-      class=${cn(ACTION_CLASS, "w-full", absent && "opacity-50", extraClass)}
-      data-slot="list-item-button"
-      data-uidex-entity-link
-      data-uidex-ref-kind=${target.kind}
-      data-uidex-ref-id=${target.id}
-      title=${absent ? "Not on this page" : ""}
-      @click=${onClick}
-      @mouseenter=${preview}
-      @mouseleave=${restoreParent}
-      @focus=${preview}
-      @blur=${restoreParent}
-    >
-      ${rowTpl({
-    leading,
-    label: resolvedLabel
-  })}
-    </button>
-  `;
-}
-
 // src/browser/views/primitives/text.ts
 var MUTED_CLASS = "text-sm text-muted-foreground";
 var HEADING_CLASS = LIST_GROUP_LABEL_CLASS;
@@ -6484,7 +6006,8 @@ function headingTpl(text, className) {
   return import_lit_html2.html`<h3 class=${cn(HEADING_CLASS, className)}>${text}</h3>`;
 }
 
-// src/browser/views/render/detail.ts
+// src/browser/views/render/detail-actions.ts
+var import_lucide7 = require("lucide");
 var ICON_MAP = {
   "archive-x": import_lucide7.ArchiveX,
   copy: import_lucide7.Copy,
@@ -6500,23 +6023,6 @@ var ICON_MAP = {
 function iconFor(icon2) {
   return icon2 ? ICON_MAP[icon2] : null;
 }
-function subtitleTpl(subtitle) {
-  const text = subtitle.extra ? `${subtitle.rawId} \xB7 ${subtitle.extra}` : subtitle.rawId;
-  return import_lit_html2.html`<p
-    class=${cn("text-muted-foreground font-mono text-xs", "px-2")}
-    data-uidex-detail-subtitle
-  >
-    ${text}
-  </p>`;
-}
-function notFoundTpl(ref2) {
-  return import_lit_html2.html`<p
-    class=${cn("text-muted-foreground text-sm", "p-4")}
-    data-uidex-detail-missing
-  >
-    ${ref2.kind}: ${ref2.id} not found in registry
-  </p>`;
-}
 function renderActions(actions, ctx, root, heading) {
   const cleanups = [];
   const buttons = [];
@@ -6627,6 +6133,166 @@ function renderActions(actions, ctx, root, heading) {
   }
   return { node: section, buttons, cleanup: composeCleanups(cleanups) };
 }
+
+// src/browser/views/render/detail-sections.ts
+var import_static = require("lit-html/static.js");
+
+// src/browser/views/builder/filter.ts
+function normalizeQuery(query) {
+  return query.trim().toLowerCase();
+}
+function matchesQuery(haystack, query) {
+  const q = normalizeQuery(query);
+  if (!q) return true;
+  return haystack.toLowerCase().includes(q);
+}
+function filterEntities(entities, query) {
+  const q = normalizeQuery(query);
+  if (!q) return entities;
+  return entities.filter((e) => {
+    const name = displayName(e).toLowerCase();
+    const id = entityKey(e).toLowerCase();
+    return name.includes(q) || id.includes(q) || e.kind.toLowerCase().includes(q);
+  });
+}
+function filterIds(ids, query) {
+  const q = normalizeQuery(query);
+  if (!q) return ids;
+  return ids.filter((id) => id.toLowerCase().includes(q));
+}
+
+// src/browser/views/primitives/entity-presence.ts
+var TOUCH_RESOLVE_KINDS = [
+  "element",
+  "widget",
+  "region",
+  "primitive"
+];
+function isAbsentFromPage(ref2, registry) {
+  if (DOM_BACKED_KINDS.has(ref2.kind)) {
+    return !resolveEntityElement(ref2);
+  }
+  if (ref2.kind === "flow" && registry) {
+    const flow = registry.get("flow", ref2.id);
+    if (!flow) return true;
+    for (const touchId of flow.touches) {
+      for (const kind of TOUCH_RESOLVE_KINDS) {
+        const entity = registry.get(kind, touchId);
+        if (entity && resolveEntityElement({ kind, id: touchId })) return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
+
+// src/browser/ui/kbd.ts
+var KBD_CLASS = "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3";
+var COMMAND_SHORTCUT_CLASS = "text-muted-foreground/70 ms-auto font-sans text-xs font-medium tracking-widest";
+function createCommandShortcut(options = {}, children = []) {
+  const { class: extra, attrs, ...rest } = options;
+  return el(
+    "kbd",
+    {
+      ...rest,
+      class: cn(COMMAND_SHORTCUT_CLASS, extra),
+      attrs: { "data-slot": "command-shortcut", ...attrs }
+    },
+    children
+  );
+}
+function kbdTpl(text, className) {
+  return import_lit_html2.html`<kbd class=${cn(KBD_CLASS, className)} data-slot="kbd"
+    >${text}</kbd
+  >`;
+}
+function commandShortcutTpl(text, className) {
+  return import_lit_html2.html`<kbd
+    class=${cn(COMMAND_SHORTCUT_CLASS, className)}
+    data-slot="command-shortcut"
+    >${text}</kbd
+  >`;
+}
+
+// src/browser/views/primitives/row.ts
+var LABEL_CLASS = "min-w-0 flex-1 truncate";
+var SUBTITLE_CLASS = "truncate text-xs text-muted-foreground";
+function fillRowWithHandle(host, content) {
+  if (content.leading) host.append(content.leading);
+  const label = el("span", { class: LABEL_CLASS, text: content.label });
+  host.append(label);
+  if (content.subtitle) {
+    host.append(
+      el("span", {
+        class: SUBTITLE_CLASS,
+        attrs: { "data-uidex-row-subtitle": "" },
+        text: content.subtitle
+      })
+    );
+  }
+  if (content.trailing != null) {
+    host.append(
+      typeof content.trailing === "string" ? createCommandShortcut({ text: content.trailing }) : content.trailing
+    );
+  }
+  return { label };
+}
+function rowTpl(content) {
+  return import_lit_html2.html`
+    ${content.leading ?? import_lit_html2.nothing}
+    <span class=${LABEL_CLASS}>${content.label}</span>
+    ${content.subtitle ? import_lit_html2.html`<span class=${SUBTITLE_CLASS} data-uidex-row-subtitle
+          >${content.subtitle}</span
+        >` : import_lit_html2.nothing}
+    ${content.trailing != null ? typeof content.trailing === "string" ? commandShortcutTpl(content.trailing) : content.trailing : import_lit_html2.nothing}
+  `;
+}
+
+// src/browser/views/primitives/entity-link.ts
+var ACTION_CLASS = cn(
+  LIST_ITEM_CLASS,
+  LIST_ITEM_INTERACTIVE_CLASS,
+  "w-full cursor-pointer text-left font-normal"
+);
+function entityLinkTpl(options) {
+  const { ctx, target, label, leading, class: extraClass } = options;
+  const absent = isAbsentFromPage(target);
+  const resolvedLabel = label ?? `${target.kind}: ${target.id}`;
+  const onClick = () => ctx.views.navigate(target);
+  const preview = () => {
+    ctx.highlight.show(target, { color: KIND_STYLE[target.kind].color });
+  };
+  const restoreParent = () => {
+    if (ctx.ref) {
+      ctx.highlight.show(ctx.ref, { color: KIND_STYLE[ctx.ref.kind].color });
+    } else {
+      ctx.highlight.hide();
+    }
+  };
+  return import_lit_html2.html`
+    <button
+      type="button"
+      class=${cn(ACTION_CLASS, "w-full", absent && "opacity-50", extraClass)}
+      data-slot="list-item-button"
+      data-uidex-entity-link
+      data-uidex-ref-kind=${target.kind}
+      data-uidex-ref-id=${target.id}
+      title=${absent ? "Not on this page" : ""}
+      @click=${onClick}
+      @mouseenter=${preview}
+      @mouseleave=${restoreParent}
+      @focus=${preview}
+      @blur=${restoreParent}
+    >
+      ${rowTpl({
+    leading,
+    label: resolvedLabel
+  })}
+    </button>
+  `;
+}
+
+// src/browser/views/render/detail-sections.ts
 function entityListItems(ctx, entities) {
   return import_lit_html2.html`${entities.map((entity) => {
     const eRef = { kind: entity.kind, id: entityKey(entity) };
@@ -6640,71 +6306,29 @@ function entityListItems(ctx, entities) {
     </li>`;
   })}`;
 }
-function composesListTpl(ctx, label, entities) {
-  if (entities.length === 0) return null;
-  return import_lit_html2.html`
-    <section class="flex flex-col" data-uidex-detail-composes>
-      ${headingTpl(label)}
-      <ul class="flex flex-col">
-        ${entityListItems(ctx, entities)}
-      </ul>
-    </section>
-  `;
-}
-function usedByListTpl(ctx, label, entities) {
-  if (entities.length === 0) return null;
-  return import_lit_html2.html`
-    <section class="flex flex-col" data-uidex-detail-used-by>
-      ${headingTpl(label)}
-      <ul class="flex flex-col">
-        ${entityListItems(ctx, entities)}
-      </ul>
-    </section>
-  `;
-}
-function flowListTpl(ctx, flows) {
-  if (flows.length === 0) return null;
-  return import_lit_html2.html`
-    <section class="flex flex-col" data-uidex-detail-flows>
-      ${headingTpl(SECTION_LABELS.flows)}
-      <ul class="flex flex-col">
-        ${flows.map(
-    (flow) => import_lit_html2.html`<li>
-              ${entityLinkTpl({
-      ctx,
-      target: { kind: "flow", id: flow.id },
-      label: displayName(flow),
-      leading: kindIconTileTpl("flow")
-    })}
-            </li>`
-  )}
-      </ul>
-    </section>
-  `;
-}
-function touchesTpl(ctx, entities, query) {
+var DETAIL_SECTION_ATTRS = {
+  composes: import_static.literal`data-uidex-detail-composes`,
+  "used-by": import_static.literal`data-uidex-detail-used-by`,
+  flows: import_static.literal`data-uidex-detail-flows`,
+  touches: import_static.literal`data-uidex-detail-touches`
+};
+function entitySectionTpl(ctx, opts) {
+  const { label, entities, dataAttr, emptyText } = opts;
+  const attr = DETAIL_SECTION_ATTRS[dataAttr];
   if (entities.length === 0) {
-    return import_lit_html2.html`
-      <section class="flex flex-col gap-2" data-uidex-detail-touches>
-        ${headingTpl(SECTION_LABELS.touches)}
-        ${mutedTextTpl(query ? "No matches" : "No entities touched")}
+    if (emptyText === void 0) return null;
+    return import_static.html`
+      <section class="flex flex-col gap-2" ${attr}>
+        ${headingTpl(label)}
+        ${mutedTextTpl(emptyText)}
       </section>
     `;
   }
-  return import_lit_html2.html`
-    <section class="flex flex-col" data-uidex-detail-touches>
-      ${headingTpl(SECTION_LABELS.touches)}
+  return import_static.html`
+    <section class="flex flex-col" ${attr}>
+      ${headingTpl(label)}
       <ul class="flex flex-col">
-        ${entities.map(
-    (entity) => import_lit_html2.html`<li>
-              ${entityLinkTpl({
-      ctx,
-      target: { kind: entity.kind, id: entityKey(entity) },
-      label: displayName(entity),
-      leading: kindIconTileTpl(entity.kind)
-    })}
-            </li>`
-  )}
+        ${entityListItems(ctx, entities)}
       </ul>
     </section>
   `;
@@ -6861,6 +6485,20 @@ function screenshotTpl(url) {
     </section>
   `;
 }
+function lazyScreenshotEl(load) {
+  const holder = document.createElement("div");
+  holder.hidden = true;
+  void load().then(
+    (url) => {
+      if (!url) return;
+      (0, import_lit_html2.render)(screenshotTpl(url), holder);
+      holder.hidden = false;
+    },
+    () => {
+    }
+  );
+  return holder;
+}
 function metadataListTpl(entries) {
   return import_lit_html2.html`
     <div
@@ -6891,28 +6529,30 @@ function sectionTpl(section, ctx, query) {
       return acceptanceChecklistTpl(section.items);
     }
     case "composes":
-      return composesListTpl(
-        ctx,
-        section.label,
-        section.filterable ? filterEntities(section.entities, query) : section.entities
-      );
+      return entitySectionTpl(ctx, {
+        label: section.label,
+        entities: section.filterable ? filterEntities(section.entities, query) : section.entities,
+        dataAttr: "composes"
+      });
     case "used-by":
-      return usedByListTpl(
-        ctx,
-        section.label,
-        section.filterable ? filterEntities(section.entities, query) : section.entities
-      );
+      return entitySectionTpl(ctx, {
+        label: section.label,
+        entities: section.filterable ? filterEntities(section.entities, query) : section.entities,
+        dataAttr: "used-by"
+      });
     case "flows":
-      return flowListTpl(
-        ctx,
-        section.filterable ? filterEntities(section.flows, query) : section.flows
-      );
+      return entitySectionTpl(ctx, {
+        label: SECTION_LABELS.flows,
+        entities: section.filterable ? filterEntities(section.flows, query) : section.flows,
+        dataAttr: "flows"
+      });
     case "touches":
-      return touchesTpl(
-        ctx,
-        section.filterable ? filterEntities(section.entities, query) : section.entities,
-        query
-      );
+      return entitySectionTpl(ctx, {
+        label: SECTION_LABELS.touches,
+        entities: section.filterable ? filterEntities(section.entities, query) : section.entities,
+        dataAttr: "touches",
+        emptyText: query ? "No matches" : "No entities touched"
+      });
     case "steps":
       return stepsTpl(
         ctx,
@@ -6924,11 +6564,32 @@ function sectionTpl(section, ctx, query) {
         section.filterable ? filterIds(section.paths, query) : section.paths
       );
     case "screenshot":
-      return screenshotTpl(section.url);
+      if (section.url) return screenshotTpl(section.url);
+      if (section.load) return import_lit_html2.html`${lazyScreenshotEl(section.load)}`;
+      return null;
     case "metadata":
       return section.entries.length > 0 ? metadataListTpl(section.entries) : null;
   }
 }
+
+// src/browser/views/render/detail.ts
+function subtitleTpl(subtitle) {
+  const text = subtitle.extra ? `${subtitle.rawId} \xB7 ${subtitle.extra}` : subtitle.rawId;
+  return import_lit_html2.html`<p
+    class=${cn("text-muted-foreground font-mono text-xs", "px-2")}
+    data-uidex-detail-subtitle
+  >
+    ${text}
+  </p>`;
+}
+function notFoundTpl(ref2) {
+  return import_lit_html2.html`<p
+    class=${cn("text-muted-foreground text-sm", "p-4")}
+    data-uidex-detail-missing
+  >
+    ${ref2.kind}: ${ref2.id} not found in registry
+  </p>`;
+}
 function hasFilterableSections(sections) {
   return sections.some((s) => "filterable" in s && s.filterable === true);
 }
@@ -7289,6 +6950,34 @@ function createScreenshotLightbox(trigger, dataUrl, options) {
   };
 }
 
+// src/browser/ui/button.ts
+var buttonBase = "focus-visible:ring-ring focus-visible:ring-offset-background disabled:opacity-60 relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border text-sm font-medium outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+var buttonVariants = cva(buttonBase, {
+  defaultVariants: { size: "default", variant: "default" },
+  variants: {
+    size: {
+      default: "h-8 px-3",
+      sm: "h-7 gap-1.5 px-2.5",
+      xs: "h-6 gap-1 rounded-md px-2 text-xs",
+      lg: "h-9 px-3.5",
+      xl: "h-10 px-4 text-base",
+      icon: "size-8",
+      "icon-sm": "size-7",
+      "icon-lg": "size-9",
+      "icon-xs": "size-6 rounded-md"
+    },
+    variant: {
+      default: "border-primary bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+      destructive: "border-destructive bg-destructive shadow-xs hover:bg-destructive/90 text-white",
+      "destructive-outline": "border-input bg-popover text-destructive-foreground shadow-xs/5 hover:border-destructive/30 hover:bg-destructive/5 dark:bg-input/30",
+      ghost: "text-foreground hover:bg-accent hover:text-accent-foreground border-transparent",
+      link: "text-foreground border-transparent underline-offset-4 hover:underline",
+      outline: "border-input bg-popover text-foreground shadow-xs/5 hover:bg-accent hover:text-accent-foreground dark:bg-input/30",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 border-transparent"
+    }
+  }
+});
+
 // src/browser/views/render/form.ts
 var fieldSeq = 0;
 var nextFieldId = () => `uidex-field-${++fieldSeq}`;
@@ -7485,9 +7174,9 @@ function iconMediaTpl(iconTpl) {
     </div>
   `;
 }
-function loadingViewTpl() {
+function loadingViewTpl(rootRef) {
   return import_lit_html2.html`
-    <div class=${EMPTY_ROOT} aria-live="polite" hidden>
+    <div class=${EMPTY_ROOT} aria-live="polite" hidden ${(0, import_ref.ref)(rootRef)}>
       ${iconMediaTpl(icon(import_lucide8.Loader2, "animate-spin"))}
       <div class="flex max-w-sm flex-col items-center text-center">
         <div class=${SKELETON + " h-6 w-36 rounded-md"}></div>
@@ -7500,42 +7189,47 @@ function loadingViewTpl() {
     </div>
   `;
 }
-function successViewTpl() {
+function successViewTpl(refs) {
   return import_lit_html2.html`
-    <div class=${EMPTY_ROOT} hidden data-uidex-success-view>
+    <div class=${EMPTY_ROOT} hidden data-uidex-success-view ${(0, import_ref.ref)(refs.root)}>
       ${iconMediaTpl(icon(import_lucide8.CircleCheck))}
       <div class="flex max-w-sm flex-col items-center text-center">
         <div
           class="font-heading text-xl font-semibold"
           data-uidex-success-title
+          ${(0, import_ref.ref)(refs.title)}
         ></div>
       </div>
       <div
         class="flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm"
         data-uidex-success-actions
+        ${(0, import_ref.ref)(refs.actions)}
       >
         <a
           class=${buttonVariants({ variant: "outline", size: "sm" })}
           target="_blank"
           rel="noreferrer"
           data-uidex-success-link
+          ${(0, import_ref.ref)(refs.link)}
         ></a>
       </div>
     </div>
   `;
 }
-function errorViewTpl() {
+function errorViewTpl(refs) {
   return import_lit_html2.html`
-    <div class=${EMPTY_ROOT} hidden data-uidex-error-view>
+    <div class=${EMPTY_ROOT} hidden data-uidex-error-view ${(0, import_ref.ref)(refs.root)}>
       ${iconMediaTpl(icon(import_lucide8.CircleX))}
       <div class="flex max-w-sm flex-col items-center gap-1 text-center">
         <div
           class="font-heading text-xl font-semibold"
           data-uidex-error-title
+          ${(0, import_ref.ref)(refs.title)}
         ></div>
         <p
           class="text-muted-foreground text-sm"
           data-uidex-error-description
+          ${(0, import_ref.ref)(refs.description)}
         ></p>
       </div>
       <div
@@ -7546,6 +7240,7 @@ function errorViewTpl() {
           class=${buttonVariants({ variant: "outline", size: "sm" })}
           data-slot="button"
           data-uidex-retry-button
+          ${(0, import_ref.ref)(refs.retry)}
         >
           Try Again
         </button>
@@ -7587,8 +7282,15 @@ function renderFormSurface(surface, ctx, root) {
     });
   }
   const formRef = (0, import_ref.createRef)();
-  const statusRef = (0, import_ref.createRef)();
-  const submitRef = (0, import_ref.createRef)();
+  const loadingRef = (0, import_ref.createRef)();
+  const successRef = (0, import_ref.createRef)();
+  const successTitleRef = (0, import_ref.createRef)();
+  const successLinkRef = (0, import_ref.createRef)();
+  const successActionsRef = (0, import_ref.createRef)();
+  const errorRef = (0, import_ref.createRef)();
+  const errorTitleRef = (0, import_ref.createRef)();
+  const errorDescriptionRef = (0, import_ref.createRef)();
+  const retryRef = (0, import_ref.createRef)();
   (0, import_lit_html2.render)(
     import_lit_html2.html`
       <section
@@ -7603,7 +7305,19 @@ function renderFormSurface(surface, ctx, root) {
           novalidate
           data-uidex-form=${surface.id}
         ></form>
-        ${loadingViewTpl()} ${successViewTpl()} ${errorViewTpl()}
+        ${loadingViewTpl(loadingRef)}
+        ${successViewTpl({
+      root: successRef,
+      title: successTitleRef,
+      link: successLinkRef,
+      actions: successActionsRef
+    })}
+        ${errorViewTpl({
+      root: errorRef,
+      title: errorTitleRef,
+      description: errorDescriptionRef,
+      retry: retryRef
+    })}
       </section>
     `,
     root
@@ -7633,32 +7347,15 @@ function renderFormSurface(surface, ctx, root) {
     }
   });
   form.append(status);
-  const sectionEl = root.querySelector(
-    "[data-uidex-form-surface]"
-  );
-  const loadingView = sectionEl.querySelector("[aria-live='polite'][hidden]") ?? sectionEl.children[1];
-  const successView = sectionEl.querySelector(
-    "[data-uidex-success-view]"
-  );
-  const successTitle = sectionEl.querySelector(
-    "[data-uidex-success-title]"
-  );
-  const successLink = sectionEl.querySelector(
-    "[data-uidex-success-link]"
-  );
-  const successActions = successLink.parentElement;
-  const errorView = sectionEl.querySelector(
-    "[data-uidex-error-view]"
-  );
-  const errorTitle = sectionEl.querySelector(
-    "[data-uidex-error-title]"
-  );
-  const errorDescription = sectionEl.querySelector(
-    "[data-uidex-error-description]"
-  );
-  const retryButton = sectionEl.querySelector(
-    "[data-uidex-retry-button]"
-  );
+  const loadingView = loadingRef.value;
+  const successView = successRef.value;
+  const successTitle = successTitleRef.value;
+  const successLink = successLinkRef.value;
+  const successActions = successActionsRef.value;
+  const errorView = errorRef.value;
+  const errorTitle = errorTitleRef.value;
+  const errorDescription = errorDescriptionRef.value;
+  const retryButton = retryRef.value;
   function clearAllFieldErrors() {
     for (const f of fields) f.setError(null);
   }
@@ -8059,7 +7756,7 @@ function defaultFilter(item, query) {
 function rowTag(item) {
   return item.tag ?? item.value;
 }
-function resolveLeadingTpl(item, ctx) {
+function resolveLeadingTpl(item) {
   if (item.entityChip) return kindIconTileTpl(item.entityChip.entity.kind);
   if (item.leading) {
     const node = item.leading();
@@ -8164,7 +7861,7 @@ function buildItemsDom(surface, ctx, filteredItems, allByValue, content) {
                       data-uidex-item-value=${item.value}
                     >
                       ${rowTpl({
-          leading: resolveLeadingTpl(item, ctx),
+          leading: resolveLeadingTpl(item),
           label: item.label,
           subtitle: item.subtitle,
           trailing: item.trailing ?? item.shortcut
@@ -8209,7 +7906,7 @@ function renderListSurface(surface, ctx, root) {
     return root.ownerDocument ?? document;
   };
   const hasDefault = surface.defaultHighlight !== void 0 && allByValue.has(surface.defaultHighlight);
-  const { section, scrollRoot, viewport, content } = renderShell(surface, root);
+  const { scrollRoot, viewport, content } = renderShell(surface, root);
   let maps = buildItemsDom(surface, ctx, filteredItems, allByValue, content);
   const controller = createListController({
     surfaceId: surface.id,
@@ -8905,52 +8602,16 @@ function sameRef2(a, b) {
   if (a === null || b === null) return false;
   return a.kind === b.kind && a.id === b.id;
 }
-function resolveHints(view, ctx) {
-  const h = view.hints;
-  if (!h) return [];
-  if (typeof h === "function") {
-    try {
-      return h(ctx) ?? [];
-    } catch (err) {
-      console.error(`[uidex] view "${view.id}" hints() threw`, err);
-      return [];
-    }
-  }
-  return h;
-}
-function resolveTitle(view, ctx) {
-  const t = view.title;
-  if (!t) return "";
-  if (typeof t === "function") {
-    try {
-      return t(ctx) ?? "";
-    } catch (err) {
-      console.error(`[uidex] view "${view.id}" title() threw`, err);
-      return "";
-    }
-  }
-  return t;
-}
-function resolveActions(view, ctx, globalActions) {
-  const result = [];
-  const fn = view.actions;
-  if (fn) {
-    try {
-      const viewActions2 = fn(ctx) ?? [];
-      result.push(...viewActions2);
-    } catch (err) {
-      console.error(`[uidex] view "${view.id}" actions() threw`, err);
-    }
-  }
-  if (globalActions) {
+function resolveProp(view, ctx, value, propName, fallback) {
+  if (typeof value === "function") {
     try {
-      const globals = globalActions(ctx) ?? [];
-      result.push(...globals);
+      return value(ctx) ?? fallback;
     } catch (err) {
-      console.error(`[uidex] globalActions() threw`, err);
+      console.error(`[uidex] view "${view.id}" ${propName}() threw`, err);
+      return fallback;
     }
   }
-  return result;
+  return value ?? fallback;
 }
 function createViewStack(options) {
   const { container, views, session, registry, highlight } = options;
@@ -9018,39 +8679,40 @@ function createViewStack(options) {
       color: KIND_STYLE[top.ctx.ref.kind].color
     });
   }
-  function updateChrome() {
-    if (!shell) return;
-    const top = mounted[mounted.length - 1];
-    if (!top) return;
+  function updateNavButtons(shell2, top) {
     const atRoot = mounted.length <= 1 && top.view.id === "command-palette";
-    shell.backBtn.hidden = atRoot;
-    shell.searchIcon.hidden = !atRoot;
+    shell2.backBtn.hidden = atRoot;
+    shell2.searchIcon.hidden = !atRoot;
+  }
+  function updateTitle(shell2, top) {
     const searchable = top.view.searchable !== false;
-    shell.searchInput.hidden = !searchable;
-    const titleText = searchable ? "" : resolveTitle(top.view, top.ctx);
-    shell.headerTitle.textContent = titleText;
-    shell.headerTitle.hidden = searchable || !titleText;
-    shell.footerLeft.replaceChildren();
+    shell2.searchInput.hidden = !searchable;
+    const titleText = searchable ? "" : resolveProp(top.view, top.ctx, top.view.title, "title", "");
+    shell2.headerTitle.textContent = titleText;
+    shell2.headerTitle.hidden = searchable || !titleText;
+  }
+  function updateFooterChip(shell2, top) {
+    shell2.footerLeft.replaceChildren();
     const refEntity = top.ctx.ref ? top.ctx.registry.get(top.ctx.ref.kind, top.ctx.ref.id) : null;
     if (refEntity) {
-      shell.footerLeft.append(
+      shell2.footerLeft.append(
         renderKindChip({
           entity: refEntity,
           withKindName: true
         })
       );
     } else {
-      shell.footerLeft.append(shell.logo);
+      shell2.footerLeft.append(shell2.logo);
     }
-    hintChangeSub?.();
-    hintChangeSub = null;
-    highlightActionsSub?.();
-    highlightActionsSub = null;
-    shell.footerRight.replaceChildren();
-    const footerItems = [];
-    const enterHint = resolveHints(top.view, top.ctx).find(
-      (h) => h.key.includes("\u21B5")
-    );
+  }
+  function buildEnterHint(top, footerItems) {
+    const enterHint = resolveProp(
+      top.view,
+      top.ctx,
+      top.view.hints,
+      "hints",
+      []
+    ).find((h) => h.key.includes("\u21B5"));
     const src = top.mounted.submitIntent;
     if (src) {
       const key = enterHint?.key ?? "\u21B5";
@@ -9071,28 +8733,52 @@ function createViewStack(options) {
     } else if (enterHint) {
       footerItems.push(createHint(enterHint.key, enterHint.label));
     }
+  }
+  function buildActions(shell2, top, footerItems) {
     const actionsDivider = createFooterDivider();
-    const viewActions2 = resolveActions(top.view, top.ctx);
+    const viewActions2 = resolveProp(
+      top.view,
+      top.ctx,
+      top.view.actions,
+      "actions",
+      []
+    );
     const hlSrc = top.mounted.highlightActions;
     const syncActions = () => {
       const hlActions = hlSrc?.get() ?? [];
       const combined = [...hlActions, ...viewActions2];
-      shell.actionsPopup.setActions(combined);
+      shell2.actionsPopup.setActions(combined);
       const visible = combined.length > 0;
-      shell.actionsPopup.trigger.hidden = !visible;
+      shell2.actionsPopup.trigger.hidden = !visible;
       actionsDivider.hidden = !visible || footerItems.length === 0;
     };
     if (hlSrc) {
       highlightActionsSub = hlSrc.subscribe(syncActions);
     }
     for (let i = 0; i < footerItems.length; i++) {
-      if (i > 0) shell.footerRight.append(createFooterDivider());
-      shell.footerRight.append(footerItems[i]);
+      if (i > 0) shell2.footerRight.append(createFooterDivider());
+      shell2.footerRight.append(footerItems[i]);
     }
-    shell.footerRight.append(actionsDivider);
-    shell.footerRight.append(shell.actionsPopup.trigger);
+    shell2.footerRight.append(actionsDivider);
+    shell2.footerRight.append(shell2.actionsPopup.trigger);
     syncActions();
   }
+  function updateChrome() {
+    if (!shell) return;
+    const top = mounted[mounted.length - 1];
+    if (!top) return;
+    updateNavButtons(shell, top);
+    updateTitle(shell, top);
+    updateFooterChip(shell, top);
+    hintChangeSub?.();
+    hintChangeSub = null;
+    highlightActionsSub?.();
+    highlightActionsSub = null;
+    shell.footerRight.replaceChildren();
+    const footerItems = [];
+    buildEnterHint(top, footerItems);
+    buildActions(shell, top, footerItems);
+  }
   function render2() {
     if (!container.isConnected) return;
     const stack = session.getState().stack;
@@ -9189,7 +8875,7 @@ function createViewStack(options) {
 
 // src/browser/views/built-in/ids.ts
 var BUILT_IN_VIEW_IDS = {
-  archiveReason: "archive-reason",
+  closeReason: "close-reason",
   commandPalette: "command-palette",
   elements: "elements",
   entityReports: "entity-reports",
@@ -9240,13 +8926,13 @@ function parentDetail(ref2) {
   return { id: DETAIL_VIEW_FOR_KIND[ref2.kind], ref: ref2 };
 }
 
-// src/browser/views/built-in/archive-reason.ts
+// src/browser/views/built-in/close-reason.ts
 var import_lucide11 = require("lucide");
 var pendingReportId = null;
-var afterArchive = null;
-function setArchiveTarget(reportId, onDone) {
+var afterClose = null;
+function setCloseTarget(reportId, onDone) {
   pendingReportId = reportId;
-  afterArchive = onDone;
+  afterClose = onDone;
 }
 function leadingIcon(iconNode) {
   return () => {
@@ -9261,16 +8947,16 @@ function spinnerTile() {
   return createIconTile(spinner);
 }
 var REASONS = [
-  { value: "fixed", label: "Fixed", icon: import_lucide11.CircleCheck },
+  { value: "fixed", label: "Resolved", icon: import_lucide11.CircleCheck },
   { value: "not_a_bug", label: "Not a bug", icon: import_lucide11.BugOff },
   { value: "duplicate", label: "Duplicate", icon: import_lucide11.Copy },
   { value: "wont_fix", label: "Won't fix", icon: import_lucide11.Ban }
 ];
-var archiveReasonView = {
-  id: BUILT_IN_VIEW_IDS.archiveReason,
+var closeReasonView = {
+  id: BUILT_IN_VIEW_IDS.closeReason,
   matches: () => false,
   parent: (ref2) => ref2 ? { id: BUILT_IN_VIEW_IDS.reportDetail, ref: ref2 } : null,
-  title: "Archive reason",
+  title: "Close reason",
   searchable: false,
   focusTarget: (host) => host.querySelector("[data-uidex-list-content]"),
   surface: () => ({ kind: "list", id: "unused", items: [] }),
@@ -9283,12 +8969,12 @@ var archiveReasonView = {
     }));
     const surface = {
       kind: "list",
-      id: "uidex-archive-reason",
+      id: "uidex-close-reason",
       searchable: false,
       items,
       emptyLabel: "No reasons available",
       onSelect: async (item) => {
-        if (busy || !pendingReportId || !ctx.registry.archiveReport) return;
+        if (busy || !pendingReportId || !ctx.registry.closeReport) return;
         busy = true;
         const row = root.querySelector(
           `[data-uidex-item-value="${item.value}"]`
@@ -9300,13 +8986,10 @@ var archiveReasonView = {
           row.style.pointerEvents = "none";
         }
         try {
-          await ctx.registry.archiveReport(
-            pendingReportId,
-            item.value
-          );
-          const done = afterArchive;
+          await ctx.registry.closeReport(pendingReportId, item.value);
+          const done = afterClose;
           pendingReportId = null;
-          afterArchive = null;
+          afterClose = null;
           done?.();
         } catch {
           busy = false;
@@ -9324,7 +9007,7 @@ var archiveReasonView = {
           }
           const error = document.createElement("p");
           error.className = "text-destructive px-4 py-2 text-xs";
-          error.textContent = "Archive failed \u2014 try again";
+          error.textContent = "Close failed \u2014 try again";
           root.querySelector("[data-uidex-list-content]")?.prepend(error);
           setTimeout(() => error.remove(), 3e3);
         }
@@ -9643,6 +9326,7 @@ function createCommandPaletteView(shortcut) {
 
 // src/browser/internal/screenshot.ts
 var import_modern_screenshot = require("modern-screenshot");
+var WEBP_QUALITY = 0.85;
 function resolveBackgroundColor(el2) {
   let node = el2;
   while (node) {
@@ -9656,8 +9340,7 @@ function isUidexChrome(node) {
   if (node.nodeType !== Node.ELEMENT_NODE) return false;
   const el2 = node;
   if (el2.shadowRoot !== null) return true;
-  const cls = el2.classList;
-  return cls.contains(SURFACE_HOST_CLASS) || cls.contains(SURFACE_CONTAINER_CLASS);
+  return el2.classList.contains(SURFACE_HOST_CLASS);
 }
 async function captureScreenshot(options = {}) {
   if (typeof document === "undefined") {
@@ -9669,8 +9352,10 @@ async function captureScreenshot(options = {}) {
   const scale = options.maxWidth && width > options.maxWidth ? options.maxWidth / width : 1;
   const padding = 16;
   const height = target.scrollHeight || target.clientHeight;
-  return (0, import_modern_screenshot.domToPng)(target, {
+  const encode = options.format === "png" ? import_modern_screenshot.domToPng : import_modern_screenshot.domToWebp;
+  return encode(target, {
     scale,
+    quality: WEBP_QUALITY,
     width: width + padding * 2,
     height: height + padding * 2,
     backgroundColor: resolveBackgroundColor(target),
@@ -9726,12 +9411,6 @@ function collectFlowsTouching(ctx, targetId) {
 }
 
 // src/browser/views/builder/detail-builder.ts
-var DOM_BACKED_KINDS2 = /* @__PURE__ */ new Set([
-  "element",
-  "region",
-  "widget",
-  "primitive"
-]);
 var DETAIL_HINTS = [{ key: "\u21B5", label: "Open" }];
 function copyPathAction(ref2, loc) {
   const identifier = `${ref2.kind}:${ref2.id}`;
@@ -9833,7 +9512,10 @@ function copyScreenshotAction(ref2) {
         const target = resolveEntityElement(ref2) ?? void 0;
         const dataUrl = await captureScreenshot({
           target,
-          maxWidth: 1280
+          maxWidth: 1280,
+          // Clipboard write requires PNG — the async Clipboard API rejects
+          // image/webp (`ClipboardItem` throws on Chrome/Safari).
+          format: "png"
         });
         const res = await fetch(dataUrl);
         const blob = await res.blob();
@@ -9884,7 +9566,7 @@ function createEntityDetailView(config) {
       if (cloud?.integrations.getCachedConfig()?.hasJira) {
         actions.push({ ...jiraAction(ctx.ref), group: "Report" });
       }
-      if (DOM_BACKED_KINDS2.has(kind) && resolveEntityElement(ctx.ref)) {
+      if (DOM_BACKED_KINDS.has(kind) && resolveEntityElement(ctx.ref)) {
         actions.push({ ...highlightElementAction(ctx.ref), group: "Inspect" });
         actions.push({ ...copyScreenshotAction(ctx.ref), group: "Inspect" });
       }
@@ -9910,7 +9592,7 @@ function createEntityDetailView(config) {
           sections.push(s);
         }
       }
-      if (!DOM_BACKED_KINDS2.has(kind)) {
+      if (!DOM_BACKED_KINDS.has(kind)) {
         sections.push({
           id: "composes",
           label: SECTION_LABELS.contains,
@@ -9918,7 +9600,7 @@ function createEntityDetailView(config) {
           filterable: true
         });
       }
-      if (DOM_BACKED_KINDS2.has(kind) && meta?.features?.length) {
+      if (DOM_BACKED_KINDS.has(kind) && meta?.features?.length) {
         const featureEntities = meta.features.map((fId) => ctx.registry.get("feature", fId)).filter((e) => !!e);
         if (featureEntities.length > 0) {
           sections.push({
@@ -9948,35 +9630,14 @@ function createEntityDetailView(config) {
 }
 
 // src/browser/views/built-in/entity-detail.ts
-function collectDomParents(ctx, ref2) {
-  const el2 = resolveEntityElement(ref2);
-  if (!el2) return [];
-  const parents = [];
-  const seen = /* @__PURE__ */ new Set();
-  let node = el2.parentElement;
-  while (node) {
-    if (node instanceof HTMLElement) {
-      for (const [attr, kind] of UIDEX_ATTR_TO_KIND) {
-        const id = node.getAttribute(attr);
-        if (id) {
-          const key = `${kind}:${id}`;
-          if (!seen.has(key)) {
-            seen.add(key);
-            const entity = ctx.registry.get(kind, id);
-            if (entity) parents.push(entity);
-          }
-        }
-      }
-    }
-    node = node.parentElement;
-  }
-  return parents;
+function collectFeatureConsumers(ctx, featureId) {
+  return ctx.registry.list("page").filter((page) => page.meta?.features?.includes(featureId));
 }
-function usedBySection(ctx, ref2) {
+function usedBySection(ctx, featureId) {
   return {
     id: "used-by",
     label: SECTION_LABELS.usedBy,
-    entities: collectDomParents(ctx, ref2),
+    entities: collectFeatureConsumers(ctx, featureId),
     filterable: true
   };
 }
@@ -9997,9 +9658,7 @@ var featureDetailView = createEntityDetailView({
   id: "feature-detail",
   kind: "feature",
   fallbackTitle: "Feature",
-  extraSections: (ctx, entity) => [
-    usedBySection(ctx, { kind: "feature", id: entity.id })
-  ]
+  extraSections: (ctx, entity) => [usedBySection(ctx, entity.id)]
 });
 var regionDetailView = createEntityDetailView({
   id: "region-detail",
@@ -10127,6 +9786,15 @@ var reportDetailView = {
     }
     if (report.screenshot) {
       sections.push({ id: "screenshot", url: report.screenshot });
+    } else {
+      const pins = ctx.cloud?.pins;
+      const fetchScreenshot = pins?.screenshot;
+      if (pins && fetchScreenshot) {
+        sections.push({
+          id: "screenshot",
+          load: () => fetchScreenshot.call(pins, report.id)
+        });
+      }
     }
     const metaEntries = [];
     if (report.url) metaEntries.push({ label: "URL", value: report.url });
@@ -10137,14 +9805,14 @@ var reportDetailView = {
       sections.push({ id: "metadata", entries: metaEntries });
     }
     const actions = [];
-    if (ctx.registry.archiveReport) {
+    if (ctx.registry.closeReport) {
       actions.push({
-        id: "archive",
-        label: "Archive",
+        id: "close",
+        label: "Close",
         icon: "archive-x",
         run: () => {
-          setArchiveTarget(report.id, () => ctx.pop());
-          ctx.push({ id: BUILT_IN_VIEW_IDS.archiveReason });
+          setCloseTarget(report.id, () => ctx.pop());
+          ctx.push({ id: BUILT_IN_VIEW_IDS.closeReason });
         }
       });
     }
@@ -10182,13 +9850,13 @@ function reportToItem(report, ctx) {
   const label = raw.length > 80 ? raw.slice(0, 80) + "\u2026" : raw;
   const kind = ctx.ref?.kind ?? "element";
   const actions = [];
-  if (ctx.registry.archiveReport) {
+  if (ctx.registry.closeReport) {
     actions.push({
-      id: `archive-${report.id}`,
-      label: "Archive",
+      id: `close-${report.id}`,
+      label: "Close",
       perform: () => {
-        setArchiveTarget(report.id, () => ctx.pop());
-        ctx.push({ id: BUILT_IN_VIEW_IDS.archiveReason });
+        setCloseTarget(report.id, () => ctx.pop());
+        ctx.push({ id: BUILT_IN_VIEW_IDS.closeReason });
       }
     });
   }
@@ -10341,7 +10009,7 @@ function capitalize2(s) {
   return s.length === 0 ? s : s[0].toUpperCase() + s.slice(1);
 }
 function renderPayloadMarkdown(payload) {
-  const heading = payload.title ?? `${capitalize2(payload.type)} Report`;
+  const heading = payload.title ?? `${capitalize2(payload.type ?? "")} Report`;
   const ctx = payload.context;
   const lines = [
     `# ${heading}`,
@@ -10410,12 +10078,6 @@ var reportFields = [
 ];
 
 // src/browser/views/built-in/report/view-builder.ts
-var DOM_BACKED_KINDS3 = /* @__PURE__ */ new Set([
-  "element",
-  "region",
-  "widget",
-  "primitive"
-]);
 var KIND_TO_ATTR = new Map(
   UIDEX_ATTR_TO_KIND.map(([attr, kind]) => [kind, attr])
 );
@@ -10486,7 +10148,7 @@ function createReportView(config) {
       const cloud = resolveCloud(ctx);
       const extra = extraFields ? extraFields(ctx) : [];
       const fields = [...extra, ...baseFields ?? reportFields];
-      const isDomBacked = ctx.ref != null && DOM_BACKED_KINDS3.has(ctx.ref.kind);
+      const isDomBacked = ctx.ref != null && DOM_BACKED_KINDS.has(ctx.ref.kind);
       const targetEl = ctx.ref && isDomBacked ? resolveElement(ctx.ref) : null;
       const screenshotPromise = isDomBacked ? captureScreenshot({
         target: targetEl ?? void 0,
@@ -11063,7 +10725,7 @@ var pinSettingsView = {
 // src/browser/views/built-in/index.ts
 function buildDefaultViews(shortcut) {
   return [
-    archiveReasonView,
+    closeReasonView,
     createCommandPaletteView(shortcut),
     explorePageView,
     componentDetailView,
@@ -11091,6 +10753,27 @@ function buildDefaultViews(shortcut) {
 }
 
 // src/browser/create-uidex.ts
+function getVisibleEntities() {
+  if (typeof document === "undefined") return [];
+  const selector = UIDEX_ATTR_TO_KIND.map(([a]) => `[${a}]`).join(",");
+  const nodes = document.querySelectorAll(selector);
+  const ids = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const node of nodes) {
+    if (node.closest(SURFACE_IGNORE_SELECTOR)) continue;
+    for (const [attr, kind] of UIDEX_ATTR_TO_KIND) {
+      const id = node.getAttribute(attr);
+      if (!id) continue;
+      const key = `${kind}:${id}`;
+      if (!seen.has(key)) {
+        seen.add(key);
+        ids.push(key);
+      }
+      break;
+    }
+  }
+  return ids;
+}
 function createUidex(options = {}) {
   const registry = createRegistry();
   const inspectorRef = { current: null };
@@ -11125,7 +10808,7 @@ function createUidex(options = {}) {
   const views = createRouter({ session });
   const cloud = options.cloud ?? null;
   const ingestOpts = resolveIngestOptions(options.ingest, cloud !== null);
-  const ingest = ingestOpts ? createIngest({ session, ...ingestOpts }) : null;
+  const ingest = ingestOpts ? createIngest(ingestOpts) : null;
   if (options.defaultViews !== false) {
     for (const view of buildDefaultViews(options.shortcut)) views.add(view);
   }
@@ -11135,6 +10818,94 @@ function createUidex(options = {}) {
   let shadowRoot = null;
   const mountCleanup = createCleanupStack();
   let mounted = false;
+  function syncReportsToRegistry() {
+    const layer = pinLayerRef.current;
+    if (!layer) return;
+    const byEntity = /* @__PURE__ */ new Map();
+    for (const pin of layer.getAllPins()) {
+      const cid = pin.entity ?? "";
+      if (!cid) continue;
+      const list = byEntity.get(cid);
+      if (list) list.push(pin);
+      else byEntity.set(cid, [pin]);
+    }
+    for (const [cid, pins] of byEntity) {
+      const ref2 = parseComponentRef(cid);
+      registry.setReports(ref2.kind, ref2.id, pins);
+    }
+  }
+  function setupKeyBindings(root, viewStack) {
+    const bindings = bindShadowKeys({
+      shadowRoot: root,
+      session,
+      getActionsPopup: () => viewStack.getActionsPopup(),
+      getPinLayer: () => pinLayerRef.current,
+      shortcut: options.shortcut
+    });
+    mountCleanup.add(bindings);
+    return bindings;
+  }
+  function setupPinLayer(root, shell, channel, getCurrentRoute, getMatchMode, getPathname) {
+    if (cloud) {
+      registry.closeReport = async (reportId, status) => {
+        pinLayerRef.current?.removePin(reportId);
+        await cloud.pins.close(
+          reportId,
+          status
+        );
+        syncReportsToRegistry();
+      };
+    }
+    const pinLayer = createPinLayer({
+      container: root,
+      onOpenPinDetail: (componentId, reportId) => {
+        const ref2 = parseComponentRef(componentId);
+        setSelectedReportId(reportId);
+        const entry = { id: BUILT_IN_VIEW_IDS.reportDetail, ref: ref2 };
+        session.mode.transition.enterViewing(views.buildStack(entry));
+      },
+      onHoverPin: (anchor, componentId) => {
+        const overlay = overlayRef.current;
+        if (!overlay) return;
+        if (!anchor || !componentId) {
+          overlay.hide();
+          return;
+        }
+        overlay.show(anchor, {
+          color: isDarkMode() ? "#e4e4e7" : "#27272a"
+        });
+      },
+      onPinsChanged: syncReportsToRegistry
+    });
+    shell.menuBar.setPinLayer(pinLayer);
+    pinLayerRef.current = pinLayer;
+    mountCleanup.add(() => {
+      pinLayer.destroy();
+      pinLayerRef.current = null;
+      registry.closeReport = void 0;
+    });
+    if (cloud) {
+      const detach = pinLayer.attachCloud({
+        cloud,
+        channel,
+        getRoute: getCurrentRoute,
+        getPathname,
+        getVisibleEntities,
+        getMatchMode,
+        onError: (err) => console.warn("[uidex] pin fetch failed", err)
+      });
+      mountCleanup.add(detach);
+      if (channel && typeof window !== "undefined") {
+        const onRouteChange = () => {
+          const route = getCurrentRoute();
+          channel?.joinRoute(route);
+          void pinLayer.refresh();
+        };
+        const detachRoute = bindRouteChange(onRouteChange);
+        mountCleanup.add(detachRoute);
+      }
+    }
+  }
   function mount(target) {
     if (mounted) return;
     const mountTarget = target ?? (typeof document !== "undefined" ? document.body : null);
@@ -11143,28 +10914,7 @@ function createUidex(options = {}) {
     }
     const getPathname = () => typeof location !== "undefined" ? location.pathname : "/";
     const getCurrentRoute = () => options.getRoute?.() ?? findCurrentRoutePath(registry) ?? getPathname();
-    const getVisibleEntities = () => {
-      if (typeof document === "undefined") return [];
-      const selector = UIDEX_ATTR_TO_KIND.map(([a]) => `[${a}]`).join(",");
-      const nodes = document.querySelectorAll(selector);
-      const ids = [];
-      const seen = /* @__PURE__ */ new Set();
-      for (const node of nodes) {
-        if (node.closest(SURFACE_IGNORE_SELECTOR)) continue;
-        for (const [attr, kind] of UIDEX_ATTR_TO_KIND) {
-          const id = node.getAttribute(attr);
-          if (!id) continue;
-          const key = `${kind}:${id}`;
-          if (!seen.has(key)) {
-            seen.add(key);
-            ids.push(key);
-          }
-          break;
-        }
-      }
-      return ids;
-    };
-    const getMatchMode = () => (typeof localStorage !== "undefined" ? localStorage.getItem("uidex:pin-match-mode") : null) ?? "route";
+    const getMatchMode = () => readMode();
     let channel = null;
     if (cloud && options.user) {
       channel = cloud.realtime.connect({
@@ -11185,7 +10935,6 @@ function createUidex(options = {}) {
         onSelect: (match) => {
           const route = views.resolve(match.ref);
           if (!route) return;
-          session.select(match.ref);
           const entry = { id: route.view.id, ref: match.ref };
           session.mode.transition.enterViewing(views.buildStack(entry));
         }
@@ -11236,92 +10985,15 @@ function createUidex(options = {}) {
     });
     mountCleanup.add(viewStack);
     if (shadowRoot) {
-      keyBindings = bindShadowKeys({
+      keyBindings = setupKeyBindings(shadowRoot, viewStack);
+      setupPinLayer(
         shadowRoot,
-        session,
-        getActionsPopup: () => viewStack.getActionsPopup(),
-        getPinLayer: () => pinLayerRef.current,
-        shortcut: options.shortcut
-      });
-      mountCleanup.add(keyBindings);
-    }
-    if (shadowRoot) {
-      const syncReportsToRegistry = () => {
-        const layer = pinLayerRef.current;
-        if (!layer) return;
-        const byEntity = /* @__PURE__ */ new Map();
-        for (const pin of layer.getAllPins()) {
-          const cid = pin.entity ?? "";
-          if (!cid) continue;
-          const list = byEntity.get(cid);
-          if (list) list.push(pin);
-          else byEntity.set(cid, [pin]);
-        }
-        for (const [cid, pins] of byEntity) {
-          const ref2 = parseComponentRef(cid);
-          registry.setReports(ref2.kind, ref2.id, pins);
-        }
-      };
-      if (cloud) {
-        registry.archiveReport = async (reportId, reason) => {
-          pinLayerRef.current?.removePin(reportId);
-          await cloud.pins.archive(
-            reportId,
-            reason
-          );
-          syncReportsToRegistry();
-        };
-      }
-      const pinLayer = createPinLayer({
-        container: shadowRoot,
-        currentBranch: options.git?.branch ?? null,
-        onOpenPinDetail: (componentId, reportId) => {
-          const ref2 = parseComponentRef(componentId);
-          setSelectedReportId(reportId);
-          const entry = { id: BUILT_IN_VIEW_IDS.reportDetail, ref: ref2 };
-          session.mode.transition.enterViewing(views.buildStack(entry));
-        },
-        onHoverPin: (anchor, componentId) => {
-          const overlay = overlayRef.current;
-          if (!overlay) return;
-          if (!anchor || !componentId) {
-            overlay.hide();
-            return;
-          }
-          overlay.show(anchor, {
-            color: isDarkMode() ? "#e4e4e7" : "#27272a"
-          });
-        },
-        onPinsChanged: syncReportsToRegistry
-      });
-      shell.menuBar.setPinLayer(pinLayer);
-      pinLayerRef.current = pinLayer;
-      mountCleanup.add(() => {
-        pinLayer.destroy();
-        pinLayerRef.current = null;
-        registry.archiveReport = void 0;
-      });
-      if (cloud) {
-        const detach = pinLayer.attachCloud({
-          cloud,
-          channel,
-          getRoute: getCurrentRoute,
-          getPathname,
-          getVisibleEntities,
-          getMatchMode,
-          onError: (err) => console.warn("[uidex] pin fetch failed", err)
-        });
-        mountCleanup.add(detach);
-        if (channel && typeof window !== "undefined") {
-          const onRouteChange = () => {
-            const route = getCurrentRoute();
-            channel?.joinRoute(route);
-            void pinLayer.refresh();
-          };
-          const detachRoute = bindRouteChange(onRouteChange);
-          mountCleanup.add(detachRoute);
-        }
-      }
+        shell,
+        channel,
+        getCurrentRoute,
+        getMatchMode,
+        getPathname
+      );
     }
     if (ingest) {
       ingest.start();
@@ -11352,7 +11024,6 @@ function createUidex(options = {}) {
 0 && (module.exports = {
   ENTITY_KINDS,
   KIND_STYLE,
-  SURFACE_CONTAINER_CLASS,
   SURFACE_HOST_CLASS,
   SURFACE_IGNORE_SELECTOR,
   UnknownEntityKindError,
@@ -11367,7 +11038,6 @@ function createUidex(options = {}) {
   createCommandPaletteView,
   createConsoleCapture,
   createCursorTooltip,
-  createHighlightController,
   createIngest,
   createInspector,
   createMenuBar,
@@ -11384,13 +11054,11 @@ function createUidex(options = {}) {
   createThemeDetector,
   createUidex,
   createViewStack,
-  defaultResolveMatch,
   displayName,
   entityKey,
   featureDetailView,
   flowDetailView,
   formatShortcutLabel,
-  getNativeFetch,
   isMetaKind,
   nativeFetch,
   pageDetailView,