uidex 0.4.0 → 0.5.0

package/dist/headless/index.cjs

@@ -24,7 +24,7 @@ __export(headless_exports, {
 });
 module.exports = __toCommonJS(headless_exports);
 
-// src/entities/types.ts
+// src/shared/entities/types.ts
 var ENTITY_KINDS = [
   "route",
   "page",
@@ -62,7 +62,7 @@ function assertEntityKind(kind) {
   if (!KIND_SET.has(kind)) throw new UnknownEntityKindError(kind);
 }
 
-// src/entities/registry.ts
+// src/shared/entities/registry.ts
 function emptyStore() {
   return {
     route: /* @__PURE__ */ new Map(),
@@ -144,10 +144,33 @@ function createRegistry() {
       return ids.has(entity.id);
     });
   };
-  return { add, get, list, query, byScope, touchedBy };
+  const reports = /* @__PURE__ */ new Map();
+  const reportsCbs = /* @__PURE__ */ new Set();
+  const setReports = (kind, id, records) => {
+    reports.set(`${kind}:${id}`, records);
+    for (const cb of reportsCbs) cb();
+  };
+  const getReports = (kind, id) => reports.get(`${kind}:${id}`) ?? [];
+  const listReportKeys = () => Array.from(reports.keys());
+  const onReportsChange = (cb) => {
+    reportsCbs.add(cb);
+    return () => reportsCbs.delete(cb);
+  };
+  return {
+    add,
+    get,
+    list,
+    query,
+    byScope,
+    touchedBy,
+    setReports,
+    getReports,
+    listReportKeys,
+    onReportsChange
+  };
 }
 
