add spaces selector with search (#600)update-memory-graph

relevant files to review:
\- memory-graph.tsx
\- spaces-dropdown.tsx
\- spaces-dropdown.css.ts

6 files changed, 57 insertions, 51 deletions

diff --git a/packages/memory-graph/src/styles/animations.css.ts b/packages/memory-graph/src/styles/animations.css.ts
index d9430ec4..53444052 100644
--- a/packages/memory-graph/src/styles/animations.css.ts
+++ b/packages/memory-graph/src/styles/animations.css.ts
@@ -1,4 +1,4 @@
-import { keyframes } from "@vanilla-extract/css";
+import { keyframes } from "@vanilla-extract/css"
 
 /**
  * Animation keyframes
@@ -8,12 +8,12 @@ import { keyframes } from "@vanilla-extract/css";
 export const fadeIn = keyframes({
 	from: { opacity: 0 },
 	to: { opacity: 1 },
-});
+})
 
 export const fadeOut = keyframes({
 	from: { opacity: 1 },
 	to: { opacity: 0 },
-});
+})
 
 export const slideInFromRight = keyframes({
 	from: {
@@ -24,7 +24,7 @@ export const slideInFromRight = keyframes({
 		transform: "translateX(0)",
 		opacity: 1,
 	},
-});
+})
 
 export const slideInFromLeft = keyframes({
 	from: {
@@ -35,7 +35,7 @@ export const slideInFromLeft = keyframes({
 		transform: "translateX(0)",
 		opacity: 1,
 	},
-});
+})
 
 export const slideInFromTop = keyframes({
 	from: {
@@ -46,7 +46,7 @@ export const slideInFromTop = keyframes({
 		transform: "translateY(0)",
 		opacity: 1,
 	},
-});
+})
 
 export const slideInFromBottom = keyframes({
 	from: {
@@ -57,12 +57,12 @@ export const slideInFromBottom = keyframes({
 		transform: "translateY(0)",
 		opacity: 1,
 	},
-});
+})
 
 export const spin = keyframes({
 	from: { transform: "rotate(0deg)" },
 	to: { transform: "rotate(360deg)" },
-});
+})
 
 export const pulse = keyframes({
 	"0%, 100%": {
@@ -71,7 +71,7 @@ export const pulse = keyframes({
 	"50%": {
 		opacity: 0.5,
 	},
-});
+})
 
 export const bounce = keyframes({
 	"0%, 100%": {
@@ -82,7 +82,7 @@ export const bounce = keyframes({
 		transform: "translateY(0)",
 		animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
 	},
-});
+})
 
 export const scaleIn = keyframes({
 	from: {
@@ -93,7 +93,7 @@ export const scaleIn = keyframes({
 		transform: "scale(1)",
 		opacity: 1,
 	},
-});
+})
 
 export const scaleOut = keyframes({
 	from: {
@@ -104,7 +104,7 @@ export const scaleOut = keyframes({
 		transform: "scale(0.95)",
 		opacity: 0,
 	},
-});
+})
 
 export const shimmer = keyframes({
 	"0%": {
@@ -113,4 +113,4 @@ export const shimmer = keyframes({
 	"100%": {
 		backgroundPosition: "1000px 0",
 	},
-});
+})
diff --git a/packages/memory-graph/src/styles/effects.css.ts b/packages/memory-graph/src/styles/effects.css.ts
index 2a290d32..306f912c 100644
--- a/packages/memory-graph/src/styles/effects.css.ts
+++ b/packages/memory-graph/src/styles/effects.css.ts
@@ -1,5 +1,5 @@
-import { style, styleVariants } from "@vanilla-extract/css";
-import { themeContract } from "./theme.css";
+import { style, styleVariants } from "@vanilla-extract/css"
+import { themeContract } from "./theme.css"
 
 /**
  * Base glass-morphism effect
@@ -10,7 +10,7 @@ const glassBase = style({
 	WebkitBackdropFilter: "blur(12px)",
 	border: `1px solid ${themeContract.colors.document.border}`,
 	borderRadius: themeContract.radii.lg,
-});
+})
 
 /**
  * Glass effect variants
@@ -47,7 +47,7 @@ export const glass = styleVariants({
 			WebkitBackdropFilter: "blur(20px)",
 		},
 	],
-});
+})
 
 /**
  * Glass panel styles for larger containers
@@ -67,7 +67,7 @@ export const glassPanel = styleVariants({
 		border: `2px solid ${themeContract.colors.document.border}`,
 		borderRadius: themeContract.radii.xl,
 	},
-});
+})
 
 /**
  * Focus ring styles for accessibility
@@ -80,7 +80,7 @@ export const focusRing = style({
 			outlineOffset: "2px",
 		},
 	},
-});
+})
 
 /**
  * Transition presets
@@ -104,7 +104,7 @@ export const transition = styleVariants({
 	transform: {
 		transition: `transform ${themeContract.transitions.normal}`,
 	},
-});
+})
 
 /**
  * Hover glow effect
@@ -117,4 +117,4 @@ export const hoverGlow = style({
 			boxShadow: `0 0 20px ${themeContract.colors.document.glow}`,
 		},
 	},
-});
+})
diff --git a/packages/memory-graph/src/styles/global.css.ts b/packages/memory-graph/src/styles/global.css.ts
index cbe37913..ec08d959 100644
--- a/packages/memory-graph/src/styles/global.css.ts
+++ b/packages/memory-graph/src/styles/global.css.ts
@@ -1,4 +1,4 @@
-import { globalStyle } from "@vanilla-extract/css";
+import { globalStyle } from "@vanilla-extract/css"
 
 /**
  * Global CSS reset and base styles
@@ -7,39 +7,39 @@ import { globalStyle } from "@vanilla-extract/css";
 // Box sizing reset
 globalStyle("*, *::before, *::after", {
 	boxSizing: "border-box",
-});
+})
 
 // Remove default margins
 globalStyle("body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd", {
 	margin: 0,
-});
+})
 
 // Remove list styles
 globalStyle("ul[role='list'], ol[role='list']", {
 	listStyle: "none",
-});
+})
 
 // Core body defaults
 globalStyle("html, body", {
 	height: "100%",
-});
+})
 
 globalStyle("body", {
 	lineHeight: 1.5,
 	WebkitFontSmoothing: "antialiased",
 	MozOsxFontSmoothing: "grayscale",
-});
+})
 
 // Typography defaults
 globalStyle("h1, h2, h3, h4, h5, h6", {
 	fontWeight: 500,
 	lineHeight: 1.25,
-});
+})
 
 // Inherit fonts for inputs and buttons
 globalStyle("input, button, textarea, select", {
 	font: "inherit",
-});
+})
 
 // Remove default button styles
 globalStyle("button", {
@@ -47,25 +47,25 @@ globalStyle("button", {
 	border: "none",
 	padding: 0,
 	cursor: "pointer",
-});
+})
 
 // Improve media defaults
 globalStyle("img, picture, video, canvas, svg", {
 	display: "block",
 	maxWidth: "100%",
-});
+})
 
 // Remove built-in form typography styles
 globalStyle("input, button, textarea, select", {
 	font: "inherit",
-});
+})
 
 // Avoid text overflows
 globalStyle("p, h1, h2, h3, h4, h5, h6", {
 	overflowWrap: "break-word",
-});
+})
 
 // Improve text rendering
 globalStyle("#root, #__next", {
 	isolation: "isolate",
-});
+})
diff --git a/packages/memory-graph/src/styles/index.ts b/packages/memory-graph/src/styles/index.ts
index f619c689..15dbd1e9 100644
--- a/packages/memory-graph/src/styles/index.ts
+++ b/packages/memory-graph/src/styles/index.ts
@@ -4,17 +4,23 @@
  */
 
 // Import global styles (side effect)
-import "./global.css";
+import "./global.css"
 
 // Theme
-export { themeContract, defaultTheme } from "./theme.css";
+export { themeContract, defaultTheme } from "./theme.css"
 
 // Sprinkles utilities
-export { sprinkles } from "./sprinkles.css";
-export type { Sprinkles } from "./sprinkles.css";
+export { sprinkles } from "./sprinkles.css"
+export type { Sprinkles } from "./sprinkles.css"
 
 // Animations
-export * as animations from "./animations.css";
+export * as animations from "./animations.css"
 
 // Glass-morphism effects
-export { glass, glassPanel, focusRing, transition, hoverGlow } from "./effects.css";
+export {
+	glass,
+	glassPanel,
+	focusRing,
+	transition,
+	hoverGlow,
+} from "./effects.css"
diff --git a/packages/memory-graph/src/styles/sprinkles.css.ts b/packages/memory-graph/src/styles/sprinkles.css.ts
index ecd7a024..6cb06261 100644
--- a/packages/memory-graph/src/styles/sprinkles.css.ts
+++ b/packages/memory-graph/src/styles/sprinkles.css.ts
@@ -1,5 +1,5 @@
-import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
-import { themeContract } from "./theme.css";
+import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles"
+import { themeContract } from "./theme.css"
 
 /**
  * Responsive conditions for mobile-first design
@@ -122,7 +122,7 @@ const responsiveProperties = defineProperties({
 		// User select
 		userSelect: ["auto", "none", "text", "all"],
 	},
-});
+})
 
 /**
  * Color properties (non-responsive)
@@ -152,7 +152,7 @@ const colorProperties = defineProperties({
 			memoryBorder: themeContract.colors.memory.border,
 		},
 	},
-});
+})
 
 /**
  * Border properties
@@ -167,7 +167,7 @@ const borderProperties = defineProperties({
 		},
 		borderStyle: ["none", "solid", "dashed", "dotted"],
 	},
-});
+})
 
 /**
  * Opacity properties
@@ -188,7 +188,7 @@ const opacityProperties = defineProperties({
 			100: "1",
 		},
 	},
-});
+})
 
 /**
  * Combined sprinkles system
@@ -199,6 +199,6 @@ export const sprinkles = createSprinkles(
 	colorProperties,
 	borderProperties,
 	opacityProperties,
-);
+)
 
-export type Sprinkles = Parameters<typeof sprinkles>[0];
+export type Sprinkles = Parameters<typeof sprinkles>[0]
diff --git a/packages/memory-graph/src/styles/theme.css.ts b/packages/memory-graph/src/styles/theme.css.ts
index bf08e3eb..0f3f5fea 100644
--- a/packages/memory-graph/src/styles/theme.css.ts
+++ b/packages/memory-graph/src/styles/theme.css.ts
@@ -1,4 +1,4 @@
-import { createTheme, createThemeContract } from "@vanilla-extract/css";
+import { createTheme, createThemeContract } from "@vanilla-extract/css"
 
 /**
  * Theme contract defines the structure of the design system.
@@ -124,7 +124,7 @@ export const themeContract = createThemeContract({
 		modal: null,
 		tooltip: null,
 	},
-});
+})
 
 /**
  * Default theme implementation based on the original constants.ts colors
@@ -242,4 +242,4 @@ export const defaultTheme = createTheme(themeContract, {
 		modal: "30",
 		tooltip: "40",
 	},
-});
+})