package the graph (#563)shoubhit/eng-358-packaging-graph-component

includes:

- a package that contains a MemoryGraph component which handles fetching data and rendering the graph
- a playground to test the package

problems:

- the bundle size is huge
- the styles are kinda broken? we are using [https://www.npmjs.com/package/vite-plugin-libgi-inject-css](https://www.npmjs.com/package/vite-plugin-lib-inject-css) to inject the styles

![image.png](https://app.graphite.com/user-attachments/assets/cb1822c5-850a-45a2-9bfa-72b73436659f.png)

1 files changed, 120 insertions, 0 deletions

diff --git a/packages/memory-graph/src/styles/effects.css.ts b/packages/memory-graph/src/styles/effects.css.ts
new file mode 100644
index 00000000..2a290d32
--- /dev/null
+++ b/packages/memory-graph/src/styles/effects.css.ts
@@ -0,0 +1,120 @@
+import { style, styleVariants } from "@vanilla-extract/css";
+import { themeContract } from "./theme.css";
+
+/**
+ * Base glass-morphism effect
+ * Provides the signature frosted glass look
+ */
+const glassBase = style({
+	backdropFilter: "blur(12px)",
+	WebkitBackdropFilter: "blur(12px)",
+	border: `1px solid ${themeContract.colors.document.border}`,
+	borderRadius: themeContract.radii.lg,
+});
+
+/**
+ * Glass effect variants
+ */
+export const glass = styleVariants({
+	/**
+	 * Light glass effect - subtle background
+	 */
+	light: [
+		glassBase,
+		{
+			background: "rgba(255, 255, 255, 0.05)",
+		},
+	],
+
+	/**
+	 * Medium glass effect - more visible
+	 */
+	medium: [
+		glassBase,
+		{
+			background: "rgba(255, 255, 255, 0.08)",
+		},
+	],
+
+	/**
+	 * Dark glass effect - prominent
+	 */
+	dark: [
+		glassBase,
+		{
+			background: "rgba(15, 20, 25, 0.8)",
+			backdropFilter: "blur(20px)",
+			WebkitBackdropFilter: "blur(20px)",
+		},
+	],
+});
+
+/**
+ * Glass panel styles for larger containers
+ */
+export const glassPanel = styleVariants({
+	default: {
+		background: "rgba(15, 20, 25, 0.8)",
+		backdropFilter: "blur(20px)",
+		WebkitBackdropFilter: "blur(20px)",
+		border: `1px solid ${themeContract.colors.document.border}`,
+		borderRadius: themeContract.radii.xl,
+	},
+	bordered: {
+		background: "rgba(15, 20, 25, 0.8)",
+		backdropFilter: "blur(20px)",
+		WebkitBackdropFilter: "blur(20px)",
+		border: `2px solid ${themeContract.colors.document.border}`,
+		borderRadius: themeContract.radii.xl,
+	},
+});
+
+/**
+ * Focus ring styles for accessibility
+ */
+export const focusRing = style({
+	outline: "none",
+	selectors: {
+		"&:focus-visible": {
+			outline: `2px solid ${themeContract.colors.accent.primary}`,
+			outlineOffset: "2px",
+		},
+	},
+});
+
+/**
+ * Transition presets
+ */
+export const transition = styleVariants({
+	fast: {
+		transition: themeContract.transitions.fast,
+	},
+	normal: {
+		transition: themeContract.transitions.normal,
+	},
+	slow: {
+		transition: themeContract.transitions.slow,
+	},
+	all: {
+		transition: `all ${themeContract.transitions.normal}`,
+	},
+	colors: {
+		transition: `background-color ${themeContract.transitions.normal}, color ${themeContract.transitions.normal}, border-color ${themeContract.transitions.normal}`,
+	},
+	transform: {
+		transition: `transform ${themeContract.transitions.normal}`,
+	},
+});
+
+/**
+ * Hover glow effect
+ */
+export const hoverGlow = style({
+	position: "relative",
+	transition: themeContract.transitions.normal,
+	selectors: {
+		"&:hover": {
+			boxShadow: `0 0 20px ${themeContract.colors.document.glow}`,
+		},
+	},
+});