diff --git a/apps/humding/verdant/src/client/client.d.ts b/apps/humding/verdant/src/client/client.d.ts
index ff79a409..d74544b3 100644
--- a/apps/humding/verdant/src/client/client.d.ts
+++ b/apps/humding/verdant/src/client/client.d.ts
@@ -24,10 +24,36 @@ export class Client<Presence = any, Profile = any> {
   import: BaseClient<Presence, Profile>["import"];
   subscribe: BaseClient<Presence, Profile>["subscribe"];
   stats: BaseClient<Presence, Profile>["stats"];
+
+  /**
+   * Deletes all local data. If the client is connected to sync,
+   * this will cause the client to re-sync all data from the server.
+   * Use this very carefully, and only as a last resort.
+   */
   __dangerous__resetLocal: BaseClient<
     Presence,
     Profile
   >["__dangerous__resetLocal"];
+
+  /**
+   * Export all data, then re-import it. This might resolve
+   * some issues with the local database, but it should
+   * only be done as a second-to-last resort. The last resort
+   * would be __dangerous__resetLocal on ClientDescriptor, which
+   * clears all local data.
+   *
+   * Unlike __dangerous__resetLocal, this method allows local-only
+   * clients to recover data, whereas __dangerous__resetLocal only
+   * lets networked clients recover from the server.
+   */
+  __dangerous__hardReset: () => Promise<void>;
+
+  /**
+   * Manually triggers storage rebasing. Follows normal
+   * rebasing rules. Rebases already happen automatically
+   * during normal operation, so you probably don't need this.
+   */
+  __manualRebase: () => Promise<void>;
 }
 
 export interface ClientDescriptorOptions<Presence = any, Profile = any>
diff --git a/apps/humding/verdant/src/client/index.ts b/apps/humding/verdant/src/client/index.ts
index 44f4dc13..25b31357 100644
--- a/apps/humding/verdant/src/client/index.ts
+++ b/apps/humding/verdant/src/client/index.ts
@@ -1,6 +1,7 @@
 import { ClientDescriptorOptions } from "./client.js";
 export * from "./client.js";
 import schema from "./schema.js";
+import oldSchemas from "./schemaVersions/index.js";
 import { ClientDescriptor as StorageDescriptor } from "./client.js";
 import migrations from "../migrations/index.js";
 export * from "@verdant-web/store";
@@ -12,10 +13,12 @@ export class ClientDescriptor<
   constructor(init: ClientDescriptorOptions<Presence, Profile>) {
     const defaultedSchema = init.schema || schema;
     const defaultedMigrations = init.migrations || migrations;
+    const defaultedOldSchemas = init.oldSchemas || oldSchemas;
     super({
       ...init,
       schema: defaultedSchema,
       migrations: defaultedMigrations,
+      oldSchemas: defaultedOldSchemas,
     });
   }
 }