-// src/entities/style.ts
+// src/shared/entities/style.ts
 var import_lucide = require("lucide");
 var KIND_STYLE = {
   route: {
@@ -208,7 +231,7 @@ var KIND_STYLE = {
   }
 };
 
-// src/entities/display-name.ts
+// src/shared/entities/display-name.ts
 function prettify(id) {
   const parts = id.split(/[-_]+/).filter(Boolean);
   const words = parts.flatMap((part) => part.split(/(?=[A-Z])/).filter(Boolean));
@@ -226,7 +249,7 @@ function displayName(entity, node) {
   return prettify(entity.id);
 }
 
-// src/internal/cleanup.ts
+// src/browser/internal/cleanup.ts
 function createCleanupStack() {
   const stack = [];
   return {
@@ -248,293 +271,147 @@ function createCleanupStack() {
   };
 }
 
-// src/session/store.ts
-var import_xstate3 = require("xstate");
-var import_vanilla = require("zustand/vanilla");
+// src/browser/session/store.ts
+var import_vanilla3 = require("zustand/vanilla");
 
-// src/flows/highlight.ts
-var import_xstate = require("xstate");
-var initialContext = {
-  ref: null,
-  element: null,
-  pinnedRef: null,
-  color: null
+// src/browser/session/mode.ts
+var import_vanilla = require("zustand/vanilla");
+var COMMAND_PALETTE_ENTRY = {
+  id: "command-palette",
+  ref: null
 };
-var highlightMachine = (0, import_xstate.setup)({
-  types: {},
-  actions: {
-    showOverlay: () => {
+function createModeStore(options) {
+  const { nav, bindings } = options;
+  const store = (0, import_vanilla.createStore)(() => ({
+    mode: "idle",
+    inspectorActive: false
+  }));
+  const transition = {
+    openPalette() {
+      const prev = store.getState();
+      if (prev.mode === "inspecting") {
+        bindings?.destroyInspector?.();
+      }
+      nav.nav.reset([COMMAND_PALETTE_ENTRY]);
+      store.setState({ mode: "palette", inspectorActive: false });
     },
-    hideOverlay: () => {
+    openInspector() {
+      bindings?.mountInspector?.();
+      nav.nav.clear();
+      store.setState({ mode: "inspecting", inspectorActive: true });
     },
-    updateOverlay: () => {
-    }
-  }
-}).createMachine({
-  id: "highlight",
-  initial: "none",
-  context: initialContext,
-  states: {
-    none: {
-      entry: [
-        (0, import_xstate.assign)({
-          ref: null,
-          element: null,
-          pinnedRef: null,
-          color: null
-        }),
-        { type: "hideOverlay" }
-      ],
-      on: {
-        HOVER: {
-          target: "transient",
-          actions: (0, import_xstate.assign)(({ event }) => ({
-            ref: event.ref,
-            element: event.element,
-            color: event.color ?? null
-          }))
-        },
-        PIN: {
-          target: "pinned",
-          actions: (0, import_xstate.assign)(({ context, event }) => ({
-            ref: event.ref ?? context.ref,
-            pinnedRef: event.ref ?? context.ref
-          }))
-        }
-      }
+    closeInspector() {
+      bindings?.destroyInspector?.();
+      nav.nav.clear();
+      store.setState({ mode: "idle", inspectorActive: false });
     },
-    transient: {
-      entry: { type: "showOverlay" },
-      on: {
-        HOVER: {
-          actions: [
-            (0, import_xstate.assign)(({ event }) => ({
-              ref: event.ref,
-              element: event.element,
-              color: event.color ?? null
-            })),
-            { type: "updateOverlay" }
-          ]
-        },
-        UNHOVER: { target: "none" },
-        PIN: {
-          target: "pinned",
-          actions: (0, import_xstate.assign)(({ context, event }) => ({
-            pinnedRef: event.ref ?? context.ref
-          }))
-        }
+    toggleInspector() {
+      if (store.getState().mode === "inspecting") {
+        transition.closeInspector();
+      } else {
+        transition.openInspector();
       }
     },
-    pinned: {
-      entry: { type: "showOverlay" },
-      on: {
-        UNPIN: { target: "none" }
+    enterViewing(initialStack) {
+      const prev = store.getState();
+      if (prev.mode === "inspecting") {
+        bindings?.destroyInspector?.();
       }
-    }
-  }
-});
-
-// src/flows/surface.ts
-var import_xstate2 = require("xstate");
-var initialContext2 = {
-  stack: [],
-  hover: null,
-  selection: null,
-  pinnedHighlight: null,
-  theme: "auto",
-  resolvedTheme: "light",
-  ingestActive: false
-};
-var surfaceMachine = (0, import_xstate2.setup)({
-  types: {},
-  actors: {
-    highlight: highlightMachine
-  },
-  actions: {
-    mountInspector: () => {
+      nav.nav.reset(initialStack);
+      store.setState({ mode: "viewing", inspectorActive: false });
     },
-    destroyInspector: () => {
+    dismiss() {
+      const prev = store.getState();
+      if (prev.mode === "inspecting") {
+        bindings?.destroyInspector?.();
+      }
+      nav.nav.clear();
+      store.setState({ mode: "idle", inspectorActive: false });
     },
-    openActionsPopup: () => {
+    popOrTransition() {
+      const { stack } = nav.getState();
+      if (stack.length > 2) {
+        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 });
+      } else if (stack.length === 2) {
+        nav.nav.pop();
+      } else {
+        nav.nav.clear();
+        store.setState({ mode: "idle", inspectorActive: false });
+      }
     },
-    closePopup: () => {
+    pushView(entry) {
+      const { mode } = store.getState();
+      const { stack } = nav.getState();
+      if (entry.id === "command-palette" && stack.length === 0) {
+        transition.openPalette();
+        return;
+      }
+      switch (mode) {
+        case "idle":
+          transition.enterViewing([entry]);
+          break;
+        case "inspecting":
+          bindings?.destroyInspector?.();
+          nav.nav.reset([entry]);
+          store.setState({ mode: "viewing", inspectorActive: false });
+          break;
+        case "palette":
+        case "viewing":
+          nav.nav.push(entry);
+          if (mode === "palette") {
+            store.setState({ mode: "viewing" });
+          }
+          break;
+      }
     }
-  },
-  guards: {
-    hasPinnedHighlight: ({ context }) => context.pinnedHighlight !== null,
-    hasActions: () => false,
-    popupOpen: () => false,
-    stackDeeperThanTwo: ({ context }) => context.stack.length > 2,
-    stackEqualsTwo: ({ context }) => context.stack.length === 2,
-    stackEqualsOne: ({ context }) => context.stack.length === 1,
-    paletteAtBottomDepthTwo: ({ context }) => context.stack.length === 2 && context.stack[0]?.id === "command-palette"
-  }
-}).createMachine({
-  id: "surface",
-  initial: "idle",
-  context: ({ input }) => ({
-    ...initialContext2,
-    ...input ?? {}
-  }),
-  invoke: {
-    id: "highlight",
-    src: "highlight"
-  },
-  on: {
-    HOVER: {
-      actions: [
-        (0, import_xstate2.assign)(({ event }) => ({ hover: event.ref })),
-        (0, import_xstate2.forwardTo)("highlight")
-      ]
-    },
-    UNHOVER: {
-      actions: [(0, import_xstate2.assign)({ hover: null }), (0, import_xstate2.forwardTo)("highlight")]
-    },
-    PIN: {
-      actions: [
-        (0, import_xstate2.assign)(({ context, event }) => ({
-          pinnedHighlight: event.ref ?? context.hover
-        })),
-        (0, import_xstate2.forwardTo)("highlight")
-      ]
-    },
-    UNPIN: {
-      actions: [(0, import_xstate2.assign)({ pinnedHighlight: null }), (0, import_xstate2.forwardTo)("highlight")]
-    },
-    SET_SELECTION: {
-      actions: (0, import_xstate2.assign)(({ event }) => ({ selection: event.ref }))
-    },
-    SET_THEME: {
-      actions: (0, import_xstate2.assign)(({ event }) => ({
-        theme: event.theme,
-        resolvedTheme: event.resolvedTheme
-      }))
+  };
+  const modeStore = store;
+  modeStore.transition = transition;
+  return modeStore;
+}
+
+// src/browser/session/navigation.ts
+var import_vanilla2 = require("zustand/vanilla");
+function createNavigationStore() {
+  const store = (0, import_vanilla2.createStore)(() => ({
+    stack: []
+  }));
+  const nav = {
+    push(entry) {
+      store.setState({ stack: [...store.getState().stack, entry] });
     },
-    SET_INGEST: {
-      actions: (0, import_xstate2.assign)(({ event }) => ({ ingestActive: event.active }))
-    }
-  },
-  states: {
-    idle: {
-      entry: (0, import_xstate2.assign)({ stack: [] }),
-      on: {
-        TOGGLE_INSPECTOR: { target: "inspecting" },
-        OPEN_PALETTE: { target: "palette" },
-        PUSH_VIEW: {
-          target: "viewing",
-          actions: (0, import_xstate2.assign)(({ event }) => ({ stack: [event.entry] }))
-        },
-        ESC: {
-          guard: "hasPinnedHighlight",
-          actions: [
-            (0, import_xstate2.assign)({ pinnedHighlight: null }),
-            (0, import_xstate2.sendTo)("highlight", { type: "UNPIN" })
-          ]
-        }
+    pop() {
+      const s = store.getState().stack;
+      if (s.length <= 1) {
+        store.setState({ stack: [] });
+      } else {
+        store.setState({ stack: s.slice(0, -1) });
       }
     },
-    inspecting: {
-      entry: { type: "mountInspector" },
-      exit: { type: "destroyInspector" },
-      on: {
-        SELECT: {
-          target: "viewing",
-          actions: (0, import_xstate2.assign)(({ context, event }) => ({
-            selection: event.ref,
-            stack: [...context.stack, event.entry]
-          }))
-        },
-        PUSH_VIEW: {
-          target: "viewing",
-          actions: (0, import_xstate2.assign)(({ event }) => ({ stack: [event.entry] }))
-        },
-        TOGGLE_INSPECTOR: { target: "idle" },
-        OPEN_PALETTE: { target: "palette" },
-        ESC: { target: "idle" }
+    replace(entry) {
+      const s = store.getState().stack;
+      if (s.length === 0) {
+        store.setState({ stack: [entry] });
+      } else {
+        store.setState({ stack: [...s.slice(0, -1), entry] });
       }
     },
-    palette: {
-      entry: (0, import_xstate2.assign)({ stack: [{ id: "command-palette", ref: null }] }),
-      on: {
-        PUSH_VIEW: {
-          target: "viewing",
-          actions: (0, import_xstate2.assign)(({ context, event }) => ({
-            stack: [...context.stack, event.entry]
-          }))
-        },
-        CLOSE: { target: "idle" },
-        ESC: { target: "idle" },
-        CMD_K: [
-          {
-            guard: "hasActions",
-            actions: { type: "openActionsPopup" }
-          },
-          { target: "idle" }
-        ]
-      }
+    clear() {
+      store.setState({ stack: [] });
     },
-    viewing: {
-      on: {
-        PUSH_VIEW: {
-          actions: (0, import_xstate2.assign)(({ context, event }) => ({
-            stack: [...context.stack, event.entry]
-          }))
-        },
-        POP_VIEW: [
-          {
-            guard: "stackDeeperThanTwo",
-            actions: (0, import_xstate2.assign)(({ context }) => ({
-              stack: context.stack.slice(0, -1)
-            }))
-          },
-          {
-            guard: "paletteAtBottomDepthTwo",
-            target: "palette"
-          },
-          {
-            guard: "stackEqualsTwo",
-            actions: (0, import_xstate2.assign)(({ context }) => ({
-              stack: context.stack.slice(0, -1)
-            }))
-          },
-          {
-            guard: "stackEqualsOne",
-            target: "idle"
-          }
-        ],
-        CLOSE: { target: "idle" },
-        ESC: [
-          {
-            guard: "popupOpen",
-            actions: { type: "closePopup" }
-          },
-          {
-            guard: "stackDeeperThanTwo",
-            actions: (0, import_xstate2.assign)(({ context }) => ({
-              stack: context.stack.slice(0, -1)
-            }))
-          },
-          {
-            guard: "paletteAtBottomDepthTwo",
-            target: "palette"
-          },
-          {
-            guard: "stackEqualsTwo",
-            actions: (0, import_xstate2.assign)(({ context }) => ({
-              stack: context.stack.slice(0, -1)
-            }))
-          },
-          {
-            guard: "stackEqualsOne",
-            target: "idle"
-          }
-        ]
-      }
+    reset(stack) {
+      store.setState({ stack });
     }
-  }
-});
+  };
+  const navStore = store;
+  navStore.nav = nav;
+  return navStore;
+}
 
-// src/session/store.ts
+// src/browser/session/store.ts
 var defaultSnapshot = {
   hover: null,
   selection: null,
@@ -543,7 +420,8 @@ var defaultSnapshot = {
   inspectorActive: false,
   theme: "auto",
   resolvedTheme: "light",
-  ingestActive: false
+  ingestActive: false,
+  user: null
 };
 function resolveTheme(preference, detect) {
   if (preference !== "auto") return preference;
@@ -554,167 +432,145 @@ function resolveTheme(preference, detect) {
   }
   return "light";
 }
-function projectFromActor(actor) {
-  const sn = actor.getSnapshot();
-  const child = sn.children.highlight;
-  const childSnapshot = child?.getSnapshot();
-  const pinned = childSnapshot && childSnapshot.value === "pinned" ? childSnapshot.context.pinnedRef : null;
-  return {
-    hover: sn.context.hover,
-    selection: sn.context.selection,
-    stack: sn.context.stack,
-    pinnedHighlight: pinned,
-    inspectorActive: sn.matches("inspecting"),
-    theme: sn.context.theme,
-    resolvedTheme: sn.context.resolvedTheme,
-    ingestActive: sn.context.ingestActive
-  };
-}
 function createSession(options = {}) {
-  const { detectTheme, bindings, ...overrides } = options;
+  const {
+    detectTheme,
+    onMountInspector,
+    onDestroyInspector,
+    onShowOverlay,
+    onHideOverlay,
+    onUpdateOverlay,
+    ...overrides
+  } = options;
   const initialPref = overrides.theme ?? defaultSnapshot.theme;
   const initialResolved = overrides.resolvedTheme ?? resolveTheme(initialPref, detectTheme);
   const initialStack = overrides.stack ?? [];
-  const input = {
+  const nav = createNavigationStore();
+  const modeStore = createModeStore({
+    nav,
+    bindings: {
+      mountInspector: onMountInspector,
+      destroyInspector: onDestroyInspector
+    }
+  });
+  let highlightMode = "none";
+  const hlCtx = {
+    ref: null,
+    element: null,
+    pinnedRef: null,
+    color: null
+  };
+  const highlightActions = {
+    hover(ref, element, color) {
+      hlCtx.ref = ref;
+      hlCtx.element = element ?? null;
+      hlCtx.color = color ?? null;
+      if (highlightMode === "none") {
+        highlightMode = "transient";
+        onShowOverlay?.(hlCtx);
+      } else if (highlightMode === "transient") {
+        onUpdateOverlay?.(hlCtx);
+      }
+      store.setState({ hover: ref });
+    },
+    unhover() {
+      if (highlightMode === "transient") {
+        highlightMode = "none";
+        hlCtx.ref = null;
+        hlCtx.element = null;
+        hlCtx.color = null;
+        onHideOverlay?.();
+      }
+      store.setState({ hover: null });
+    },
+    pin(ref) {
+      const pinRef = ref ?? hlCtx.ref;
+      hlCtx.pinnedRef = pinRef;
+      if (highlightMode === "none") {
+        hlCtx.ref = pinRef;
+      }
+      if (highlightMode !== "pinned") {
+        highlightMode = "pinned";
+        onShowOverlay?.(hlCtx);
+      }
+      store.setState({ pinnedHighlight: hlCtx.pinnedRef });
+    },
+    unpin() {
+      if (highlightMode === "pinned") {
+        highlightMode = "none";
+        hlCtx.ref = null;
+        hlCtx.element = null;
+        hlCtx.pinnedRef = null;
+        hlCtx.color = null;
+        onHideOverlay?.();
+      }
+      store.setState({ pinnedHighlight: null });
+    }
+  };
+  const store = (0, import_vanilla3.createStore)(() => ({
+    ...defaultSnapshot,
     hover: overrides.hover ?? null,
     selection: overrides.selection ?? null,
+    stack: [],
     pinnedHighlight: null,
+    inspectorActive: false,
     theme: initialPref,
     resolvedTheme: initialResolved,
-    ingestActive: overrides.ingestActive ?? false
-  };
-  const providedHighlight = highlightMachine.provide({
-    actions: {
-      showOverlay: ({ context }) => bindings?.highlight?.showOverlay?.(context),
-      hideOverlay: () => bindings?.highlight?.hideOverlay?.(),
-      updateOverlay: ({ context }) => bindings?.highlight?.updateOverlay?.(context)
+    ingestActive: overrides.ingestActive ?? false,
+    user: overrides.user ?? null
+  }));
+  nav.subscribe(() => {
+    const { stack } = nav.getState();
+    if (store.getState().stack !== stack) {
+      store.setState({ stack });
     }
   });
-  const providedSurface = surfaceMachine.provide({
-    actions: {
-      mountInspector: () => bindings?.surface?.mountInspector?.(),
-      destroyInspector: () => bindings?.surface?.destroyInspector?.(),
-      openActionsPopup: () => bindings?.surface?.openActionsPopup?.(),
-      closePopup: () => bindings?.surface?.closePopup?.()
-    },
-    actors: {
-      highlight: providedHighlight
+  modeStore.subscribe(() => {
+    const { inspectorActive } = modeStore.getState();
+    if (store.getState().inspectorActive !== inspectorActive) {
+      store.setState({ inspectorActive });
     }
   });
-  const actor = (0, import_xstate3.createActor)(providedSurface, { input });
-  actor.start();
+  const session = store;
+  session.nav = nav;
+  session.mode = modeStore;
+  session.highlight = highlightActions;
+  session.select = (ref) => {
+    if (sameRef(store.getState().selection, ref)) return;
+    store.setState({ selection: ref });
+  };
+  session.setTheme = (theme, resolved) => {
+    const state = store.getState();
+    const nextResolved = resolved ?? resolveTheme(theme, detectTheme);
+    if (state.theme === theme && state.resolvedTheme === nextResolved) return;
+    store.setState({ theme, resolvedTheme: nextResolved });
+  };
+  session.setIngest = (active) => {
+    if (store.getState().ingestActive === active) return;
+    store.setState({ ingestActive: active });
+  };
   if (initialStack.length > 0) {
-    actor.send({ type: "OPEN_PALETTE" });
+    modeStore.transition.openPalette();
     for (let i = 1; i < initialStack.length; i++) {
-      actor.send({ type: "PUSH_VIEW", entry: initialStack[i] });
+      modeStore.transition.pushView(initialStack[i]);
     }
   } else if (overrides.inspectorActive) {
-    actor.send({ type: "TOGGLE_INSPECTOR" });
+    modeStore.transition.openInspector();
   }
   if (overrides.pinnedHighlight) {
-    actor.send({ type: "PIN", ref: overrides.pinnedHighlight });
-  }
-  const store = (0, import_vanilla.createStore)((_set, get) => ({
-    ...projectFromActor(actor),
-    actions: {
-      hover(ref) {
-        if (sameRef(get().hover, ref)) return;
-        if (ref === null) {
-          actor.send({ type: "UNHOVER" });
-        } else {
-          actor.send({ type: "HOVER", ref, element: null });
-        }
-      },
-      select(ref) {
-        if (sameRef(get().selection, ref)) return;
-        actor.send({ type: "SET_SELECTION", ref });
-      },
-      pushStack(entry) {
-        if (entry.id === "command-palette" && get().stack.length === 0) {
-          actor.send({ type: "OPEN_PALETTE" });
-        } else {
-          actor.send({ type: "PUSH_VIEW", entry });
-        }
-      },
-      popStack() {
-        const sn = actor.getSnapshot();
-        if (sn.matches("palette")) {
-          actor.send({ type: "ESC" });
-        } else if (sn.matches("viewing")) {
-          actor.send({ type: "POP_VIEW" });
-        }
-      },
-      clearStack() {
-        if (get().stack.length === 0) return;
-        actor.send({ type: "CLOSE" });
-      },
-      openView(id, ref) {
-        const resolvedRef = ref === void 0 ? get().selection : ref;
-        get().actions.pushStack({ id, ref: resolvedRef });
-      },
-      closeView() {
-        get().actions.clearStack();
-      },
-      setInspectorActive(active) {
-        if (get().inspectorActive === active) return;
-        actor.send({ type: "TOGGLE_INSPECTOR" });
-      },
-      toggleInspector() {
-        actor.send({ type: "TOGGLE_INSPECTOR" });
-      },
-      pinHighlight(ref) {
-        if (sameRef(get().pinnedHighlight, ref)) return;
-        actor.send({ type: "PIN", ref });
-      },
-      clearPinnedHighlight() {
-        if (get().pinnedHighlight === null) return;
-        actor.send({ type: "UNPIN" });
-      },
-      setTheme(theme, resolved) {
-        const state = get();
-        const nextResolved = resolved ?? resolveTheme(theme, detectTheme);
-        if (state.theme === theme && state.resolvedTheme === nextResolved)
-          return;
-        actor.send({ type: "SET_THEME", theme, resolvedTheme: nextResolved });
-      },
-      setIngest(active) {
-        if (get().ingestActive === active) return;
-        actor.send({ type: "SET_INGEST", active });
-      }
-    }
-  }));
-  const projectAndSet = () => {
-    const next = projectFromActor(actor);
-    const prev = store.getState();
-    const updates = {};
-    if (!sameRef(prev.hover, next.hover)) updates.hover = next.hover;
-    if (!sameRef(prev.selection, next.selection))
-      updates.selection = next.selection;
-    if (prev.stack !== next.stack) updates.stack = next.stack;
-    if (!sameRef(prev.pinnedHighlight, next.pinnedHighlight))
-      updates.pinnedHighlight = next.pinnedHighlight;
-    if (prev.inspectorActive !== next.inspectorActive)
-      updates.inspectorActive = next.inspectorActive;
-    if (prev.theme !== next.theme) updates.theme = next.theme;
-    if (prev.resolvedTheme !== next.resolvedTheme)
-      updates.resolvedTheme = next.resolvedTheme;
-    if (prev.ingestActive !== next.ingestActive)
-      updates.ingestActive = next.ingestActive;
-    if (Object.keys(updates).length === 0) return;
-    store.setState(updates);
-  };
-  actor.subscribe(projectAndSet);
-  const session = store;
-  session.send = (event) => actor.send(event);
+    highlightActions.pin(overrides.pinnedHighlight);
+  }
   return session;
 }
 
-// src/styles/tailwind.built.css
+// src/browser/styles/tailwind.built.css
 var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
+    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-700: oklch(50.5% 0.213 27.518);
@@ -780,6 +636,7 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --tracking-tight: -0.025em;
     --tracking-widest: 0.1em;
     --leading-relaxed: 1.625;
@@ -954,6 +811,9 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .\\!visible {
     visibility: visible !important;
   }
+  .collapse {
+    visibility: collapse;
+  }
   .invisible {
     visibility: hidden;
   }
@@ -989,9 +849,21 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .end {
     inset-inline-end: var(--spacing);
   }
+  .-top-1 {
+    top: calc(var(--spacing) * -1);
+  }
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .bottom-full {
+    bottom: 100%;
+  }
   .bottom-px {
     bottom: 1px;
   }
@@ -1040,6 +912,12 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -1058,6 +936,9 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .inline {
     display: inline;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -1067,6 +948,14 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .table {
     display: table;
   }
+  .size-2 {
+    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);
@@ -1285,6 +1174,9 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .gap-0 {
     gap: calc(var(--spacing) * 0);
   }
+  .gap-0\\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -1433,9 +1325,15 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .bg-emerald-50 {
     background-color: var(--color-emerald-50);
   }
+  .bg-emerald-500 {
+    background-color: var(--color-emerald-500);
+  }
   .bg-fuchsia-50 {
     background-color: var(--color-fuchsia-50);
   }
+  .bg-info {
+    background-color: var(--info);
+  }
   .bg-info\\/10 {
     background-color: var(--info);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1568,6 +1466,9 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .pe-3 {
     padding-inline-end: calc(var(--spacing) * 3);
   }
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -1610,10 +1511,27 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .text-\\[0\\.625rem\\] {
     font-size: 0.625rem;
   }
+  .text-\\[9px\\] {
+    font-size: 9px;
+  }
+  .text-\\[10px\\] {
+    font-size: 10px;
+  }
+  .text-\\[11px\\] {
+    font-size: 11px;
+  }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
   }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -1661,6 +1579,9 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
   .text-cyan-700 {
     color: var(--color-cyan-700);
   }
+  .text-destructive {
+    color: var(--destructive);
+  }
   .text-destructive-foreground {
     color: var(--destructive-foreground);
   }
@@ -1763,6 +1684,10 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2005,16 +1930,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
       border-color: var(--ring);
     }
   }
-  .focus-within\\:bg-accent {
-    &:focus-within {
-      background-color: var(--accent);
-    }
-  }
-  .focus-within\\:text-accent-foreground {
-    &:focus-within {
-      color: var(--accent-foreground);
-    }
-  }
   .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);
@@ -2120,16 +2035,6 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
       }
     }
   }
-  .focus\\:bg-accent {
-    &:focus {
-      background-color: var(--accent);
-    }
-  }
-  .focus\\:text-accent-foreground {
-    &:focus {
-      color: var(--accent-foreground);
-    }
-  }
   .focus\\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -2187,6 +2092,11 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
       cursor: not-allowed;
     }
   }
+  .disabled\\:opacity-50 {
+    &:disabled {
+      opacity: 50%;
+    }
+  }
   .disabled\\:opacity-60 {
     &:disabled {
       opacity: 60%;
@@ -2629,6 +2539,34 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
       height: calc(var(--spacing) * 4);
     }
   }
+  .\\[\\[data-kbd-nav\\]_\\&\\]\\:focus-within\\:bg-accent {
+    [data-kbd-nav] & {
+      &:focus-within {
+        background-color: var(--accent);
+      }
+    }
+  }
+  .\\[\\[data-kbd-nav\\]_\\&\\]\\:focus-within\\:text-accent-foreground {
+    [data-kbd-nav] & {
+      &:focus-within {
+        color: var(--accent-foreground);
+      }
+    }
+  }
+  .\\[\\[data-kbd-nav\\]_\\&\\]\\:focus\\:bg-accent {
+    [data-kbd-nav] & {
+      &:focus {
+        background-color: var(--accent);
+      }
+    }
+  }
+  .\\[\\[data-kbd-nav\\]_\\&\\]\\:focus\\:text-accent-foreground {
+    [data-kbd-nav] & {
+      &:focus {
+        color: var(--accent-foreground);
+      }
+    }
+  }
 }
 @layer base {
   *, ::after, ::before {
@@ -3160,12 +3098,12 @@ var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tai
 }
 `;
 
-// src/surface/constants.ts
+// src/browser/surface/constants.ts
 var SURFACE_HOST_CLASS = "uidex-surface-host";
 var SURFACE_CONTAINER_CLASS = "uidex-container";
-var Z_BASE = 2147483644;
-var Z_OVERLAY = 2147483645;
-var Z_CHROME = 2147483646;
+var Z_BASE = 2147483630;
+var Z_OVERLAY = 2147483635;
+var Z_CHROME = 2147483645;
 var SURFACE_IGNORE_SELECTOR = `.${SURFACE_HOST_CLASS},.${SURFACE_CONTAINER_CLASS}`;
 var UIDEX_ATTR_TO_KIND = [
   ["data-uidex", "element"],
@@ -3174,7 +3112,7 @@ var UIDEX_ATTR_TO_KIND = [
   ["data-uidex-primitive", "primitive"]
 ];
 
-// src/surface/host.ts
+// src/browser/surface/host.ts
 function createSurfaceHost(options) {
   const { mount, stylesheets = [], initialTheme = "light" } = options;
   const hostEl = document.createElement("div");
@@ -3188,6 +3126,8 @@ function createSurfaceHost(options) {
   applyStylesheets(shadow, [tailwind_built_default, ...stylesheets]);
   const chromeEl = document.createElement("div");
   chromeEl.classList.add("uidex-chrome");
+  chromeEl.style.position = "relative";
+  chromeEl.style.zIndex = String(Z_CHROME);
   chromeEl.style.pointerEvents = "auto";
   shadow.appendChild(chromeEl);
   mount.appendChild(hostEl);
@@ -3235,7 +3175,7 @@ function supportsConstructableStylesheets(shadow) {
   }
 }
 
-// src/surface/cursor-tooltip.ts
+// src/browser/surface/cursor-tooltip.ts
 var import_lucide2 = require("lucide");
 var DEFAULT_TOOLTIP_COLOR = "#34d399";
 var TOOLTIP_OFFSET = 16;
@@ -3293,7 +3233,9 @@ function createCursorTooltip(deps) {
     if (!currentContent) return;
     const { entity, node } = currentContent;
     const style = KIND_STYLE[entity.kind];
+    const demoted = entity.kind === "primitive";
     applyColor(style?.color ?? DEFAULT_TOOLTIP_COLOR);
+    el2.style.opacity = demoted ? "0.55" : "1";
     if (style) {
       const svg = (0, import_lucide2.createElement)(style.icon);
       svg.setAttribute("aria-hidden", "true");
@@ -3341,7 +3283,7 @@ function createCursorTooltip(deps) {
   };
 }
 
-// src/surface/inspector.ts
+// src/browser/surface/inspector.ts
 function entityForRef(ref, registry) {
   if (registry) {
     const found = registry.get(ref.kind, ref.id);
@@ -3361,7 +3303,8 @@ function entityForRef(ref, registry) {
 }
 function defaultResolveAllMatches(target, registry) {
   if (target.closest(SURFACE_IGNORE_SELECTOR)) return [];
-  const matches = [];
+  const semantic = [];
+  const primitives = [];
   const seen = /* @__PURE__ */ new Set();
   let node = target;
   while (node) {
@@ -3374,19 +3317,24 @@ function defaultResolveAllMatches(target, registry) {
             seen.add(key);
             const ref = { kind, id };
             const entity = entityForRef(ref, registry);
-            matches.push({
+            const match = {
               element: node,
               ref,
               entity,
               label: displayName(entity, node)
-            });
+            };
+            if (kind === "primitive") {
+              primitives.push(match);
+            } else {
+              semantic.push(match);
+            }
           }
         }
       }
     }
     node = node.parentElement;
   }
-  return matches;
+  return semantic.concat(primitives);
 }
 function createInspector(options) {
   const {
@@ -3415,14 +3363,14 @@ function createInspector(options) {
         currentEl = topEl;
         stack = matches;
         layerIndex = 0;
-        session.getState().actions.hover(stack[0].ref);
+        session.highlight.hover(stack[0].ref);
       }
       onHover?.(makeStack(), cursor);
     } else if (currentEl) {
       currentEl = null;
       stack = [];
       layerIndex = 0;
-      session.getState().actions.hover(null);
+      session.highlight.unhover();
       onHover?.(null, cursor);
     }
   };
@@ -3433,7 +3381,7 @@ function createInspector(options) {
     e.preventDefault();
     e.stopPropagation();
     const match = stack[layerIndex];
-    session.getState().actions.select(match.ref);
+    session.select(match.ref);
     onSelect?.(match, { x: e.clientX, y: e.clientY });
   };
   const onContextMenu = (e) => {
@@ -3442,7 +3390,7 @@ function createInspector(options) {
     e.stopPropagation();
     layerIndex = (layerIndex + 1) % stack.length;
     const match = stack[layerIndex];
-    session.getState().actions.hover(match.ref);
+    session.highlight.hover(match.ref);
     onCycle?.(makeStack(), lastCursor);
   };
   return {
@@ -3472,23 +3420,23 @@ function createInspector(options) {
       document.removeEventListener("mousemove", onMouseMove);
       document.removeEventListener("click", onClick, true);
       document.removeEventListener("contextmenu", onContextMenu, true);
-      session.getState().actions.hover(null);
+      session.highlight.unhover();
       onHover?.(null, null);
     }
   };
 }
 
-// src/surface/menu-bar.ts
+// src/browser/surface/menu-bar.ts
 var import_lucide3 = require("lucide");
 
-// src/internal/cn.ts
+// src/browser/internal/cn.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
 function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
-// src/internal/el.ts
+// src/browser/internal/el.ts
 function el(tag, options = {}, children = []) {
   const node = document.createElement(tag);
   if (options.class) node.className = cn(options.class);
@@ -3523,7 +3471,7 @@ function el(tag, options = {}, children = []) {
   return node;
 }
 
-// src/surface/keys.ts
+// src/browser/surface/keys.ts
 var INSPECT_SHORTCUT = { key: "i" };
 function formatShortcutLabel(shortcut) {
   const parts = [];
@@ -3533,7 +3481,7 @@ function formatShortcutLabel(shortcut) {
   return parts.join("");
 }
 
-// src/surface/menu-bar.ts
+// src/browser/surface/menu-bar.ts
 var ROOT_CLASS = "inline-flex items-center gap-1.5 rounded-xl border border-border bg-popover p-1.5 font-sans text-xs text-popover-foreground shadow-lg/5 select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]";
 var BUTTON_CLASS = "relative z-1 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring";
 var BUTTON_ACTIVE_CLASS = "border-info/40 bg-info/15 text-info-foreground hover:bg-info/20";
@@ -3544,8 +3492,11 @@ function createMenuBar(options) {
     container,
     session,
     initialCorner = "bottom-right",
-    appTitle
+    appTitle,
+    channel = null,
+    pinLayer: initialPinLayer = null
   } = options;
+  let activePinLayer = initialPinLayer;
   const root = el("div", {
     class: ROOT_CLASS,
     attrs: {
@@ -3586,7 +3537,7 @@ function createMenuBar(options) {
   highlightBtn.hidden = true;
   highlightBtn.addEventListener("click", (e) => {
     e.stopPropagation();
-    session.send({ type: "UNPIN" });
+    session.highlight.unpin();
   });
   root.appendChild(highlightBtn);
   const inspectIcon = (0, import_lucide3.createElement)(import_lucide3.MousePointerClick);
@@ -3606,9 +3557,166 @@ function createMenuBar(options) {
   );
   inspectBtn.addEventListener("click", (e) => {
     e.stopPropagation();
-    session.send({ type: "TOGGLE_INSPECTOR" });
+    session.mode.transition.toggleInspector();
+    inspectBtn.blur();
   });
   root.appendChild(inspectBtn);
+  const pinIcon = (0, import_lucide3.createElement)(import_lucide3.MapPin);
+  pinIcon.setAttribute("class", "size-3.5");
+  pinIcon.setAttribute("aria-hidden", "true");
+  const pinBtn = el(
+    "button",
+    {
+      class: BUTTON_CLASS,
+      attrs: {
+        type: "button",
+        "data-uidex-menubar-pins": "",
+        "aria-label": "Report pins"
+      }
+    },
+    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) {
+      pinWrapper.hidden = true;
+      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) => {
+    e.stopPropagation();
+    if (activePinLayer) {
+      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");
+  presenceIcon.setAttribute("aria-hidden", "true");
+  const presenceBtn = el(
+    "button",
+    {
+      class: BUTTON_CLASS,
+      attrs: {
+        type: "button",
+        "data-uidex-menubar-presence": "",
+        "aria-label": "Online users"
+      }
+    },
+    presenceIcon
+  );
+  presenceBtn.hidden = true;
+  const presenceBadge = el("span", {
+    class: "absolute -top-1 -right-1 z-1 inline-flex size-3.5 items-center justify-center rounded-full bg-info text-[9px] font-bold leading-none text-info-foreground"
+  });
+  presenceBtn.appendChild(presenceBadge);
+  const presencePopover = el("div", {
+    class: "absolute bottom-full mb-2 right-0 min-w-32 rounded-lg border border-border bg-popover p-2 text-xs text-popover-foreground shadow-lg"
+  });
+  presencePopover.hidden = true;
+  let presencePopoverVisible = false;
+  presenceBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    presencePopoverVisible = !presencePopoverVisible;
+    presencePopover.hidden = !presencePopoverVisible;
+  });
+  const presenceWrapper = el("div", { class: "relative z-1 inline-flex" }, [
+    presenceBtn,
+    presencePopover
+  ]);
+  presenceWrapper.hidden = true;
+  root.appendChild(presenceWrapper);
+  let presenceUsers = [];
+  const updatePresenceUI = () => {
+    const localUserId = session.getState().user?.id ?? null;
+    const peers = localUserId ? presenceUsers.filter((u) => u.userId !== localUserId) : presenceUsers;
+    const count = peers.length;
+    presenceWrapper.hidden = count === 0;
+    presenceBadge.textContent = String(count);
+    presenceBtn.setAttribute(
+      "aria-label",
+      count === 1 ? "1 other user online" : `${count} other users online`
+    );
+    presencePopover.innerHTML = "";
+    for (const user of peers) {
+      const row = el("div", {
+        class: "flex items-center gap-2 rounded px-1.5 py-1"
+      });
+      const dot = el("span", {
+        class: "inline-block size-2 shrink-0 rounded-full bg-emerald-500"
+      });
+      const name = el("span", {
+        class: "truncate",
+        text: user.name || "Anonymous"
+      });
+      row.appendChild(dot);
+      row.appendChild(name);
+      presencePopover.appendChild(row);
+    }
+  };
   const paletteIcon = (0, import_lucide3.createElement)(import_lucide3.Command);
   paletteIcon.setAttribute("class", "size-3.5");
   paletteIcon.setAttribute("aria-hidden", "true");
@@ -3627,10 +3735,11 @@ function createMenuBar(options) {
   paletteBtn.addEventListener("click", (e) => {
     e.stopPropagation();
     if (session.getState().stack.length > 0) {
-      session.send({ type: "CLOSE" });
+      session.mode.transition.dismiss();
     } else {
-      session.send({ type: "OPEN_PALETTE" });
+      session.mode.transition.openPalette();
     }
+    paletteBtn.blur();
   });
   root.appendChild(paletteBtn);
   container.appendChild(root);
@@ -3722,14 +3831,28 @@ function createMenuBar(options) {
     const vertical = y / (window.innerHeight || 1) < 0.5 ? "top" : "bottom";
     snapTo(`${vertical}-${horizontal}`);
   }
+  const unsubscribePresence = channel?.onPresence(
+    (users) => {
+      presenceUsers = users;
+      updatePresenceUI();
+    }
+  );
   return {
     destroy() {
+      unsubscribePinFilter?.();
+      unsubscribePresence?.();
       unsubscribeSession();
       root.removeEventListener("mousedown", onMouseDown);
       document.removeEventListener("mousemove", onMouseMove);
       document.removeEventListener("mouseup", onMouseUp);
       root.remove();
     },
+    setPinLayer(layer) {
+      unsubscribePinFilter?.();
+      activePinLayer = layer;
+      unsubscribePinFilter = layer.onFilterChange(() => updatePinUI());
+      updatePinUI();
+    },
     snapTo,
     snapToNearest,
     get corner() {
@@ -3741,7 +3864,7 @@ function createMenuBar(options) {
   };
 }
 
-// src/surface/overlay.ts
+// src/browser/surface/overlay.ts
 var DEFAULT_COLOR = "#34d399";
 var DEFAULT_BORDER_WIDTH = 2;
 var DEFAULT_FILL_OPACITY = 0.08;
@@ -3754,7 +3877,9 @@ function createOverlay(deps) {
   backdrop.style.inset = "0";
   backdrop.style.zIndex = String(Z_OVERLAY);
   backdrop.style.backgroundColor = `rgba(0, 0, 0, ${BACKDROP_OPACITY})`;
-  backdrop.style.display = "none";
+  backdrop.style.opacity = "0";
+  backdrop.style.visibility = "hidden";
+  backdrop.style.transition = "opacity 150ms ease-out";
   backdrop.style.pointerEvents = "auto";
   backdrop.style.cursor = "default";
   backdrop.addEventListener("click", (e) => {
@@ -3768,7 +3893,9 @@ function createOverlay(deps) {
   box.style.pointerEvents = "none";
   box.style.zIndex = String(Z_OVERLAY + 1);
   box.style.boxSizing = "border-box";
-  box.style.display = "none";
+  box.style.opacity = "0";
+  box.style.transition = "opacity 150ms ease-out";
+  box.style.visibility = "hidden";
   const label = document.createElement("div");
   label.setAttribute("data-uidex-overlay-label", "");
   label.style.position = "absolute";
@@ -3781,6 +3908,17 @@ function createOverlay(deps) {
   label.style.whiteSpace = "nowrap";
   label.style.color = "#0a0a0a";
   label.style.display = "none";
+  box.addEventListener("transitionend", () => {
+    if (box.style.opacity === "0") {
+      box.style.visibility = "hidden";
+    }
+  });
+  backdrop.addEventListener("transitionend", () => {
+    if (backdrop.style.opacity === "0") {
+      backdrop.style.visibility = "hidden";
+      backdrop.style.clipPath = "";
+    }
+  });
   box.appendChild(label);
   container.appendChild(box);
   let target = null;
@@ -3863,14 +4001,19 @@ function createOverlay(deps) {
       label.textContent = "";
       label.style.display = "none";
     }
-    backdrop.style.display = opts.backdrop ? "" : "none";
-    if (!opts.backdrop) {
+    if (opts.backdrop) {
+      backdrop.style.visibility = "visible";
+      backdrop.style.opacity = "1";
+    } else {
+      backdrop.style.opacity = "0";
+      backdrop.style.visibility = "hidden";
       backdrop.style.clipPath = "";
     }
   }
   const overlay = {
     onDismiss: null,
     show(nextTarget, showOpts) {
+      const wasVisible = target !== null;
       target = nextTarget;
       opts = {
         label: showOpts?.label ?? "",
@@ -3883,14 +4026,18 @@ function createOverlay(deps) {
       };
       applyStyles();
       updatePosition();
-      box.style.display = "";
+      if (!wasVisible) {
+        box.style.opacity = "0";
+        box.style.visibility = "visible";
+        box.offsetHeight;
+      }
+      box.style.opacity = "1";
       attach();
     },
     hide() {
       target = null;
-      box.style.display = "none";
-      backdrop.style.display = "none";
-      backdrop.style.clipPath = "";
+      box.style.opacity = "0";
+      backdrop.style.opacity = "0";
       detach();
     },
     destroy() {
@@ -3925,7 +4072,7 @@ function rgbaFromColor(color, alpha) {
   return color;
 }
 
-// src/surface/theme.ts
+// src/browser/surface/theme.ts
 function createThemeDetector(deps) {
   const { session, onResolve } = deps;
   let resolved = session.getState().resolvedTheme;
@@ -3943,7 +4090,7 @@ function createThemeDetector(deps) {
     const next = detect(preference);
     if (next === resolved) return;
     resolved = next;
-    session.getState().actions.setTheme(preference, next);
+    session.setTheme(preference, next);
     onResolve?.(next);
   };
   push();
@@ -3994,7 +4141,7 @@ function readHtmlClassToken() {
   return null;
 }
 
-// src/surface/shell.ts
+// src/browser/surface/shell.ts
 function createSurfaceShell(options) {
   const cleanup = createCleanupStack();
   const host = createSurfaceHost({
@@ -4008,7 +4155,7 @@ function createSurfaceShell(options) {
     onResolve: (theme) => host.applyTheme(theme)
   });
   cleanup.add(themeDetector);
-  const overlay = createOverlay({ container: host.chromeEl });
+  const overlay = createOverlay({ container: host.shadowRoot });
   cleanup.add(overlay);
   const tooltip = createCursorTooltip({
     container: host.chromeEl,
@@ -4023,8 +4170,10 @@ function createSurfaceShell(options) {
       return;
     }
     const { current } = stack;
+    const demoted = current.ref.kind === "primitive";
     overlay.show(current.element, {
-      color: KIND_STYLE[current.ref.kind].color
+      color: KIND_STYLE[current.ref.kind].color,
+      ...demoted && { borderStyle: "dashed", fillOpacity: 0.04 }
     });
     tooltip.update(
       {
@@ -4052,7 +4201,9 @@ function createSurfaceShell(options) {
     container: host.chromeEl,
     session: options.session,
     initialCorner: options.initialCorner,
-    appTitle: options.appTitle
+    appTitle: options.appTitle,
+    channel: options.channel ?? null,
+    pinLayer: options.pinLayer ?? null
   });
   cleanup.add(menuBar);
   return {