diff --git a/apps/web/src/lib/components/layout/Layout.svelte b/apps/web/src/lib/components/layout/Layout.svelte
index 79ddc0cc2..d24c7f087 100644
--- a/apps/web/src/lib/components/layout/Layout.svelte
+++ b/apps/web/src/lib/components/layout/Layout.svelte
@@ -46,6 +46,7 @@ let sideNavCollapsed = $state(initialCollapsed);
 let sideNavModalOpen = $state(false);
 const mounted = new IsMounted();
 
+// xxx: query.live
 // the bell data loads lazily like the React app's NotificationsProvider:
 // after hydration, never blocking SSR
 const notificationsQuery = $derived(
diff --git a/packages/components/src/menu-context.ts b/packages/components/src/menu-context.ts
index 331bd22e5..475a79487 100644
--- a/packages/components/src/menu-context.ts
+++ b/packages/components/src/menu-context.ts
@@ -1,4 +1,4 @@
-import { getContext, setContext } from "svelte";
+import { createContext } from "svelte";
 
 export interface MenuTriggerProps {
 	readonly popovertarget: string;
@@ -10,16 +10,4 @@ export interface MenuContext {
 	close: () => void;
 }
 
-const KEY = Symbol("menu");
-
-export function setMenuContext(context: MenuContext) {
-	setContext(KEY, context);
-}
-
-export function getMenuContext(): MenuContext {
-	const context = getContext<MenuContext>(KEY);
-	if (!context) {
-		throw new Error("Menu items must be used inside <Menu>");
-	}
-	return context;
-}
+export const [getMenuContext, setMenuContext] = createContext<MenuContext>();
diff --git a/packages/components/src/select-context.ts b/packages/components/src/select-context.ts
index 1224e4bd7..10dd816ff 100644
--- a/packages/components/src/select-context.ts
+++ b/packages/components/src/select-context.ts
@@ -1,4 +1,4 @@
-import { getContext, setContext } from "svelte";
+import { createContext } from "svelte";
 
 export interface SelectContext {
 	readonly selectedKey: string | number | null;
@@ -12,16 +12,5 @@ export interface SelectContext {
 	setFocusedKey: (key: string | number | null) => void;
 }
 
-const KEY = Symbol("select");
-
-export function setSelectContext(context: SelectContext) {
-	setContext(KEY, context);
-}
-
-export function getSelectContext(): SelectContext {
-	const context = getContext<SelectContext>(KEY);
-	if (!context) {
-		throw new Error("Select items must be used inside <Select>");
-	}
-	return context;
-}
+export const [getSelectContext, setSelectContext] =
+	createContext<SelectContext>();
diff --git a/packages/components/src/tabs-context.ts b/packages/components/src/tabs-context.ts
index b5b80c38a..4d578ba9f 100644
--- a/packages/components/src/tabs-context.ts
+++ b/packages/components/src/tabs-context.ts
@@ -1,4 +1,4 @@
-import { getContext, setContext } from "svelte";
+import { createContext } from "svelte";
 
 export interface TabsContext {
 	readonly selectedKey: string | null;
@@ -11,16 +11,4 @@ export interface TabsContext {
 	) => void;
 }
 
-const KEY = Symbol("tabs");
-
-export function setTabsContext(context: TabsContext) {
-	setContext(KEY, context);
-}
-
-export function getTabsContext(): TabsContext {
-	const context = getContext<TabsContext>(KEY);
-	if (!context) {
-		throw new Error("Tabs components must be used inside <Tabs>");
-	}
-	return context;
-}
+export const [getTabsContext, setTabsContext] = createContext<TabsContext>();