diff --git a/apps/humding/verdant/src/client/react.d.ts b/apps/humding/verdant/src/client/react.d.ts
index cd48961b..1baecab3 100644
--- a/apps/humding/verdant/src/client/react.d.ts
+++ b/apps/humding/verdant/src/client/react.d.ts
@@ -1,4 +1,10 @@
-import { Context, ComponentType, ReactNode } from "react";
+import {
+  Context,
+  ComponentType,
+  ReactNode,
+  ChangeEvent,
+  FocusEvent,
+} from "react";
 import type {
   Client,
   ClientDescriptor,
@@ -12,6 +18,7 @@ import type {
   EntityShape,
   AnyEntity,
   EntityDestructured,
+  EntityInit,
   EntityFile,
   Song,
   SongFilter,
@@ -23,20 +30,29 @@ type HookConfig<F> = {
   key?: string;
 };
 
+type FieldInputProps<Shape> = {
+  value: Shape extends boolean ? undefined : Shape;
+  checked?: boolean;
+  onChange: (event: ChangeEvent) => void;
+  onFocus: (event: FocusEvent) => void;
+  onBlur: (event: FocusEvent) => void;
+  type?: string;
+};
+
 export interface GeneratedHooks<Presence, Profile> {
   /**
    * Render this context Provider at the top level of your
    * React tree to provide a Client to all hooks.
    */
   Provider: ComponentType<{
-    value: ClientDescriptor<Schema>;
+    value: ClientDescriptor<any, any>;
     children: ReactNode;
     sync?: boolean;
   }>;
   /**
    * Direct access to the React Context, if needed.
    */
-  Context: Context<ClientDescriptor<Schema>>;
+  Context: Context<ClientDescriptor<any, any>>;
   /** @deprecated use useClient instead */
   useStorage: () => Client<Presence, Profile>;
   useClient: () => Client<Presence, Profile>;
@@ -52,6 +68,46 @@ export interface GeneratedHooks<Presence, Profile> {
     query: (peer: UserInfo<Profile, Presence>) => boolean,
     options?: { includeSelf: boolean },
   ) => UserInfo<Profile, Presence>[];
+  useViewPeers: () => UserInfo<Profile, Presence>[];
+  useViewId: (viewId: string | undefined) => void;
+  useField<
+    T extends AnyEntity<any, any, any>,
+    K extends keyof EntityDestructured<T>,
+  >(
+    entity: T,
+    fieldName: K,
+    options?: {
+      /** after this timeout, the field will be considered abandoned by a peer. defaults to 1m */
+      timeout: number;
+    },
+  ): {
+    /* The live value of the field */
+    value: EntityDestructured<T>[K];
+    /* Sets the value of the field */
+    setValue: (value: Exclude<EntityInit<T>[K], undefined>) => void;
+    /* Pass these props to any <input> or <textarea> element to auto-wire it */
+    inputProps: FieldInputProps<EntityDestructured<T>[K]>;
+    presence: {
+      /**
+       * Whether the current replica is editing the field
+       */
+      self: boolean;
+      /**
+       * A list of peers editing this field
+       */
+      peers: UserInfo<Profile, Presence>[];
+      /**
+       * Whether the field is currently being edited by someone else.
+       * Will return false if the current replica is already editing it.
+       */
+      occupied: boolean;
+      /**
+       * Mark the field as being edited by the current replica, similar to
+       * what inputProps do on 'focus' events.
+       */
+      touch: () => void;
+    };
+  };
   useSyncStatus: () => boolean;
   useWatch<T extends AnyEntity<any, any, any> | null>(
     entity: T,
diff --git a/apps/humding/verdant/src/client/schema.js b/apps/humding/verdant/src/client/schema.js
index 171ec7b2..48e35df2 100644
--- a/apps/humding/verdant/src/client/schema.js
+++ b/apps/humding/verdant/src/client/schema.js
@@ -1,3 +1,3 @@
 import schema from './schemaVersions/v1.js';
-	const finalSchema = { wip: true, ...schema };
+	const finalSchema = { wip: false, ...schema };
 	export default finalSchema;
\ No newline at end of file
diff --git a/apps/humding/verdant/src/client/schemaVersions/index.d.ts b/apps/humding/verdant/src/client/schemaVersions/index.d.ts
new file mode 100644
index 00000000..3251fd36
--- /dev/null
+++ b/apps/humding/verdant/src/client/schemaVersions/index.d.ts
@@ -0,0 +1,5 @@
+
+	import { StorageSchema } from '@verdant-web/common';
+	declare const versions: StorageSchema[];
+	export default versions;
+	
\ No newline at end of file
diff --git a/apps/humding/verdant/src/client/schemaVersions/index.js b/apps/humding/verdant/src/client/schemaVersions/index.js
new file mode 100644
index 00000000..9c3b3b9c
--- /dev/null
+++ b/apps/humding/verdant/src/client/schemaVersions/index.js
@@ -0,0 +1,8 @@
+
+/**
+ * @generated - do not modify this file.
+ */
+import v1 from './v1.js';
+
+export default [v1]
+	
\ No newline at end of file
diff --git a/apps/palette/verdant/src/client/client.d.ts b/apps/palette/verdant/src/client/client.d.ts
index 480bec41..e5105101 100644
--- a/apps/palette/verdant/src/client/client.d.ts
+++ b/apps/palette/verdant/src/client/client.d.ts
@@ -24,10 +24,36 @@ export class Client<Presence = any, Profile = any> {
   import: BaseClient<Presence, Profile>["import"];
   subscribe: BaseClient<Presence, Profile>["subscribe"];
   stats: BaseClient<Presence, Profile>["stats"];
+
+  /**
+   * Deletes all local data. If the client is connected to sync,
+   * this will cause the client to re-sync all data from the server.
+   * Use this very carefully, and only as a last resort.
+   */
   __dangerous__resetLocal: BaseClient<
     Presence,
     Profile
   >["__dangerous__resetLocal"];
+
+  /**
+   * Export all data, then re-import it. This might resolve
+   * some issues with the local database, but it should
+   * only be done as a second-to-last resort. The last resort
+   * would be __dangerous__resetLocal on ClientDescriptor, which
+   * clears all local data.
+   *
+   * Unlike __dangerous__resetLocal, this method allows local-only
+   * clients to recover data, whereas __dangerous__resetLocal only
+   * lets networked clients recover from the server.
+   */
+  __dangerous__hardReset: () => Promise<void>;
+
+  /**
+   * Manually triggers storage rebasing. Follows normal
+   * rebasing rules. Rebases already happen automatically
+   * during normal operation, so you probably don't need this.
+   */
+  __manualRebase: () => Promise<void>;
 }
 
 export interface ClientDescriptorOptions<Presence = any, Profile = any>
diff --git a/apps/palette/verdant/src/client/index.ts b/apps/palette/verdant/src/client/index.ts
index 44f4dc13..25b31357 100644
--- a/apps/palette/verdant/src/client/index.ts
+++ b/apps/palette/verdant/src/client/index.ts
@@ -1,6 +1,7 @@
 import { ClientDescriptorOptions } from "./client.js";
 export * from "./client.js";
 import schema from "./schema.js";
+import oldSchemas from "./schemaVersions/index.js";
 import { ClientDescriptor as StorageDescriptor } from "./client.js";
 import migrations from "../migrations/index.js";
 export * from "@verdant-web/store";
@@ -12,10 +13,12 @@ export class ClientDescriptor<
   constructor(init: ClientDescriptorOptions<Presence, Profile>) {
     const defaultedSchema = init.schema || schema;
     const defaultedMigrations = init.migrations || migrations;
+    const defaultedOldSchemas = init.oldSchemas || oldSchemas;
     super({
       ...init,
       schema: defaultedSchema,
       migrations: defaultedMigrations,
+      oldSchemas: defaultedOldSchemas,
     });
   }
 }
diff --git a/apps/palette/verdant/src/client/react.d.ts b/apps/palette/verdant/src/client/react.d.ts
index 744f938f..640a972d 100644
--- a/apps/palette/verdant/src/client/react.d.ts
+++ b/apps/palette/verdant/src/client/react.d.ts
@@ -1,4 +1,10 @@
-import { Context, ComponentType, ReactNode } from "react";
+import {
+  Context,
+  ComponentType,
+  ReactNode,
+  ChangeEvent,
+  FocusEvent,
+} from "react";
 import type {
   Client,
   ClientDescriptor,
@@ -12,6 +18,7 @@ import type {
   EntityShape,
   AnyEntity,
   EntityDestructured,
+  EntityInit,
   EntityFile,
   Project,
   ProjectFilter,
@@ -23,20 +30,29 @@ type HookConfig<F> = {
   key?: string;
 };
 
+type FieldInputProps<Shape> = {
+  value: Shape extends boolean ? undefined : Shape;
+  checked?: boolean;
+  onChange: (event: ChangeEvent) => void;
+  onFocus: (event: FocusEvent) => void;
+  onBlur: (event: FocusEvent) => void;
+  type?: string;
+};
+
 export interface GeneratedHooks<Presence, Profile> {
   /**
    * Render this context Provider at the top level of your
    * React tree to provide a Client to all hooks.
    */
   Provider: ComponentType<{
-    value: ClientDescriptor<Schema>;
+    value: ClientDescriptor<any, any>;
     children: ReactNode;
     sync?: boolean;
   }>;
   /**
    * Direct access to the React Context, if needed.
    */
-  Context: Context<ClientDescriptor<Schema>>;
+  Context: Context<ClientDescriptor<any, any>>;
   /** @deprecated use useClient instead */
   useStorage: () => Client<Presence, Profile>;
   useClient: () => Client<Presence, Profile>;
@@ -52,6 +68,46 @@ export interface GeneratedHooks<Presence, Profile> {
     query: (peer: UserInfo<Profile, Presence>) => boolean,
     options?: { includeSelf: boolean },
   ) => UserInfo<Profile, Presence>[];
+  useViewPeers: () => UserInfo<Profile, Presence>[];
+  useViewId: (viewId: string | undefined) => void;
+  useField<
+    T extends AnyEntity<any, any, any>,
+    K extends keyof EntityDestructured<T>,
+  >(
+    entity: T,
+    fieldName: K,
+    options?: {
+      /** after this timeout, the field will be considered abandoned by a peer. defaults to 1m */
+      timeout: number;
+    },
+  ): {
+    /* The live value of the field */
+    value: EntityDestructured<T>[K];
+    /* Sets the value of the field */
+    setValue: (value: Exclude<EntityInit<T>[K], undefined>) => void;
+    /* Pass these props to any <input> or <textarea> element to auto-wire it */
+    inputProps: FieldInputProps<EntityDestructured<T>[K]>;
+    presence: {
+      /**
+       * Whether the current replica is editing the field
+       */
+      self: boolean;
+      /**
+       * A list of peers editing this field
+       */
+      peers: UserInfo<Profile, Presence>[];
+      /**
+       * Whether the field is currently being edited by someone else.
+       * Will return false if the current replica is already editing it.
+       */
+      occupied: boolean;
+      /**
+       * Mark the field as being edited by the current replica, similar to
+       * what inputProps do on 'focus' events.
+       */
+      touch: () => void;
+    };
+  };
   useSyncStatus: () => boolean;
   useWatch<T extends AnyEntity<any, any, any> | null>(
     entity: T,
diff --git a/apps/palette/verdant/src/client/schema.d.ts b/apps/palette/verdant/src/client/schema.d.ts
index e9b32522..9630f417 100644
--- a/apps/palette/verdant/src/client/schema.d.ts
+++ b/apps/palette/verdant/src/client/schema.d.ts
@@ -1,2 +1,2 @@
-export * from "./schemaVersions/v1.js";
-export { default } from "./schemaVersions/v1.js";
+export * from "./schemaVersions/v2.js";
+export { default } from "./schemaVersions/v2.js";
diff --git a/apps/palette/verdant/src/client/schema.js b/apps/palette/verdant/src/client/schema.js
index 48e35df2..716b394e 100644
--- a/apps/palette/verdant/src/client/schema.js
+++ b/apps/palette/verdant/src/client/schema.js
@@ -1,3 +1,3 @@
-import schema from './schemaVersions/v1.js';
+import schema from './schemaVersions/v2.js';
 	const finalSchema = { wip: false, ...schema };
 	export default finalSchema;
\ No newline at end of file
diff --git a/apps/palette/verdant/src/client/schemaVersions/index.d.ts b/apps/palette/verdant/src/client/schemaVersions/index.d.ts
new file mode 100644
index 00000000..3251fd36
--- /dev/null
+++ b/apps/palette/verdant/src/client/schemaVersions/index.d.ts
@@ -0,0 +1,5 @@
+
+	import { StorageSchema } from '@verdant-web/common';
+	declare const versions: StorageSchema[];
+	export default versions;
+	
\ No newline at end of file
diff --git a/apps/palette/verdant/src/client/schemaVersions/index.js b/apps/palette/verdant/src/client/schemaVersions/index.js
new file mode 100644
index 00000000..caf71dfc
--- /dev/null
+++ b/apps/palette/verdant/src/client/schemaVersions/index.js
@@ -0,0 +1,8 @@
+
+/**
+ * @generated - do not modify this file.
+ */
+import v2 from './v2.js';
+
+export default [v2]
+	
\ No newline at end of file
diff --git a/apps/palette/verdant/src/client/schemaVersions/v2.d.ts b/apps/palette/verdant/src/client/schemaVersions/v2.d.ts
new file mode 100644
index 00000000..b8840682
--- /dev/null
+++ b/apps/palette/verdant/src/client/schemaVersions/v2.d.ts
@@ -0,0 +1,46 @@
+import { StorageSchema } from "@verdant-web/common";
+declare const schema: StorageSchema;
+export default schema;
+
+export type ProjectSnapshot = {
+  id: string;
+  createdAt: number;
+  image: EntityFileSnapshot;
+  colors: ProjectColorsSnapshot;
+};
+
+export type ProjectColorsItemPixelSnapshot = { x: number; y: number };
+export type ProjectColorsItemPercentageSnapshot = { x: number; y: number };
+export type ProjectColorsItemValueSnapshot = {
+  r: number;
+  g: number;
+  b: number;
+};
+export type ProjectColorsItemSnapshot = {
+  id: string;
+  pixel: ProjectColorsItemPixelSnapshot;
+  percentage: ProjectColorsItemPercentageSnapshot;
+  value: ProjectColorsItemValueSnapshot;
+};
+export type ProjectColorsSnapshot = ProjectColorsItemSnapshot[];
+export type ProjectInit = {
+  id?: string;
+  createdAt?: number;
+  image: File;
+  colors?: ProjectColorsInit;
+};
+
+export type ProjectColorsItemPixelInit = { x: number; y: number };
+export type ProjectColorsItemPercentageInit = { x: number; y: number };
+export type ProjectColorsItemValueInit = { r: number; g: number; b: number };
+export type ProjectColorsItemInit = {
+  id?: string;
+  pixel: ProjectColorsItemPixelInit;
+  percentage: ProjectColorsItemPercentageInit;
+  value: ProjectColorsItemValueInit;
+};
+export type ProjectColorsInit = ProjectColorsItemInit[];
+
+export type MigrationTypes = {
+  projects: { init: ProjectInit; snapshot: ProjectSnapshot };
+};
diff --git a/apps/palette/verdant/src/client/schemaVersions/v2.js b/apps/palette/verdant/src/client/schemaVersions/v2.js
new file mode 100644
index 00000000..359ef0bb
--- /dev/null
+++ b/apps/palette/verdant/src/client/schemaVersions/v2.js
@@ -0,0 +1,57 @@
+/** @generated - do not modify this file. */
+
+// src/schema.ts
+import { schema } from "@verdant-web/store";
+var projects = schema.collection({
+  name: "project",
+  primaryKey: "id",
+  fields: {
+    id: schema.fields.id(),
+    createdAt: schema.fields.number({
+      default: () => Date.now()
+    }),
+    image: schema.fields.file({
+      downloadRemote: true
+    }),
+    colors: schema.fields.array({
+      items: schema.fields.object({
+        properties: {
+          id: schema.fields.id(),
+          pixel: schema.fields.object({
+            properties: {
+              x: schema.fields.number(),
+              y: schema.fields.number()
+            }
+          }),
+          percentage: schema.fields.object({
+            properties: {
+              x: schema.fields.number(),
+              y: schema.fields.number()
+            }
+          }),
+          value: schema.fields.object({
+            properties: {
+              r: schema.fields.number(),
+              g: schema.fields.number(),
+              b: schema.fields.number()
+            }
+          })
+        }
+      })
+    })
+  },
+  indexes: {
+    createdAt: {
+      field: "createdAt"
+    }
+  }
+});
+var schema_default = schema({
+  version: 2,
+  collections: {
+    projects
+  }
+});
+export {
+  schema_default as default
+};
diff --git a/apps/palette/verdant/src/migrations/index.ts b/apps/palette/verdant/src/migrations/index.ts
index 424db9cf..6a111cac 100644
--- a/apps/palette/verdant/src/migrations/index.ts
+++ b/apps/palette/verdant/src/migrations/index.ts
@@ -1,3 +1,4 @@
 import v1 from "./v1.js";
+import v2 from "./v2.js";
 
-export default [v1];
+export default [v1, v2];
diff --git a/apps/palette/verdant/src/migrations/v2.ts b/apps/palette/verdant/src/migrations/v2.ts
new file mode 100644
index 00000000..281f090e
--- /dev/null
+++ b/apps/palette/verdant/src/migrations/v2.ts
@@ -0,0 +1,18 @@
+import v1Schema, {
+  MigrationTypes as V1Types,
+} from "../client/schemaVersions/v1.js";
+import v2Schema, {
+  MigrationTypes as V2Types,
+} from "../client/schemaVersions/v2.js";
+import { createMigration } from "@verdant-web/store";
+
+export default createMigration<V1Types, V2Types>(
+  v1Schema,
+  v2Schema,
+  async ({ migrate }) => {
+    // add or modify migration logic here. you must provide migrations for
+    // any collections that have changed field types or added new non-nullable
+    // fields without defaults
+    // await migrate('collectionName', async (old) => ({ /* new */ }));
+  },
+);
diff --git a/apps/palette/verdant/src/schema.ts b/apps/palette/verdant/src/schema.ts
index c3f647c6..6cd2f6a0 100644
--- a/apps/palette/verdant/src/schema.ts
+++ b/apps/palette/verdant/src/schema.ts
@@ -19,51 +19,53 @@ import { schema } from '@verdant-web/store';
  */
 
 const projects = schema.collection({
-  name: 'project',
-  primaryKey: 'id',
-  fields: {
-    id: schema.fields.id(),
-    createdAt: schema.fields.number({
-      default: () => Date.now(),
-    }),
-    image: schema.fields.file(),
-    colors: schema.fields.array({
-      items: schema.fields.object({
-        properties: {
-          id: schema.fields.id(),
-          pixel: schema.fields.object({
-            properties: {
-              x: schema.fields.number(),
-              y: schema.fields.number(),
-            },
-          }),
-          percentage: schema.fields.object({
-            properties: {
-              x: schema.fields.number(),
-              y: schema.fields.number(),
-            },
-          }),
-          value: schema.fields.object({
-            properties: {
-              r: schema.fields.number(),
-              g: schema.fields.number(),
-              b: schema.fields.number(),
-            },
-          }),
-        },
-      }),
-    }),
-  },
-  indexes: {
-    createdAt: {
-      field: 'createdAt',
-    },
-  },
+	name: 'project',
+	primaryKey: 'id',
+	fields: {
+		id: schema.fields.id(),
+		createdAt: schema.fields.number({
+			default: () => Date.now(),
+		}),
+		image: schema.fields.file({
+			downloadRemote: true,
+		}),
+		colors: schema.fields.array({
+			items: schema.fields.object({
+				properties: {
+					id: schema.fields.id(),
+					pixel: schema.fields.object({
+						properties: {
+							x: schema.fields.number(),
+							y: schema.fields.number(),
+						},
+					}),
+					percentage: schema.fields.object({
+						properties: {
+							x: schema.fields.number(),
+							y: schema.fields.number(),
+						},
+					}),
+					value: schema.fields.object({
+						properties: {
+							r: schema.fields.number(),
+							g: schema.fields.number(),
+							b: schema.fields.number(),
+						},
+					}),
+				},
+			}),
+		}),
+	},
+	indexes: {
+		createdAt: {
+			field: 'createdAt',
+		},
+	},
 });
 
 export default schema({
-  version: 1,
-  collections: {
-    projects,
-  },
+	version: 2,
+	collections: {
+		projects,
+	},
 });
diff --git a/apps/palette/web/src/components/projects/ProjectCanvas.tsx b/apps/palette/web/src/components/projects/ProjectCanvas.tsx
index 6052e618..f063e545 100644
--- a/apps/palette/web/src/components/projects/ProjectCanvas.tsx
+++ b/apps/palette/web/src/components/projects/ProjectCanvas.tsx
@@ -1,11 +1,10 @@
 import { hooks } from '@/hooks.js';
 import { clsx } from '@a-type/ui';
-import { useStableCallback } from '@biscuits/client';
 import {
-  Project,
-  ProjectColors,
-  ProjectColorsItem,
-  ProjectColorsItemInit,
+	Project,
+	ProjectColors,
+	ProjectColorsItem,
+	ProjectColorsItemInit,
 } from '@palette.biscuits/verdant';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useColorSelection } from './hooks.js';
@@ -13,220 +12,220 @@ import { preventDefault } from '@a-type/utils';
 import { useGesture } from '@use-gesture/react';
 
 export interface ProjectCanvasProps {
-  project: Project;
-  className?: string;
-  showBubbles: boolean;
+	project: Project;
+	className?: string;
+	showBubbles: boolean;
 }
 export function ProjectCanvas({
-  project,
-  className,
-  showBubbles,
+	project,
+	className,
+	showBubbles,
 }: ProjectCanvasProps) {
-  const { image, colors } = hooks.useWatch(project);
-  hooks.useWatch(image);
-  const [_, setSelected] = useColorSelection();
-  const addColor = (init: ProjectColorsItemInit) => {
-    colors.push(init);
-    const newColor = colors.get(colors.length - 1);
-    setSelected(newColor.get('id'));
-  };
-  const [picking, setPicking] = useState(false);
-
-  return (
-    <div className={clsx('relative w-full sm:(w-auto h-full)', className)}>
-      <div className="relative">
-        <ColorPickerCanvas
-          imageSrc={image.url}
-          onColor={addColor}
-          onPickingChange={setPicking}
-        />
-        {showBubbles && !picking && <Bubbles colors={colors} />}
-      </div>
-    </div>
-  );
+	const { image, colors } = hooks.useWatch(project);
+	hooks.useWatch(image);
+	const [_, setSelected] = useColorSelection();
+	const addColor = (init: ProjectColorsItemInit) => {
+		colors.push(init);
+		const newColor = colors.get(colors.length - 1);
+		setSelected(newColor.get('id'));
+	};
+	const [picking, setPicking] = useState(false);
+
+	return (
+		<div className={clsx('relative w-full sm:(w-auto h-full)', className)}>
+			<div className="relative">
+				<ColorPickerCanvas
+					imageSrc={image.url}
+					onColor={addColor}
+					onPickingChange={setPicking}
+				/>
+				{showBubbles && !picking && <Bubbles colors={colors} />}
+			</div>
+		</div>
+	);
 }
 
 function ColorPickerCanvas({
-  imageSrc,
-  onColor,
-  className,
-  onPickingChange,
+	imageSrc,
+	onColor,
+	className,
+	onPickingChange,
 }: {
-  imageSrc?: string | null;
-  onColor: (init: ProjectColorsItemInit) => void;
-  className?: string;
-  onPickingChange?: (picking: boolean) => void;
+	imageSrc?: string | null;
+	onColor: (init: ProjectColorsItemInit) => void;
+	className?: string;
+	onPickingChange?: (picking: boolean) => void;
 }) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const previewRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    if (!imageSrc) {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      return;
-    }
-
-    const image = new Image();
-    image.crossOrigin = 'anonymous';
-    image.src = imageSrc;
-    image.onload = () => {
-      canvas.width = image.width;
-      canvas.height = image.height;
-      // enforce aspect ratio
-      canvas.style.setProperty(
-        'aspect-ratio',
-        `${image.width}/${image.height}`,
-      );
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(image, 0, 0);
-    };
-  }, [canvasRef, imageSrc]);
-
-  const getCanvasColor = useCallback(
-    (x: number, y: number) => {
-      const canvas = canvasRef.current;
-      if (!canvas) return null;
-      const ctx = canvas.getContext('2d');
-      if (!ctx) return null;
-
-      // convert from mouse position into canvas pixels, have to use canvas actual size
-      const canvasRect = canvas.getBoundingClientRect();
-      const canvasX = (x - canvasRect.left) * (canvas.width / canvasRect.width);
-      const canvasY =
-        (y - canvasRect.top) * (canvas.height / canvasRect.height);
-
-      const pixel = ctx.getImageData(canvasX, canvasY, 1, 1).data;
-
-      const color = { r: pixel[0], g: pixel[1], b: pixel[2] };
-      return color;
-    },
-    [canvasRef],
-  );
-
-  useGesture(
-    {
-      onDragStart: ({ xy }) => {
-        const [clientX, clientY] = xy;
-        const preview = previewRef.current;
-        if (!preview) return;
-        preview.style.setProperty('left', `${clientX}px`);
-        preview.style.setProperty('top', `${clientY}px`);
-        preview.style.setProperty('display', 'block');
-        const color = getCanvasColor(clientX, clientY);
-        if (!color) return;
-        preview.style.setProperty(
-          'background-color',
-          `rgb(${color.r}, ${color.g}, ${color.b})`,
-        );
-        onPickingChange?.(true);
-      },
-      onDrag: ({ xy }) => {
-        const [clientX, clientY] = xy;
-        const preview = previewRef.current;
-        if (!preview) return;
-        preview.style.setProperty('left', `${clientX}px`);
-        preview.style.setProperty('top', `${clientY}px`);
-
-        const color = getCanvasColor(clientX, clientY);
-        if (!color) return;
-        preview.style.setProperty(
-          'background-color',
-          `rgb(${color.r}, ${color.g}, ${color.b})`,
-        );
-      },
-      onDragEnd: ({ xy }) => {
-        const [clientX, clientY] = xy;
-
-        previewRef.current?.style.setProperty('display', 'none');
-        onPickingChange?.(false);
-
-        const canvas = canvasRef.current;
-        if (!canvas) return;
-        const ctx = canvas.getContext('2d');
-        if (!ctx) return;
-
-        // convert from mouse position into canvas pixels, have to use canvas actual size
-        const canvasRect = canvas.getBoundingClientRect();
-        const canvasX =
-          (clientX - canvasRect.left) * (canvas.width / canvasRect.width);
-        const canvasY =
-          (clientY - canvasRect.top) * (canvas.height / canvasRect.height);
-
-        const color = getCanvasColor(clientX, clientY);
-        if (!color) return;
-
-        onColor({
-          value: color,
-          percentage: { x: canvasX / canvas.width, y: canvasY / canvas.height },
-          pixel: { x: canvasX, y: canvasY },
-        });
-      },
-      onContextMenu: preventDefault,
-    },
-    {
-      drag: {
-        pointer: {
-          touch: true,
-        },
-      },
-      target: canvasRef,
-    },
-  );
-
-  return (
-    <>
-      <canvas
-        ref={canvasRef}
-        className={clsx(
-          'w-full h-auto sm:(w-auto h-full max-w-60vw) touch-none',
-          className,
-        )}
-      />
-      {/* bubble preview */}
-      <div
-        ref={previewRef}
-        className="-translate-1/2 rounded-full w-120px h-120px fixed pointer-events-none"
-      />
-    </>
-  );
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const previewRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return;
+
+		if (!imageSrc) {
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			return;
+		}
+
+		const image = new Image();
+		image.crossOrigin = 'anonymous';
+		image.src = imageSrc + '?canvas=true';
+		image.onload = () => {
+			canvas.width = image.width;
+			canvas.height = image.height;
+			// enforce aspect ratio
+			canvas.style.setProperty(
+				'aspect-ratio',
+				`${image.width}/${image.height}`,
+			);
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			ctx.drawImage(image, 0, 0);
+		};
+	}, [canvasRef, imageSrc]);
+
+	const getCanvasColor = useCallback(
+		(x: number, y: number) => {
+			const canvas = canvasRef.current;
+			if (!canvas) return null;
+			const ctx = canvas.getContext('2d');
+			if (!ctx) return null;
+
+			// convert from mouse position into canvas pixels, have to use canvas actual size
+			const canvasRect = canvas.getBoundingClientRect();
+			const canvasX = (x - canvasRect.left) * (canvas.width / canvasRect.width);
+			const canvasY =
+				(y - canvasRect.top) * (canvas.height / canvasRect.height);
+
+			const pixel = ctx.getImageData(canvasX, canvasY, 1, 1).data;
+
+			const color = { r: pixel[0], g: pixel[1], b: pixel[2] };
+			return color;
+		},
+		[canvasRef],
+	);
+
+	useGesture(
+		{
+			onDragStart: ({ xy }) => {
+				const [clientX, clientY] = xy;
+				const preview = previewRef.current;
+				if (!preview) return;
+				preview.style.setProperty('left', `${clientX}px`);
+				preview.style.setProperty('top', `${clientY}px`);
+				preview.style.setProperty('display', 'block');
+				const color = getCanvasColor(clientX, clientY);
+				if (!color) return;
+				preview.style.setProperty(
+					'background-color',
+					`rgb(${color.r}, ${color.g}, ${color.b})`,
+				);
+				onPickingChange?.(true);
+			},
+			onDrag: ({ xy }) => {
+				const [clientX, clientY] = xy;
+				const preview = previewRef.current;
+				if (!preview) return;
+				preview.style.setProperty('left', `${clientX}px`);
+				preview.style.setProperty('top', `${clientY}px`);
+
+				const color = getCanvasColor(clientX, clientY);
+				if (!color) return;
+				preview.style.setProperty(
+					'background-color',
+					`rgb(${color.r}, ${color.g}, ${color.b})`,
+				);
+			},
+			onDragEnd: ({ xy }) => {
+				const [clientX, clientY] = xy;
+
+				previewRef.current?.style.setProperty('display', 'none');
+				onPickingChange?.(false);
+
+				const canvas = canvasRef.current;
+				if (!canvas) return;
+				const ctx = canvas.getContext('2d');
+				if (!ctx) return;
+
+				// convert from mouse position into canvas pixels, have to use canvas actual size
+				const canvasRect = canvas.getBoundingClientRect();
+				const canvasX =
+					(clientX - canvasRect.left) * (canvas.width / canvasRect.width);
+				const canvasY =
+					(clientY - canvasRect.top) * (canvas.height / canvasRect.height);
+
+				const color = getCanvasColor(clientX, clientY);
+				if (!color) return;
+
+				onColor({
+					value: color,
+					percentage: { x: canvasX / canvas.width, y: canvasY / canvas.height },
+					pixel: { x: canvasX, y: canvasY },
+				});
+			},
+			onContextMenu: preventDefault,
+		},
+		{
+			drag: {
+				pointer: {
+					touch: true,
+				},
+			},
+			target: canvasRef,
+		},
+	);
+
+	return (
+		<>
+			<canvas
+				ref={canvasRef}
+				className={clsx(
+					'w-full h-auto sm:(w-auto h-full max-w-60vw) touch-none',
+					className,
+				)}
+			/>
+			{/* bubble preview */}
+			<div
+				ref={previewRef}
+				className="-translate-1/2 rounded-full w-120px h-120px fixed pointer-events-none"
+			/>
+		</>
+	);
 }
 
 function Bubbles({ colors }: { colors: ProjectColors }) {
-  const liveColors = hooks.useWatch(colors);
-
-  return (
-    <div className="absolute inset-0 pointer-events-none">
-      {liveColors.map((color, i) => (
-        <Bubble color={color} key={i} />
-      ))}
-    </div>
-  );
+	const liveColors = hooks.useWatch(colors);
+
+	return (
+		<div className="absolute inset-0 pointer-events-none">
+			{liveColors.map((color, i) => (
+				<Bubble color={color} key={i} />
+			))}
+		</div>
+	);
 }
 
 function Bubble({ color: colorVal }: { color: ProjectColorsItem }) {
-  const { percentage, value, id } = hooks.useWatch(colorVal);
-  const { x, y } = hooks.useWatch(percentage);
-  const { r, g, b } = hooks.useWatch(value);
-  const [selectedId, setSelected] = useColorSelection();
-  const selected = selectedId === id;
-  return (
-    <button
-      onClick={() => setSelected(id)}
-      className={clsx(
-        'absolute w-24px h-24px rounded-full pointer-events-auto -translate-1/2 border-solid border-1 border-black appearance-none',
-        selected && 'border-2 border-black w-48px h-48px z-1',
-      )}
-      style={{
-        backgroundColor: `rgb(${r}, ${g}, ${b})`,
-        left: `${x * 100}%`,
-        top: `${y * 100}%`,
-      }}
-    />
-  );
+	const { percentage, value, id } = hooks.useWatch(colorVal);
+	const { x, y } = hooks.useWatch(percentage);
+	const { r, g, b } = hooks.useWatch(value);
+	const [selectedId, setSelected] = useColorSelection();
+	const selected = selectedId === id;
+	return (
+		<button
+			onClick={() => setSelected(id)}
+			className={clsx(
+				'absolute w-24px h-24px rounded-full pointer-events-auto -translate-1/2 border-solid border-1 border-black appearance-none',
+				selected && 'border-2 border-black w-48px h-48px z-1',
+			)}
+			style={{
+				backgroundColor: `rgb(${r}, ${g}, ${b})`,
+				left: `${x * 100}%`,
+				top: `${y * 100}%`,
+			}}
+		/>
+	);
 }
diff --git a/apps/trip-tick/web/src/components/trips/TripView.tsx b/apps/trip-tick/web/src/components/trips/TripView.tsx
index 6d3b5dd8..29ee624a 100644
--- a/apps/trip-tick/web/src/components/trips/TripView.tsx
+++ b/apps/trip-tick/web/src/components/trips/TripView.tsx
@@ -6,388 +6,377 @@ import { CollapsibleSimple } from '@a-type/ui/components/collapsible';
 import { Icon } from '@a-type/ui/components/icon';
 import { LiveUpdateTextField } from '@a-type/ui/components/liveUpdateTextField';
 import {
-  TabsContent,
-  TabsList,
-  TabsRoot,
-  TabsTrigger,
+	TabsContent,
+	TabsList,
+	TabsRoot,
+	TabsTrigger,
 } from '@a-type/ui/components/tabs';
 import { H4 } from '@a-type/ui/components/typography';
-import {
-  FragmentOf,
-  graphql,
-  useHasServerAccess,
-  useLocalStorage,
-  usePageTitle,
-  useQuery,
-} from '@biscuits/client';
+import { FragmentOf, graphql, useQuery } from '@biscuits/graphql';
+import { useLocalStorage, usePageTitle } from '@biscuits/client';
 import * as Progress from '@radix-ui/react-progress';
 import {
-  List,
-  Trip,
-  TripCompletions,
-  TripExtraItems,
+	List,
+	Trip,
+	TripCompletions,
+	TripExtraItems,
 } from '@trip-tick.biscuits/verdant';
 import { Link, useSearchParams } from '@verdant-web/react-router';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import { LocationSelect } from '../weather/LocationSelect.jsx';
 import {
-  WeatherForecast,
-  forecast as forecastFragment,
+	WeatherForecast,
+	forecast as forecastFragment,
 } from '../weather/WeatherForecast.jsx';
 import { TripDateRange } from './TripDateRange.jsx';
 import { ExtraItem, ListItem } from './TripItem.jsx';
 import { quantityForecast } from './utils.js';
-import { TemperatureUnit } from '../weather/TemperatureUnit.jsx';
-import { useTemperatureUnit } from '../weather/useTemperatureUnit.js';
 
 export interface TripViewProps {
-  tripId: string;
+	tripId: string;
 }
 
 export function TripView({ tripId }: TripViewProps) {
-  const trip = hooks.useTrip(tripId);
-  usePageTitle(trip?.get('name') ?? 'Trip');
+	const trip = hooks.useTrip(tripId);
+	usePageTitle(trip?.get('name') ?? 'Trip');
 
-  if (!trip) {
-    return <div>Trip not found</div>;
-  }
+	if (!trip) {
+		return <div>Trip not found</div>;
+	}
 
-  return <TripViewImpl trip={trip} />;
+	return <TripViewImpl trip={trip} />;
 }
 
 const weather = graphql(
-  `
-    query Weather($input: WeatherForecastInput!) {
-      weatherForecast(input: $input) {
-        ...Forecast
-        ...QuantityForecast
-      }
-    }
-  `,
-  [forecastFragment, quantityForecast],
+	`
+		query Weather($input: WeatherForecastInput!) {
+			weatherForecast(input: $input) {
+				...Forecast
+				...QuantityForecast
+			}
+		}
+	`,
+	[forecastFragment, quantityForecast],
 );
 
 function formatDate(date: number) {
-  return new Date(date).toISOString().split('T')[0];
+	return new Date(date).toISOString().split('T')[0];
 }
 function useWeather(trip: Trip) {
-  const { location, startsAt, endsAt, id } = hooks.useWatch(trip);
-  hooks.useWatch(location);
-  const latitude = location?.get('latitude') || 0;
-  const longitude = location?.get('longitude') || 0;
+	const { location, startsAt, endsAt, id } = hooks.useWatch(trip);
+	hooks.useWatch(location);
+	const latitude = location?.get('latitude') || 0;
+	const longitude = location?.get('longitude') || 0;
 
-  const { data } = useQuery(weather, {
-    variables: {
-      input: {
-        endDate: formatDate(endsAt ?? 0),
-        startDate: formatDate(startsAt ?? 0),
-        latitude,
-        longitude,
-        // matches list config values. will be converted for display.
-        temperatureUnits: 'Kelvin',
-      },
-    },
-    skip: !latitude || !longitude || !startsAt || !endsAt,
-  });
+	const { data } = useQuery(weather, {
+		variables: {
+			input: {
+				endDate: formatDate(endsAt ?? 0),
+				startDate: formatDate(startsAt ?? 0),
+				latitude,
+				longitude,
+				// matches list config values. will be converted for display.
+				temperatureUnits: 'Kelvin',
+			},
+		},
+		skip: !latitude || !longitude || !startsAt || !endsAt,
+	});
 
-  const forecastData = data?.weatherForecast;
+	const forecastData = data?.weatherForecast;
 
-  const [cached, setCached] = useLocalStorage(
-    `weather-${id}`,
-    forecastData,
-    true,
-  );
-  useEffect(() => {
-    if (forecastData) {
-      setCached(forecastData);
-    }
-  }, [forecastData, setCached]);
+	const [cached, setCached] = useLocalStorage(
+		`weather-${id}`,
+		forecastData,
+		true,
+	);
+	useEffect(() => {
+		if (forecastData) {
+			setCached(forecastData);
+		}
+	}, [forecastData, setCached]);
 
-  const forecast = forecastData ?? cached;
+	const forecast = forecastData ?? cached;
 
-  return { forecast };
+	return { forecast };
 }
 
 function TripViewImpl({ trip }: { trip: Trip }) {
-  const { forecast } = useWeather(trip);
+	const { forecast } = useWeather(trip);
 
-  return (
-    <div className="flex flex-col gap-4 w-full">
-      <TripViewInfo trip={trip} forecast={forecast} />
-      <TripViewChecklists trip={trip} forecast={forecast} />
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-4 w-full">
+			<TripViewInfo trip={trip} forecast={forecast} />
+			<TripViewChecklists trip={trip} forecast={forecast} />
+		</div>
+	);
 }
 
 function TripViewInfo({
-  trip,
-  forecast,
+	trip,
+	forecast,
 }: {
-  trip: Trip;
-  forecast?: FragmentOf<typeof forecastFragment>;
+	trip: Trip;
+	forecast?: FragmentOf<typeof forecastFragment>;
 }) {
-  const { name, startsAt, endsAt, location } = hooks.useWatch(trip);
-  const [editName, setEditName] = useState(!name || name === 'New Trip');
-  return (
-    <div
-      className={classNames(
-        'flex flex-col items-start transition sm:rounded-md bg-primary-wash ring-16px sm:ring-8px ring-primary-wash',
-        {
-          'gap-4': !startsAt || !endsAt,
-          'gap-1': startsAt && endsAt,
-        },
-      )}
-    >
-      <div className="flex flex-row gap-1 items-center">
-        <Button asChild color="ghost" size="icon">
-          <Link to="/">
-            <Icon name="arrowLeft" />
-            <span className="sr-only">Back to trips</span>
-          </Link>
-        </Button>
-        {editName ? (
-          <LiveUpdateTextField
-            value={name}
-            onChange={(v) => trip.set('name', v)}
-            className="text-xl w-full"
-            autoFocus={editName}
-            onBlur={() => setEditName(false)}
-            autoSelect
-          />
-        ) : (
-          <Button
-            color="ghost"
-            className="text-xl"
-            onClick={() => setEditName(true)}
-          >
-            {name}
-            <Icon className="ml-2" name="pencil" />
-          </Button>
-        )}
-      </div>
-      <TripDateRange trip={trip} />
-      <LocationSelect
-        value={location}
-        onChange={(v) => trip.set('location', v)}
-      />
-      {forecast && <WeatherForecast forecast={forecast} />}
-    </div>
-  );
+	const { name, startsAt, endsAt, location } = hooks.useWatch(trip);
+	const [editName, setEditName] = useState(!name || name === 'New Trip');
+	return (
+		<div
+			className={classNames(
+				'flex flex-col items-start transition sm:rounded-md bg-primary-wash ring-16px sm:ring-8px ring-primary-wash',
+				{
+					'gap-4': !startsAt || !endsAt,
+					'gap-1': startsAt && endsAt,
+				},
+			)}
+		>
+			<div className="flex flex-row gap-1 items-center">
+				<Button asChild color="ghost" size="icon">
+					<Link to="/">
+						<Icon name="arrowLeft" />
+						<span className="sr-only">Back to trips</span>
+					</Link>
+				</Button>
+				{editName ?
+					<LiveUpdateTextField
+						value={name}
+						onChange={(v) => trip.set('name', v)}
+						className="text-xl w-full"
+						autoFocus={editName}
+						onBlur={() => setEditName(false)}
+						autoSelect
+					/>
+				:	<Button
+						color="ghost"
+						className="text-xl"
+						onClick={() => setEditName(true)}
+					>
+						{name}
+						<Icon className="ml-2" name="pencil" />
+					</Button>
+				}
+			</div>
+			<TripDateRange trip={trip} />
+			<LocationSelect
+				value={location}
+				onChange={(v) => trip.set('location', v)}
+			/>
+			{forecast && <WeatherForecast forecast={forecast} />}
+		</div>
+	);
 }
 
 function TripViewChecklists({
-  trip,
-  forecast,
+	trip,
+	forecast,
 }: {
-  trip: Trip;
-  forecast?: FragmentOf<typeof quantityForecast>;
+	trip: Trip;
+	forecast?: FragmentOf<typeof quantityForecast>;
 }) {
-  const { lists, completions, extraItems } = hooks.useWatch(trip);
-  const days = useTripDays(trip);
-  hooks.useWatch(lists);
-  hooks.useWatch(extraItems);
-  const allLists = hooks.useAllLists();
+	const { lists, completions, extraItems } = hooks.useWatch(trip);
+	const days = useTripDays(trip);
+	hooks.useWatch(lists);
+	hooks.useWatch(extraItems);
+	const allLists = hooks.useAllLists();
 
-  const mappedLists = lists
-    .map((id) => allLists.find((l) => l.get('id') === id))
-    .filter(function nonNil<T>(x: T | undefined): x is T {
-      return x !== undefined;
-    });
+	const mappedLists = lists
+		.map((id) => allLists.find((l) => l.get('id') === id))
+		.filter(function nonNil<T>(x: T | undefined): x is T {
+			return x !== undefined;
+		});
 
-  const [params, setParams] = useSearchParams();
-  const activeList = (params.get('list') ?? lists.get(0)) || '';
+	const [params, setParams] = useSearchParams();
+	const activeList = (params.get('list') ?? lists.get(0)) || '';
 
-  const [editingLists, setEditingLists] = useState(lists.length === 0);
-  const [startedWithNoLists] = useState(editingLists);
+	const [editingLists, setEditingLists] = useState(lists.length === 0);
+	const [startedWithNoLists] = useState(editingLists);
 
-  if (!days) {
-    return (
-      <div className="w-full flex-1 flex flex-col items-center justify-center text-gray-7 mt-8">
-        <div>Select dates to get started</div>
-      </div>
-    );
-  }
+	if (!days) {
+		return (
+			<div className="w-full flex-1 flex flex-col items-center justify-center text-gray-7 mt-8">
+				<div>Select dates to get started</div>
+			</div>
+		);
+	}
 
-  return (
-    <TabsRoot
-      value={activeList}
-      onValueChange={(val) => {
-        setParams((params) => {
-          params.set('list', val);
-          return params;
-        });
-      }}
-    >
-      <div className="display-unset mb-4">
-        <div className="flex flex-row gap-2 items-center px-2">
-          <H4 className="flex-1">
-            {editingLists
-              ? startedWithNoLists
-                ? 'Add lists'
-                : 'Edit lists'
-              : 'Lists'}
-          </H4>
-          <Button
-            className="flex-0-0-auto m-1"
-            size={editingLists ? 'small' : 'icon'}
-            color={editingLists ? 'accent' : 'ghost'}
-            onClick={() => setEditingLists((v) => !v)}
-          >
-            {editingLists ? (
-              <>
-                Done <div className="i-solar-check-circle-linear" />
-              </>
-            ) : (
-              <div className="i-solar-settings-linear" />
-            )}
-          </Button>
-        </div>
-        <CollapsibleSimple open={editingLists}>
-          <AddListsPicker trip={trip} className="p-2" />
-        </CollapsibleSimple>
-        <TabsList className="important:justify-start sticky top-0 z-2 bg-wash overflow-x-auto overflow-y-hidden w-full">
-          {mappedLists.map((list) => (
-            <ListTab list={list} key={list.get('id')} trip={trip} />
-          ))}
-        </TabsList>
-      </div>
-      {mappedLists.map((list) => {
-        const listId = list.get('id');
-        return (
-          <TabsContent key={list.get('id')} value={list.get('id')}>
-            <TripViewChecklist
-              key={listId}
-              list={list}
-              days={days}
-              completions={completions}
-              extraItems={extraItems}
-              forecast={forecast}
-            />
-          </TabsContent>
-        );
-      })}
-      {startedWithNoLists && !mappedLists.length && (
-        <div className="w-full p-4 text-gray-7 italic">
-          <span className="[font-style:normal]">💡</span> Add lists to this trip
-          for everything you want to pack. Once you start packing, check off
-          items as you go.
-        </div>
-      )}
-    </TabsRoot>
-  );
+	return (
+		<TabsRoot
+			value={activeList}
+			onValueChange={(val) => {
+				setParams((params) => {
+					params.set('list', val);
+					return params;
+				});
+			}}
+		>
+			<div className="display-unset mb-4">
+				<div className="flex flex-row gap-2 items-center px-2">
+					<H4 className="flex-1">
+						{editingLists ?
+							startedWithNoLists ?
+								'Add lists'
+							:	'Edit lists'
+						:	'Lists'}
+					</H4>
+					<Button
+						className="flex-0-0-auto m-1"
+						size={editingLists ? 'small' : 'icon'}
+						color={editingLists ? 'accent' : 'ghost'}
+						onClick={() => setEditingLists((v) => !v)}
+					>
+						{editingLists ?
+							<>
+								Done <div className="i-solar-check-circle-linear" />
+							</>
+						:	<div className="i-solar-settings-linear" />}
+					</Button>
+				</div>
+				<CollapsibleSimple open={editingLists}>
+					<AddListsPicker trip={trip} className="p-2" />
+				</CollapsibleSimple>
+				<TabsList className="important:justify-start sticky top-0 z-2 bg-wash overflow-x-auto overflow-y-hidden w-full">
+					{mappedLists.map((list) => (
+						<ListTab list={list} key={list.get('id')} trip={trip} />
+					))}
+				</TabsList>
+			</div>
+			{mappedLists.map((list) => {
+				const listId = list.get('id');
+				return (
+					<TabsContent key={list.get('id')} value={list.get('id')}>
+						<TripViewChecklist
+							key={listId}
+							list={list}
+							days={days}
+							completions={completions}
+							extraItems={extraItems}
+							forecast={forecast}
+						/>
+					</TabsContent>
+				);
+			})}
+			{startedWithNoLists && !mappedLists.length && (
+				<div className="w-full p-4 text-gray-7 italic">
+					<span className="[font-style:normal]">💡</span> Add lists to this trip
+					for everything you want to pack. Once you start packing, check off
+					items as you go.
+				</div>
+			)}
+		</TabsRoot>
+	);
 }
 
 function ListTab({ trip, list }: { list: List; trip: Trip }) {
-  const { value } = useTripProgress(trip, { listFilter: [list.get('id')] });
-  return (
-    <TabsTrigger
-      value={list.get('id')}
-      className="relative overflow-hidden flex-shrink-0"
-    >
-      <span className="text-nowrap">{list.get('name')}</span>
-      <Progress.Root className="w-full absolute bottom-0 left-0 overflow-hidden rounded-b-full border border-t-solid border-t-primary">
-        <Progress.Indicator
-          className="bg-accent w-full h-4px"
-          style={{
-            transform: `translateX(-${100 * (1 - value)}%)`,
-          }}
-        />
-      </Progress.Root>
-    </TabsTrigger>
-  );
+	const { value } = useTripProgress(trip, { listFilter: [list.get('id')] });
+	return (
+		<TabsTrigger
+			value={list.get('id')}
+			className="relative overflow-hidden flex-shrink-0"
+		>
+			<span className="text-nowrap">{list.get('name')}</span>
+			<Progress.Root className="w-full absolute bottom-0 left-0 overflow-hidden rounded-b-full border border-t-solid border-t-primary">
+				<Progress.Indicator
+					className="bg-accent w-full h-4px"
+					style={{
+						transform: `translateX(-${100 * (1 - value)}%)`,
+					}}
+				/>
+			</Progress.Root>
+		</TabsTrigger>
+	);
 }
 
 function TripViewChecklist({
-  list,
-  days,
-  completions,
-  extraItems,
-  forecast,
+	list,
+	days,
+	completions,
+	extraItems,
+	forecast,
 }: {
-  list: List;
-  days: number;
-  completions: TripCompletions;
-  extraItems: TripExtraItems;
-  forecast?: FragmentOf<typeof quantityForecast>;
+	list: List;
+	days: number;
+	completions: TripCompletions;
+	extraItems: TripExtraItems;
+	forecast?: FragmentOf<typeof quantityForecast>;
 }) {
-  const { items, id: listId } = hooks.useWatch(list);
-  hooks.useWatch(items);
-  hooks.useWatch(completions);
-  hooks.useWatch(extraItems);
+	const { items, id: listId } = hooks.useWatch(list);
+	hooks.useWatch(items);
+	hooks.useWatch(completions);
+	hooks.useWatch(extraItems);
 
-  let extraItemsForList = extraItems.get(listId) ?? null;
-  hooks.useWatch(extraItemsForList);
-  if (Array.isArray(extraItemsForList)) {
-    // workaround Verdant bug #371
-    extraItemsForList = null;
-  }
+	let extraItemsForList = extraItems.get(listId) ?? null;
+	hooks.useWatch(extraItemsForList);
+	if (Array.isArray(extraItemsForList)) {
+		// workaround Verdant bug #371
+		extraItemsForList = null;
+	}
 
-  return (
-    <div className="flex flex-col">
-      <ul className="list-none flex flex-col gap-1 m-0 p-0 mb-6">
-        {items.map((item) => {
-          const completion = completions.get(item.get('id')) ?? 0;
-          return (
-            <li key={item.get('id')} className="m-0 p-0">
-              <ListItem
-                item={item}
-                days={days}
-                completion={completion}
-                onCompletionChanged={(value) => {
-                  completions.set(item.get('id'), value);
-                }}
-                forecast={forecast}
-              />
-            </li>
-          );
-        })}
-        {extraItemsForList?.map((item) => {
-          const completion = completions.get(item.get('id')) ?? 0;
-          return (
-            <li key={item.get('id')} className="m-0 p-0">
-              <ExtraItem
-                item={item}
-                completion={completion}
-                onCompletionChanged={(value) => {
-                  completions.set(item.get('id'), value);
-                }}
-                onDelete={() => {
-                  extraItemsForList?.removeAll(item);
-                }}
-              />
-            </li>
-          );
-        })}
-      </ul>
-      <div className="flex flex-col gap-4">
-        <Button
-          onClick={() => {
-            if (!extraItemsForList) {
-              extraItems.set(listId, [
-                {
-                  quantity: 1,
-                },
-              ]);
-            } else {
-              extraItemsForList.push({
-                quantity: 1,
-              });
-            }
-          }}
-          size="small"
-          className="self-start"
-        >
-          <Icon name="plus" /> Add item
-        </Button>
-        <p className="text-sm italic text-gray-7">
-          New items are only applied to this trip.{' '}
-          <Link className="font-bold" to={`/lists/${list.get('id')}`}>
-            Edit the list
-          </Link>{' '}
-          if you want them for future trips.
-        </p>
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex flex-col">
+			<ul className="list-none flex flex-col gap-1 m-0 p-0 mb-6">
+				{items.map((item) => {
+					const completion = completions.get(item.get('id')) ?? 0;
+					return (
+						<li key={item.get('id')} className="m-0 p-0">
+							<ListItem
+								item={item}
+								days={days}
+								completion={completion}
+								onCompletionChanged={(value) => {
+									completions.set(item.get('id'), value);
+								}}
+								forecast={forecast}
+							/>
+						</li>
+					);
+				})}
+				{extraItemsForList?.map((item) => {
+					const completion = completions.get(item.get('id')) ?? 0;
+					return (
+						<li key={item.get('id')} className="m-0 p-0">
+							<ExtraItem
+								item={item}
+								completion={completion}
+								onCompletionChanged={(value) => {
+									completions.set(item.get('id'), value);
+								}}
+								onDelete={() => {
+									extraItemsForList?.removeAll(item);
+								}}
+							/>
+						</li>
+					);
+				})}
+			</ul>
+			<div className="flex flex-col gap-4">
+				<Button
+					onClick={() => {
+						if (!extraItemsForList) {
+							extraItems.set(listId, [
+								{
+									quantity: 1,
+								},
+							]);
+						} else {
+							extraItemsForList.push({
+								quantity: 1,
+							});
+						}
+					}}
+					size="small"
+					className="self-start"
+				>
+					<Icon name="plus" /> Add item
+				</Button>
+				<p className="text-sm italic text-gray-7">
+					New items are only applied to this trip.{' '}
+					<Link className="font-bold" to={`/lists/${list.get('id')}`}>
+						Edit the list
+					</Link>{' '}
+					if you want them for future trips.
+				</p>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/trip-tick/web/src/components/trips/utils.ts b/apps/trip-tick/web/src/components/trips/utils.ts
index 5fbdbb60..2e1af4aa 100644
--- a/apps/trip-tick/web/src/components/trips/utils.ts
+++ b/apps/trip-tick/web/src/components/trips/utils.ts
@@ -1,83 +1,82 @@
-import { ResultOf, graphql } from '@biscuits/client';
+import { graphql, ResultOf } from '@biscuits/graphql';
 import {
-  ListItemsItemConditions,
-  ListItemsItemConditionsItem,
-  ListItemsItemConditionsItemSnapshot,
-  ListItemsItemConditionsSnapshot,
-  ListItemsItemPeriod,
+	ListItemsItemConditionsItemSnapshot,
+	ListItemsItemConditionsSnapshot,
+	ListItemsItemPeriod,
 } from '@trip-tick.biscuits/verdant';
 
 export function getComputedQuantity({
-  quantity,
-  roundDown,
-  days: rawDays,
-  conditions,
-  period,
-  periodMultiplier,
-  additional,
-  weather: forecast,
+	quantity,
+	roundDown,
+	days: rawDays,
+	conditions,
+	period,
+	periodMultiplier,
+	additional,
+	weather: forecast,
 }: {
-  quantity: number;
-  roundDown: boolean;
-  days: number;
-  conditions: ListItemsItemConditionsSnapshot | null;
-  period: ListItemsItemPeriod;
-  periodMultiplier: number;
-  additional: number;
-  weather?: ResultOf<typeof quantityForecast>;
+	quantity: number;
+	roundDown: boolean;
+	days: number;
+	conditions: ListItemsItemConditionsSnapshot | null;
+	period: ListItemsItemPeriod;
+	periodMultiplier: number;
+	additional: number;
+	weather?: ResultOf<typeof quantityForecast>;
 }) {
-  let unrounded = 0;
-  let conditionedDays = conditions?.length
-    ? (forecast?.days ?? []).filter((day) => {
-        if (!conditions) return true;
-        return conditions.every((condition) => matchDay(day, condition));
-      }).length
-    : rawDays;
+	let unrounded = 0;
+	let conditionedDays =
+		conditions?.length ?
+			(forecast?.days ?? []).filter((day) => {
+				if (!conditions) return true;
+				return conditions.every((condition) => matchDay(day, condition));
+			}).length
+		:	rawDays;
 
-  const conditionedNights =
-    conditionedDays === 0 ? 0 : Math.max(1, conditionedDays - 1);
+	const conditionedNights =
+		conditionedDays === 0 ? 0 : Math.max(1, conditionedDays - 1);
 
-  switch (period) {
-    case 'day':
-      unrounded = (conditionedDays / periodMultiplier) * quantity;
-      break;
-    case 'night':
-      unrounded = (conditionedNights / periodMultiplier) * quantity;
-      break;
-    case 'trip':
-      unrounded = conditionedDays ? quantity : 0;
-      break;
-  }
-  unrounded = Math.max(0, unrounded);
+	switch (period) {
+		case 'day':
+			unrounded = (conditionedDays / periodMultiplier) * quantity;
+			break;
+		case 'night':
+			unrounded = (conditionedNights / periodMultiplier) * quantity;
+			break;
+		case 'trip':
+			unrounded = conditionedDays ? quantity : 0;
+			break;
+	}
+	unrounded = Math.max(0, unrounded);
 
-  if (unrounded === 0) return 0;
+	if (unrounded === 0) return 0;
 
-  return (
-    additional +
-    (roundDown ? Math.max(1, Math.floor(unrounded)) : Math.ceil(unrounded))
-  );
+	return (
+		additional +
+		(roundDown ? Math.max(1, Math.floor(unrounded)) : Math.ceil(unrounded))
+	);
 }
 
 function matchDay(
-  day: { low: number; high: number; willRain: boolean },
-  condition: ListItemsItemConditionsItemSnapshot,
+	day: { low: number; high: number; willRain: boolean },
+	condition: ListItemsItemConditionsItemSnapshot,
 ) {
-  switch (condition.type) {
-    case 'rain':
-      return day.willRain;
-    case 'hot':
-      return day.high > condition.params.temperature ?? 299;
-    case 'cold':
-      return day.low < condition.params.temperature ?? 277;
-  }
+	switch (condition.type) {
+		case 'rain':
+			return day.willRain;
+		case 'hot':
+			return day.high > (condition.params.temperature ?? 299);
+		case 'cold':
+			return day.low < (condition.params.temperature ?? 277);
+	}
 }
 
 export const quantityForecast = graphql(`
-  fragment QuantityForecast on WeatherForecast @_unmask {
-    days {
-      low
-      high
-      willRain
-    }
-  }
+	fragment QuantityForecast on WeatherForecast @_unmask {
+		days {
+			low
+			high
+			willRain
+		}
+	}
 `);
diff --git a/apps/trip-tick/web/src/components/weather/LocationSelect.tsx b/apps/trip-tick/web/src/components/weather/LocationSelect.tsx
index 77dbf7d1..972701b1 100644
--- a/apps/trip-tick/web/src/components/weather/LocationSelect.tsx
+++ b/apps/trip-tick/web/src/components/weather/LocationSelect.tsx
@@ -1,17 +1,12 @@
 import { hooks } from '@/store.js';
 import { Input } from '@a-type/ui/components/input/Input';
 import {
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
+	Popover,
+	PopoverAnchor,
+	PopoverContent,
 } from '@a-type/ui/components/popover';
-import {
-  graphql,
-  useHasServerAccess,
-  useClient,
-  useDebounced,
-  useQuery,
-} from '@biscuits/client';
+import { useHasServerAccess, useDebounced } from '@biscuits/client';
+import { graphql, useClient, useQuery } from '@biscuits/graphql';
 import { TripLocation, TripLocationInit } from '@trip-tick.biscuits/verdant';
 import classNames from 'classnames';
 import { useCombobox } from 'downshift';
@@ -23,205 +18,205 @@ import { Button } from '@a-type/ui/components/button';
 import { Icon } from '@a-type/ui/components/icon';
 
 export interface LocationSelectProps {
-  className?: string;
-  value: TripLocation | null;
-  onChange: (value: TripLocationInit) => void;
+	className?: string;
+	value: TripLocation | null;
+	onChange: (value: TripLocationInit) => void;
 }
 
 const locationAutocomplete = graphql(`
-  query LocationAutocomplete($query: String!) {
-    locationAutocomplete(search: $query) {
-      placeId
-      text
-    }
-  }
+	query LocationAutocomplete($query: String!) {
+		locationAutocomplete(search: $query) {
+			placeId
+			text
+		}
+	}
 `);
 
 const geographicLocation = graphql(`
-  query GeographicLocation($placeId: String!) {
-    geographicLocation(placeId: $placeId) {
-      latitude
-      longitude
-      id
-    }
-  }
+	query GeographicLocation($placeId: String!) {
+		geographicLocation(placeId: $placeId) {
+			latitude
+			longitude
+			id
+		}
+	}
 `);
 
 export function LocationSelect({
-  className,
-  value,
-  onChange,
+	className,
+	value,
+	onChange,
 }: LocationSelectProps) {
-  const isSubscribed = useHasServerAccess();
-
-  hooks.useWatch(value);
-
-  const [showEdit, setShowEdit] = useState(false);
-
-  const handleChange = useCallback(
-    (v: TripLocationInit) => {
-      onChange(v);
-      setShowEdit(false);
-    },
-    [onChange],
-  );
-
-  if (!isSubscribed) return null;
-
-  if (!showEdit && value) {
-    return (
-      <Button
-        color="ghost"
-        size="small"
-        className={classNames('font-normal', className)}
-        onClick={() => setShowEdit(true)}
-      >
-        <Icon name="location" />
-        {value.get('name')}
-      </Button>
-    );
-  }
-
-  return (
-    <LocationSelectAutocomplete
-      value={value}
-      onChange={handleChange}
-      className={className}
-      autoFocus={showEdit}
-    />
-  );
+	const isSubscribed = useHasServerAccess();
+
+	hooks.useWatch(value);
+
+	const [showEdit, setShowEdit] = useState(false);
+
+	const handleChange = useCallback(
+		(v: TripLocationInit) => {
+			onChange(v);
+			setShowEdit(false);
+		},
+		[onChange],
+	);
+
+	if (!isSubscribed) return null;
+
+	if (!showEdit && value) {
+		return (
+			<Button
+				color="ghost"
+				size="small"
+				className={classNames('font-normal', className)}
+				onClick={() => setShowEdit(true)}
+			>
+				<Icon name="location" />
+				{value.get('name')}
+			</Button>
+		);
+	}
+
+	return (
+		<LocationSelectAutocomplete
+			value={value}
+			onChange={handleChange}
+			className={className}
+			autoFocus={showEdit}
+		/>
+	);
 }
 
 function LocationSelectAutocomplete({
-  value,
-  onChange,
-  className,
-  autoFocus,
+	value,
+	onChange,
+	className,
+	autoFocus,
 }: {
-  value: TripLocation | null;
-  onChange: (value: TripLocationInit) => void;
-  className?: string;
-  autoFocus?: boolean;
+	value: TripLocation | null;
+	onChange: (value: TripLocationInit) => void;
+	className?: string;
+	autoFocus?: boolean;
 }) {
-  const name = value?.get('name') ?? '';
-
-  const [_, startTransition] = useTransition();
-  const [searchValue, setSearchValue] = useState(name);
-  const debouncedSearchValue = useDebounced(searchValue, 500);
-
-  const searchResult = useQuery(locationAutocomplete, {
-    variables: { query: debouncedSearchValue },
-    skip: !debouncedSearchValue || debouncedSearchValue === name,
-  });
-  const client = useClient();
-
-  const options = searchResult.data?.locationAutocomplete ?? [];
-
-  const {
-    isOpen,
-    getMenuProps,
-    getInputProps,
-    highlightedIndex,
-    getItemProps,
-    setInputValue,
-  } = useCombobox({
-    items: options,
-    initialInputValue: name,
-    onInputValueChange({ inputValue }) {
-      startTransition(() => {
-        setSearchValue(inputValue || '');
-      });
-    },
-    async onSelectedItemChange({ selectedItem, inputValue }) {
-      if (selectedItem) {
-        // we must now fetch the geocoded location
-        const result = await client.query({
-          query: geographicLocation,
-          variables: {
-            placeId: selectedItem.placeId,
-          },
-        });
-        const data = result.data?.geographicLocation;
-
-        if (data) {
-          onChange({
-            latitude: data.latitude,
-            longitude: data.longitude,
-            name: selectedItem.text,
-          });
-        } else {
-          toast.error('Failed to fetch location details');
-        }
-      }
-    },
-    itemToString: (item) => {
-      return item?.text ?? '';
-    },
-  });
-
-  const contentRef = useRef<HTMLDivElement>(null);
-  const innerRef = useSize<HTMLDivElement>(({ width }) => {
-    if (contentRef.current) {
-      contentRef.current.style.width = width + 'px';
-    }
-  });
-  return (
-    <Popover open={isOpen}>
-      <PopoverAnchor asChild>
-        <div
-          data-state={isOpen ? 'open' : 'closed'}
-          className={classNames(
-            'flex gap-1 flex-col w-full relative',
-            className,
-          )}
-          ref={innerRef}
-        >
-          <label htmlFor="location-input" className="font-bold">
-            Where are you going?
-          </label>
-          <Input
-            data-test="location-input"
-            id="location-input"
-            {...getInputProps({
-              placeholder: 'Raleigh, NC',
-            })}
-            className="flex-1"
-            required
-            autoComplete="off"
-            name="location"
-            autoFocus={autoFocus}
-            autoSelect
-          />
-        </div>
-      </PopoverAnchor>
-      <PopoverContent
-        radius="md"
-        align="start"
-        forceMount
-        onOpenAutoFocus={preventDefault}
-        {...getMenuProps({
-          ref: contentRef,
-        })}
-        className={classNames(
-          'overflow-x-hidden overflow-y-auto overscroll-contain shadow-lg',
-        )}
-      >
-        {options.map((item, index) => (
-          <div
-            key={item.placeId}
-            {...getItemProps({ item, index })}
-            className={classNames(
-              'p-2 cursor-pointer flex flex-col',
-              index === highlightedIndex && 'bg-gray-100',
-            )}
-          >
-            <span className="">{item.text}</span>
-          </div>
-        ))}
-        {!options?.length && (
-          <div className="px-2 text-center">No results found</div>
-        )}
-      </PopoverContent>
-    </Popover>
-  );
+	const name = value?.get('name') ?? '';
+
+	const [_, startTransition] = useTransition();
+	const [searchValue, setSearchValue] = useState(name);
+	const debouncedSearchValue = useDebounced(searchValue, 500);
+
+	const searchResult = useQuery(locationAutocomplete, {
+		variables: { query: debouncedSearchValue },
+		skip: !debouncedSearchValue || debouncedSearchValue === name,
+	});
+	const client = useClient();
+
+	const options = searchResult.data?.locationAutocomplete ?? [];
+
+	const {
+		isOpen,
+		getMenuProps,
+		getInputProps,
+		highlightedIndex,
+		getItemProps,
+		setInputValue,
+	} = useCombobox({
+		items: options,
+		initialInputValue: name,
+		onInputValueChange({ inputValue }) {
+			startTransition(() => {
+				setSearchValue(inputValue || '');
+			});
+		},
+		async onSelectedItemChange({ selectedItem, inputValue }) {
+			if (selectedItem) {
+				// we must now fetch the geocoded location
+				const result = await client.query({
+					query: geographicLocation,
+					variables: {
+						placeId: selectedItem.placeId,
+					},
+				});
+				const data = result.data?.geographicLocation;
+
+				if (data) {
+					onChange({
+						latitude: data.latitude,
+						longitude: data.longitude,
+						name: selectedItem.text,
+					});
+				} else {
+					toast.error('Failed to fetch location details');
+				}
+			}
+		},
+		itemToString: (item) => {
+			return item?.text ?? '';
+		},
+	});
+
+	const contentRef = useRef<HTMLDivElement>(null);
+	const innerRef = useSize<HTMLDivElement>(({ width }) => {
+		if (contentRef.current) {
+			contentRef.current.style.width = width + 'px';
+		}
+	});
+	return (
+		<Popover open={isOpen}>
+			<PopoverAnchor asChild>
+				<div
+					data-state={isOpen ? 'open' : 'closed'}
+					className={classNames(
+						'flex gap-1 flex-col w-full relative',
+						className,
+					)}
+					ref={innerRef}
+				>
+					<label htmlFor="location-input" className="font-bold">
+						Where are you going?
+					</label>
+					<Input
+						data-test="location-input"
+						id="location-input"
+						{...getInputProps({
+							placeholder: 'Raleigh, NC',
+						})}
+						className="flex-1"
+						required
+						autoComplete="off"
+						name="location"
+						autoFocus={autoFocus}
+						autoSelect
+					/>
+				</div>
+			</PopoverAnchor>
+			<PopoverContent
+				radius="md"
+				align="start"
+				forceMount
+				onOpenAutoFocus={preventDefault}
+				{...getMenuProps({
+					ref: contentRef,
+				})}
+				className={classNames(
+					'overflow-x-hidden overflow-y-auto overscroll-contain shadow-lg',
+				)}
+			>
+				{options.map((item, index) => (
+					<div
+						key={item.placeId}
+						{...getItemProps({ item, index })}
+						className={classNames(
+							'p-2 cursor-pointer flex flex-col',
+							index === highlightedIndex && 'bg-gray-100',
+						)}
+					>
+						<span className="">{item.text}</span>
+					</div>
+				))}
+				{!options?.length && (
+					<div className="px-2 text-center">No results found</div>
+				)}
+			</PopoverContent>
+		</Popover>
+	);
 }
diff --git a/apps/trip-tick/web/src/components/weather/WeatherForecast.tsx b/apps/trip-tick/web/src/components/weather/WeatherForecast.tsx
index 5887ee08..e9992757 100644
--- a/apps/trip-tick/web/src/components/weather/WeatherForecast.tsx
+++ b/apps/trip-tick/web/src/components/weather/WeatherForecast.tsx
@@ -1,130 +1,130 @@
 import { Chip } from '@a-type/ui/components/chip';
 import {
-  CollapsibleContent,
-  CollapsibleRoot,
-  CollapsibleTrigger,
+	CollapsibleContent,
+	CollapsibleRoot,
+	CollapsibleTrigger,
 } from '@a-type/ui/components/collapsible';
 import { Icon } from '@a-type/ui/components/icon';
-import { FragmentOf, ResultOf, graphql, readFragment } from '@biscuits/client';
+import { ResultOf, graphql } from '@biscuits/graphql';
 import classNames from 'classnames';
 import { TemperatureUnit } from './TemperatureUnit.jsx';
 import { useTemperatureUnit } from './useTemperatureUnit.js';
 
 export interface WeatherForecastProps {
-  className?: string;
-  forecast: ResultOf<typeof forecast>;
+	className?: string;
+	forecast: ResultOf<typeof forecast>;
 }
 
 const forecastDay = graphql(`
-  fragment ForecastDay on WeatherForecastDay @_unmask {
-    date
-    high
-    low
-    willRain
-  }
+	fragment ForecastDay on WeatherForecastDay @_unmask {
+		date
+		high
+		low
+		willRain
+	}
 `);
 
 export const forecast = graphql(
-  `
-    fragment Forecast on WeatherForecast @_unmask {
-      error
-      high
-      low
-      willRain
-      temperatureUnit
-      days {
-        ...ForecastDay
-      }
-    }
-  `,
-  [forecastDay],
+	`
+		fragment Forecast on WeatherForecast @_unmask {
+			error
+			high
+			low
+			willRain
+			temperatureUnit
+			days {
+				...ForecastDay
+			}
+		}
+	`,
+	[forecastDay],
 );
 
 export function WeatherForecast({
-  className,
-  forecast: data,
+	className,
+	forecast: data,
 }: WeatherForecastProps) {
-  const { toDisplay } = useTemperatureUnit();
-  return (
-    <CollapsibleRoot className={classNames('w-full', className)}>
-      <CollapsibleTrigger className="bg-transparent border-none flex flex-row items-center gap-1 flex-wrap p-2 w-full">
-        <Chip aria-label="High temperature" className="text-black">
-          <Icon name="arrowUp" className="text-attention-dark" />
-          {toDisplay(data.high)}
-          <TemperatureUnit />
-        </Chip>
-        <Chip aria-label="Low temperature" className="text-black">
-          <Icon name="arrowDown" className="text-primary-dark" />
-          {toDisplay(data.low)}
-          <TemperatureUnit />
-        </Chip>
-        {data.willRain && (
-          <Chip className="text-black">
-            <Raindrop /> Rain
-          </Chip>
-        )}
-        <Icon
-          name="arrowDown"
-          className="ml-auto [*[data-state=open]>&]:rotate-180 transition-transform text-black"
-        />
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <span className="text-gray-7 italic text-xs pl-2 py-1">
-          Daily Forecast
-        </span>
-        <div className="flex flex-row gap-1 overflow-x-auto w-full min-w-0 py-2">
-          {data.days.map((day, i) => (
-            <DayForecast day={day} key={i} />
-          ))}
-        </div>
-      </CollapsibleContent>
-    </CollapsibleRoot>
-  );
+	const { toDisplay } = useTemperatureUnit();
+	return (
+		<CollapsibleRoot className={classNames('w-full', className)}>
+			<CollapsibleTrigger className="bg-transparent border-none flex flex-row items-center gap-1 flex-wrap p-2 w-full">
+				<Chip aria-label="High temperature" className="text-black">
+					<Icon name="arrowUp" className="text-attention-dark" />
+					{toDisplay(data.high)}
+					<TemperatureUnit />
+				</Chip>
+				<Chip aria-label="Low temperature" className="text-black">
+					<Icon name="arrowDown" className="text-primary-dark" />
+					{toDisplay(data.low)}
+					<TemperatureUnit />
+				</Chip>
+				{data.willRain && (
+					<Chip className="text-black">
+						<Raindrop /> Rain
+					</Chip>
+				)}
+				<Icon
+					name="arrowDown"
+					className="ml-auto [*[data-state=open]>&]:rotate-180 transition-transform text-black"
+				/>
+			</CollapsibleTrigger>
+			<CollapsibleContent>
+				<span className="text-gray-7 italic text-xs pl-2 py-1">
+					Daily Forecast
+				</span>
+				<div className="flex flex-row gap-1 overflow-x-auto w-full min-w-0 py-2">
+					{data.days.map((day, i) => (
+						<DayForecast day={day} key={i} />
+					))}
+				</div>
+			</CollapsibleContent>
+		</CollapsibleRoot>
+	);
 }
 
 function DayForecast({ day }: { day: ResultOf<typeof forecastDay> }) {
-  const { date, high, low, willRain } = day;
-  const { toDisplay } = useTemperatureUnit();
-  const dateNumber = date.split('-').pop();
+	const { date, high, low, willRain } = day;
+	const { toDisplay } = useTemperatureUnit();
+	const dateNumber = date.split('-').pop();
 
-  return (
-    <div className="flex flex-col items-center gap-1 border border-1 border-solid border-black bg-white rounded-md text-xs py-1 px-4 relative">
-      <div className="font-bold text-sm">{dateNumber}</div>
-      {!!willRain && <Raindrop className="absolute top-1 right-1" />}
-      <div className="flex flex-col items-center">
-        <div
-          className="text-attention-dark flex flex-row items-center"
-          aria-label="High temperature"
-        >
-          <Icon name="arrowUp" />
-          {toDisplay(high)}
-        </div>
-        <div
-          className="text-primary-dark flex flex-row items-center"
-          aria-label="Low temperature"
-        >
-          <Icon name="arrowDown" />
-          {toDisplay(low)}
-        </div>
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex flex-col items-center gap-1 border border-1 border-solid border-black bg-white rounded-md text-xs py-1 px-4 relative">
+			<div className="font-bold text-sm">{dateNumber}</div>
+			{!!willRain && <Raindrop className="absolute top-1 right-1" />}
+			<div className="flex flex-col items-center">
+				<div
+					className="text-attention-dark flex flex-row items-center"
+					aria-label="High temperature"
+				>
+					<Icon name="arrowUp" />
+					{toDisplay(high)}
+				</div>
+				<div
+					className="text-primary-dark flex flex-row items-center"
+					aria-label="Low temperature"
+				>
+					<Icon name="arrowDown" />
+					{toDisplay(low)}
+				</div>
+			</div>
+		</div>
+	);
 }
 
 function Raindrop({ className }: { className?: string }) {
-  return (
-    <svg
-      width="11"
-      height="14"
-      viewBox="0 0 11 14"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        d="M9.49985 9.99999C8.49988 14 2.49988 14 1.49985 9.99999C0.49983 5.99997 5.49975 1 5.49975 1C5.49975 1 10.4998 5.99997 9.49985 9.99999Z"
-        strokeLinejoin="round"
-        className="stroke-primary-dark fill-primary"
-      />
-    </svg>
-  );
+	return (
+		<svg
+			width="11"
+			height="14"
+			viewBox="0 0 11 14"
+			xmlns="http://www.w3.org/2000/svg"
+			className={className}
+		>
+			<path
+				d="M9.49985 9.99999C8.49988 14 2.49988 14 1.49985 9.99999C0.49983 5.99997 5.49975 1 5.49975 1C5.49975 1 10.4998 5.99997 9.49985 9.99999Z"
+				strokeLinejoin="round"
+				className="stroke-primary-dark fill-primary"
+			/>
+		</svg>
+	);
 }
diff --git a/apps/wish-wash/hub/src/components/VibeCardContent.tsx b/apps/wish-wash/hub/src/components/VibeCardContent.tsx
index 1e8c5d57..58f34da7 100644
--- a/apps/wish-wash/hub/src/components/VibeCardContent.tsx
+++ b/apps/wish-wash/hub/src/components/VibeCardContent.tsx
@@ -3,7 +3,7 @@ import { Card } from '@a-type/ui/components/card';
 import { ItemCardTitle } from './ItemCardTitle.jsx';
 import { Dialog } from '@a-type/ui/components/dialog';
 import { P } from '@a-type/ui/components/typography';
-import { ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 
 export interface VibeCardContentProps {
 	item: HubWishlistItem;
@@ -11,19 +11,20 @@ export interface VibeCardContentProps {
 	listAuthor: string;
 }
 
-export function VibeCardContent({
-	item,
-	className,
-	listAuthor,
-}: VibeCardContentProps) {
-	return (
-		<VibeCardBuyExperience item={item} listAuthor={listAuthor}>
-			<Card.Main className={className}>
-				<ItemCardTitle item={item} />
-			</Card.Main>
-		</VibeCardBuyExperience>
-	);
-}
+export const VibeCardContent: FC<VibeCardContentProps> =
+	function VibeCardContent({
+		item,
+		className,
+		listAuthor,
+	}: VibeCardContentProps) {
+		return (
+			<VibeCardBuyExperience item={item} listAuthor={listAuthor}>
+				<Card.Main className={className}>
+					<ItemCardTitle item={item} />
+				</Card.Main>
+			</VibeCardBuyExperience>
+		);
+	};
 
 function VibeCardBuyExperience({
 	item,
diff --git a/packages/client/src/components/Context.tsx b/packages/client/src/components/Context.tsx
index 67444d2a..aa7c686b 100644
--- a/packages/client/src/components/Context.tsx
+++ b/packages/client/src/components/Context.tsx
@@ -1,4 +1,3 @@
-import { ApolloProvider, ApolloClient } from '@apollo/client';
 import { ReactNode, createContext, useContext } from 'react';
 import { AppId } from '@biscuits/apps';
 import { VerdantContext } from '../verdant.js';
@@ -8,7 +7,11 @@ import { PrereleaseWarning } from './PrereleaseWarning.js';
 import { TopLoader } from './TopLoader.js';
 import { BiscuitsVerdantProfile } from '@biscuits/libraries';
 import { Essentials } from './Essentials.js';
-import { graphqlClient as defaultClient } from '@biscuits/graphql';
+import {
+	ApolloClient,
+	ApolloProvider,
+	graphqlClient as defaultClient,
+} from '@biscuits/graphql';
 import { GlobalSyncingIndicator } from './GlobalSyncingIndicator.js';
 
 export function Provider({
diff --git a/packages/client/src/components/TopLoader.tsx b/packages/client/src/components/TopLoader.tsx
index 15ef0056..f98e87e9 100644
--- a/packages/client/src/components/TopLoader.tsx
+++ b/packages/client/src/components/TopLoader.tsx
@@ -4,62 +4,62 @@ import { useCallback, useEffect } from 'react';
 import { clsx } from '@a-type/ui';
 
 export interface TopLoaderProps {
-  className?: string;
+	className?: string;
 }
 
 export function TopLoader({ className }: TopLoaderProps) {
-  const show = useIsRouteTransitioning(500);
+	const show = useIsRouteTransitioning(500);
 
-  const [style, spring] = useSpring(() => ({
-    width: '0%',
-  }));
+	const [style, spring] = useSpring(() => ({
+		width: '0%',
+	}));
 
-  const run = useCallback(() => {
-    let timeout: any | undefined;
-    function step(previous: number) {
-      spring.start({
-        width: `${previous}%`,
-      });
-      const nextStep = Math.min(
-        95 - previous,
-        Math.min((95 - previous) / 2, Math.random() * 20),
-      );
-      timeout = setTimeout(
-        step,
-        500 + Math.random() * 1000,
-        previous + nextStep,
-      );
-    }
-    step(0);
-    return () => {
-      if (timeout) clearTimeout(timeout);
-      spring.start({
-        width: '100%',
-      });
-    };
-  }, [show, spring]);
+	const run = useCallback(() => {
+		let timeout: any | undefined;
+		function step(previous: number) {
+			spring.start({
+				width: `${previous}%`,
+			});
+			const nextStep = Math.min(
+				95 - previous,
+				Math.min((95 - previous) / 2, Math.random() * 20),
+			);
+			timeout = setTimeout(
+				step,
+				500 + Math.random() * 1000,
+				previous + nextStep,
+			);
+		}
+		step(0);
+		return () => {
+			if (timeout) clearTimeout(timeout);
+			spring.start({
+				width: '100%',
+			});
+		};
+	}, [show, spring]);
 
-  useEffect(() => {
-    if (show) {
-      return run();
-    }
-  }, [show, run]);
+	useEffect(() => {
+		if (show) {
+			return run();
+		}
+	}, [show, run]);
 
-  return (
-    <div
-      className={clsx(
-        'fixed top-0 left-0 w-full h-4px pointer-events-none op-0 z-100000',
-        '[&[data-state=visible]]:(opacity-100 transition-opacity)',
-        'md:(h-2px)',
-        'motion-reduce:hidden',
-        className,
-      )}
-      data-state={show ? 'visible' : 'hidden'}
-    >
-      <animated.div
-        className="absolute top-0 left-0 h-full bg-accent"
-        style={style}
-      />
-    </div>
-  );
+	return (
+		<div
+			className={clsx(
+				'fixed top-0 left-0 w-full h-4px pointer-events-none op-0 z-100000',
+				'[&[data-state=visible]]:(opacity-100 transition-opacity)',
+				'md:(h-2px)',
+				'motion-reduce:hidden',
+				className,
+			)}
+			data-state={show ? 'visible' : 'hidden'}
+		>
+			<animated.div
+				className="absolute top-0 left-0 h-full bg-accent"
+				style={style as any}
+			/>
+		</div>
+	);
 }
diff --git a/packages/client/src/components/subscription/ManageSubscription.tsx b/packages/client/src/components/subscription/ManageSubscription.tsx
index bce7f48e..08152a70 100644
--- a/packages/client/src/components/subscription/ManageSubscription.tsx
+++ b/packages/client/src/components/subscription/ManageSubscription.tsx
@@ -1,11 +1,15 @@
-import { FragmentOf, graphql, readFragment } from '@biscuits/graphql';
+import {
+	FragmentOf,
+	graphql,
+	readFragment,
+	useLazyQuery,
+} from '@biscuits/graphql';
 import { Button } from '@a-type/ui/components/button';
 import { useSearchParams } from '@verdant-web/react-router';
 import { useEffect } from 'react';
 import { toast, clsx } from '@a-type/ui';
 import { PlanInfo, planProductInfo } from './PlanInfo.js';
 import { CancelPlanButton } from './CancelPlanButton.js';
-import { useLazyQuery } from '@apollo/client';
 import { Icon } from '@a-type/ui/components/icon';
 import { H2 } from '@a-type/ui/components/typography';
 import * as CONFIG from '../../config.js';
diff --git a/packages/client/src/hooks/graphql.ts b/packages/client/src/hooks/graphql.ts
index a005f08f..556965b2 100644
--- a/packages/client/src/hooks/graphql.ts
+++ b/packages/client/src/hooks/graphql.ts
@@ -1,6 +1,10 @@
-import { ApolloError, NetworkStatus, useQuery } from '@apollo/client';
 import { useMaybeAppId } from '../components/Context.js';
-import { graphql } from '@biscuits/graphql';
+import {
+	ApolloError,
+	graphql,
+	NetworkStatus,
+	useQuery,
+} from '@biscuits/graphql';
 import { useEffect } from 'react';
 
 // some minimal queries for common use
diff --git a/packages/client/src/push.ts b/packages/client/src/push.ts
index a5caad85..85d79bbc 100644
--- a/packages/client/src/push.ts
+++ b/packages/client/src/push.ts
@@ -1,7 +1,6 @@
-import { graphql } from '@biscuits/graphql';
+import { graphql, useClient, ApolloClient } from '@biscuits/graphql';
 import { useAppId } from './react.js';
 import { useCallback, useState, useEffect } from 'react';
-import { useApolloClient, ApolloClient } from '@apollo/client';
 
 const subscribeToPushMutation = graphql(`
 	mutation SubscribeToPush($subscription: CreatePushSubscriptionInput!) {
@@ -67,7 +66,7 @@ export async function subscribeToPush(
 
 export function useSubscribeToPush(vapidKey: string) {
 	const appId = useAppId();
-	const graphqlClient = useApolloClient();
+	const graphqlClient = useClient();
 	return useCallback(
 		() => subscribeToPush(appId, vapidKey, graphqlClient),
 		[appId, graphqlClient, vapidKey],
@@ -101,7 +100,7 @@ export async function unsubscribeFromPush(graphqlClient: ApolloClient<any>) {
 }
 
 export function useUnsubscribeFromPush() {
-	const graphqlClient = useApolloClient();
+	const graphqlClient = useClient();
 	return useCallback(() => unsubscribeFromPush(graphqlClient), [graphqlClient]);
 }
 
diff --git a/server/src/routers/wishWash.ts b/server/src/routers/wishWash.ts
index e92a4ab3..20a9b744 100644
--- a/server/src/routers/wishWash.ts
+++ b/server/src/routers/wishWash.ts
@@ -98,7 +98,7 @@ wishWashRouter.get('/hubList/:listSlug', async (req) => {
 		title: snapshot.name,
 		slug: wishList.slug,
 		hidePurchases: isUsersList,
-		author: wishList.publisherFullName,
+		author: wishList.publisherFullName ?? 'Someone',
 		// mapping manually here to avoid leaking unintended data.
 		items: snapshot.items.map((item) => ({
 			id: item.id,
diff --git a/web/src/components/user/UserInfoEditor.tsx b/web/src/components/user/UserInfoEditor.tsx
index 73142789..5ec2438c 100644
--- a/web/src/components/user/UserInfoEditor.tsx
+++ b/web/src/components/user/UserInfoEditor.tsx
@@ -1,77 +1,77 @@
 import { clsx } from '@a-type/ui';
 import { Button } from '@a-type/ui/components/button';
 import {
-  FormikForm,
-  SubmitButton,
-  TextField,
+	FormikForm,
+	SubmitButton,
+	TextField,
 } from '@a-type/ui/components/forms';
 import { Icon } from '@a-type/ui/components/icon';
 import { H2 } from '@a-type/ui/components/typography';
 import {
-  FragmentOf,
-  graphql,
-  readFragment,
-  useMutation,
-} from '@biscuits/client';
+	FragmentOf,
+	graphql,
+	readFragment,
+	useMutation,
+} from '@biscuits/graphql';
 import { useState } from 'react';
 
 export const userInfoFragment = graphql(`
-  fragment UserInfoEditor_userInfoFragment on User {
-    id
-    name
-  }
+	fragment UserInfoEditor_userInfoFragment on User {
+		id
+		name
+	}
 `);
 
 const updateUserInfo = graphql(
-  `
-    mutation UpdateUserInfo($name: String) {
-      updateUserInfo(input: { name: $name }) {
-        ...UserInfoEditor_userInfoFragment
-      }
-    }
-  `,
-  [userInfoFragment],
+	`
+		mutation UpdateUserInfo($name: String) {
+			updateUserInfo(input: { name: $name }) {
+				...UserInfoEditor_userInfoFragment
+			}
+		}
+	`,
+	[userInfoFragment],
 );
 
 export interface UserInfoEditorProps {
-  user: FragmentOf<typeof userInfoFragment>;
-  className?: string;
+	user: FragmentOf<typeof userInfoFragment>;
+	className?: string;
 }
 
 export function UserInfoEditor({ user, className }: UserInfoEditorProps) {
-  const userData = readFragment(userInfoFragment, user);
-  const [update] = useMutation(updateUserInfo);
-  const [editing, setEditing] = useState(false);
+	const userData = readFragment(userInfoFragment, user);
+	const [update] = useMutation(updateUserInfo);
+	const [editing, setEditing] = useState(false);
 
-  if (!editing) {
-    return (
-      <div className={clsx('col w-full items-start py-3', className)}>
-        <div className="row justify-between w-full">
-          <H2>Your profile</H2>
-          <Button color="ghost" onClick={() => setEditing(true)}>
-            <Icon name="pencil" /> Edit
-          </Button>
-        </div>
+	if (!editing) {
+		return (
+			<div className={clsx('col w-full items-start py-3', className)}>
+				<div className="row justify-between w-full">
+					<H2>Your profile</H2>
+					<Button color="ghost" onClick={() => setEditing(true)}>
+						<Icon name="pencil" /> Edit
+					</Button>
+				</div>
 
-        <div>Name: {userData.name}</div>
-      </div>
-    );
-  }
+				<div>Name: {userData.name}</div>
+			</div>
+		);
+	}
 
-  return (
-    <FormikForm
-      initialValues={{ name: userData.name }}
-      onSubmit={async (values) => {
-        await update({ variables: values });
-        setEditing(false);
-      }}
-      className="py-3"
-    >
-      <TextField name="name" label="Name" />
-      <div className="row justify-end w-full">
-        <Button onClick={() => setEditing(false)}>Cancel</Button>
-        <SubmitButton>Save</SubmitButton>
-      </div>
-    </FormikForm>
-  );
+	return (
+		<FormikForm
+			initialValues={{ name: userData.name }}
+			onSubmit={async (values) => {
+				await update({ variables: values });
+				setEditing(false);
+			}}
+			className="py-3"
+		>
+			<TextField name="name" label="Name" />
+			<div className="row justify-end w-full">
+				<Button onClick={() => setEditing(false)}>Cancel</Button>
+				<SubmitButton>Save</SubmitButton>
+			</div>
+		</FormikForm>
+	);
 }
diff --git a/web/src/graphql.ts b/web/src/graphql.ts
index 7bb754e2..7bc63e55 100644
--- a/web/src/graphql.ts
+++ b/web/src/graphql.ts
@@ -1,15 +1,14 @@
-export { graphql, type FragmentOf, readFragment } from '@biscuits/client';
-import { createGraphQLClient } from '@biscuits/client';
+import { createGraphQLClient } from '@biscuits/graphql';
 import { toast } from '@a-type/ui';
 
 export const client = createGraphQLClient({
-  onError: (err) => {
-    toast.error(err);
-  },
-  onLoggedOut: () => {
-    if (window.location.pathname === '/plan') {
-      // redirect to login
-      window.location.href = '/login';
-    }
-  },
+	onError: (err) => {
+		toast.error(err);
+	},
+	onLoggedOut: () => {
+		if (window.location.pathname === '/plan') {
+			// redirect to login
+			window.location.href = '/login';
+		}
+	},
 });
diff --git a/web/src/pages/admin/AdminPlansPage.tsx b/web/src/pages/admin/AdminPlansPage.tsx
index c1e4d775..1d217bbd 100644
--- a/web/src/pages/admin/AdminPlansPage.tsx
+++ b/web/src/pages/admin/AdminPlansPage.tsx
@@ -1,158 +1,154 @@
 import { Button } from '@a-type/ui/components/button';
 import { Checkbox } from '@a-type/ui/components/checkbox';
 import {
-  Dialog,
-  DialogContent,
-  DialogActions,
-  DialogTitle,
-  DialogClose,
+	Dialog,
+	DialogContent,
+	DialogActions,
+	DialogTitle,
+	DialogClose,
 } from '@a-type/ui/components/dialog';
-import {
-  featureFlags,
-  graphql,
-  useMutation,
-  useSuspenseQuery,
-} from '@biscuits/client';
+import { featureFlags } from '@biscuits/client';
+import { graphql, useMutation, useSuspenseQuery } from '@biscuits/graphql';
 import { useSearchParams } from '@verdant-web/react-router';
 
 export interface AdminPlansPageProps {}
 
 const plans = graphql(`
-  query AdminPlans($after: ID) {
-    plans(first: 50, after: $after) {
-      edges {
-        node {
-          id
-          subscriptionStatus
-          featureFlags
-          members {
-            id
-            email
-            role
-          }
-        }
-      }
-      pageInfo {
-        hasNextPage
-        endCursor
-      }
-    }
-  }
+	query AdminPlans($after: ID) {
+		plans(first: 50, after: $after) {
+			edges {
+				node {
+					id
+					subscriptionStatus
+					featureFlags
+					members {
+						id
+						email
+						role
+					}
+				}
+			}
+			pageInfo {
+				hasNextPage
+				endCursor
+			}
+		}
+	}
 `);
 
 const setFlagMutation = graphql(`
-  mutation SetFlag($planId: ID!, $flagName: String!, $enabled: Boolean!) {
-    setFeatureFlag(planId: $planId, flagName: $flagName, enabled: $enabled) {
-      id
-      featureFlags
-    }
-  }
+	mutation SetFlag($planId: ID!, $flagName: String!, $enabled: Boolean!) {
+		setFeatureFlag(planId: $planId, flagName: $flagName, enabled: $enabled) {
+			id
+			featureFlags
+		}
+	}
 `);
 
 export function AdminPlansPage({}: AdminPlansPageProps) {
-  const [search, setSearch] = useSearchParams();
-  const selectedId = search.get('planId');
+	const [search, setSearch] = useSearchParams();
+	const selectedId = search.get('planId');
 
-  const { data, fetchMore } = useSuspenseQuery(plans, {
-    variables: {
-      after: undefined,
-    },
-    refetchWritePolicy: 'merge',
-  });
+	const { data, fetchMore } = useSuspenseQuery(plans, {
+		variables: {
+			after: undefined,
+		},
+		refetchWritePolicy: 'merge',
+	});
 
-  const loadMore = () => {
-    fetchMore({
-      variables: {
-        after: data.plans.pageInfo.endCursor,
-      },
-    });
-  };
+	const loadMore = () => {
+		fetchMore({
+			variables: {
+				after: data.plans.pageInfo.endCursor,
+			},
+		});
+	};
 
-  const [setFlag] = useMutation(setFlagMutation);
+	const [setFlag] = useMutation(setFlagMutation);
 
-  const selected = data.plans.edges.find(
-    ({ node }) => node.id === selectedId,
-  )?.node;
+	const selected = data.plans.edges.find(
+		({ node }) => node.id === selectedId,
+	)?.node;
 
-  return (
-    <div className="col">
-      <ul>
-        {data.plans.edges.map(({ node }) => (
-          <li key={node.id}>
-            <b>
-              {node.id} | {node.subscriptionStatus}
-            </b>
-            <ul>
-              {node.members.map((member) => (
-                <li key={member.id}>
-                  {member.email} ({member.role})
-                </li>
-              ))}
-            </ul>
-            <Button
-              onClick={() =>
-                setSearch((old) => {
-                  old.set('planId', node.id.toString());
-                  return old;
-                })
-              }
-            >
-              Open
-            </Button>
-          </li>
-        ))}
-      </ul>
-      {data.plans.pageInfo.hasNextPage && (
-        <button onClick={loadMore}>Load More</button>
-      )}
-      <Dialog
-        open={!!selected}
-        onOpenChange={(open) => {
-          if (!open)
-            setSearch((old) => {
-              old.delete('planId');
-              return old;
-            });
-        }}
-      >
-        <DialogContent>
-          <DialogTitle>{selected?.id}</DialogTitle>
-          <ul>
-            {selected?.members.map((member) => (
-              <li key={member.id}>
-                {member.email} ({member.role})
-              </li>
-            ))}
-          </ul>
-          <h3>Feature Flags</h3>
-          <ul>
-            {Object.keys(featureFlags).map((flag) => (
-              <li className="row" key={flag}>
-                <Checkbox
-                  checked={selected?.featureFlags.includes(flag)}
-                  onCheckedChange={async (checked) => {
-                    await setFlag({
-                      variables: {
-                        planId: selectedId!,
-                        flagName: flag,
-                        enabled: !!checked,
-                      },
-                    });
-                  }}
-                />{' '}
-                {flag}
-              </li>
-            ))}
-          </ul>
-          <DialogActions>
-            <DialogClose asChild>
-              <Button>Close</Button>
-            </DialogClose>
-          </DialogActions>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
+	return (
+		<div className="col">
+			<ul>
+				{data.plans.edges.map(({ node }) => (
+					<li key={node.id}>
+						<b>
+							{node.id} | {node.subscriptionStatus}
+						</b>
+						<ul>
+							{node.members.map((member) => (
+								<li key={member.id}>
+									{member.email} ({member.role})
+								</li>
+							))}
+						</ul>
+						<Button
+							onClick={() =>
+								setSearch((old) => {
+									old.set('planId', node.id.toString());
+									return old;
+								})
+							}
+						>
+							Open
+						</Button>
+					</li>
+				))}
+			</ul>
+			{data.plans.pageInfo.hasNextPage && (
+				<button onClick={loadMore}>Load More</button>
+			)}
+			<Dialog
+				open={!!selected}
+				onOpenChange={(open) => {
+					if (!open)
+						setSearch((old) => {
+							old.delete('planId');
+							return old;
+						});
+				}}
+			>
+				<DialogContent>
+					<DialogTitle>{selected?.id}</DialogTitle>
+					<ul>
+						{selected?.members.map((member) => (
+							<li key={member.id}>
+								{member.email} ({member.role})
+							</li>
+						))}
+					</ul>
+					<h3>Feature Flags</h3>
+					<ul>
+						{Object.keys(featureFlags).map((flag) => (
+							<li className="row" key={flag}>
+								<Checkbox
+									checked={selected?.featureFlags.includes(flag)}
+									onCheckedChange={async (checked) => {
+										await setFlag({
+											variables: {
+												planId: selectedId!,
+												flagName: flag,
+												enabled: !!checked,
+											},
+										});
+									}}
+								/>{' '}
+								{flag}
+							</li>
+						))}
+					</ul>
+					<DialogActions>
+						<DialogClose asChild>
+							<Button>Close</Button>
+						</DialogClose>
+					</DialogActions>
+				</DialogContent>
+			</Dialog>
+		</div>
+	);
 }
 
 export default AdminPlansPage;