From 2b7a282311fd035e6d9fcbc83571f63b57143e85 Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Tue, 22 Oct 2024 15:05:42 +0100
Subject: [PATCH 01/14] add lib

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/ui/tooltip/.babelrc           | 12 +++++++++++
 libs/ui/tooltip/README.md          |  7 +++++++
 libs/ui/tooltip/eslint.config.js   | 12 +++++++++++
 libs/ui/tooltip/project.json       |  9 +++++++++
 libs/ui/tooltip/src/index.ts       |  1 +
 libs/ui/tooltip/tsconfig.json      | 20 +++++++++++++++++++
 libs/ui/tooltip/tsconfig.lib.json  | 32 ++++++++++++++++++++++++++++++
 libs/ui/tooltip/tsconfig.spec.json | 26 ++++++++++++++++++++++++
 libs/ui/tooltip/vite.config.ts     | 25 +++++++++++++++++++++++
 tsconfig.base.json                 |  1 +
 10 files changed, 145 insertions(+)
 create mode 100644 libs/ui/tooltip/.babelrc
 create mode 100644 libs/ui/tooltip/README.md
 create mode 100644 libs/ui/tooltip/eslint.config.js
 create mode 100644 libs/ui/tooltip/project.json
 create mode 100644 libs/ui/tooltip/src/index.ts
 create mode 100644 libs/ui/tooltip/tsconfig.json
 create mode 100644 libs/ui/tooltip/tsconfig.lib.json
 create mode 100644 libs/ui/tooltip/tsconfig.spec.json
 create mode 100644 libs/ui/tooltip/vite.config.ts

diff --git a/libs/ui/tooltip/.babelrc b/libs/ui/tooltip/.babelrc
new file mode 100644
index 00000000..1ea870ea
--- /dev/null
+++ b/libs/ui/tooltip/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/ui/tooltip/README.md b/libs/ui/tooltip/README.md
new file mode 100644
index 00000000..bbcb0f96
--- /dev/null
+++ b/libs/ui/tooltip/README.md
@@ -0,0 +1,7 @@
+# tooltip
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test tooltip` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/libs/ui/tooltip/eslint.config.js b/libs/ui/tooltip/eslint.config.js
new file mode 100644
index 00000000..2016babe
--- /dev/null
+++ b/libs/ui/tooltip/eslint.config.js
@@ -0,0 +1,12 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];
diff --git a/libs/ui/tooltip/project.json b/libs/ui/tooltip/project.json
new file mode 100644
index 00000000..367a51bd
--- /dev/null
+++ b/libs/ui/tooltip/project.json
@@ -0,0 +1,9 @@
+{
+  "name": "tooltip",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui/tooltip/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project tooltip --web",
+  "targets": {}
+}
diff --git a/libs/ui/tooltip/src/index.ts b/libs/ui/tooltip/src/index.ts
new file mode 100644
index 00000000..dcd7387c
--- /dev/null
+++ b/libs/ui/tooltip/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/tooltip';
diff --git a/libs/ui/tooltip/tsconfig.json b/libs/ui/tooltip/tsconfig.json
new file mode 100644
index 00000000..4daaf45c
--- /dev/null
+++ b/libs/ui/tooltip/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}
diff --git a/libs/ui/tooltip/tsconfig.lib.json b/libs/ui/tooltip/tsconfig.lib.json
new file mode 100644
index 00000000..61dcc663
--- /dev/null
+++ b/libs/ui/tooltip/tsconfig.lib.json
@@ -0,0 +1,32 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/libs/ui/tooltip/tsconfig.spec.json b/libs/ui/tooltip/tsconfig.spec.json
new file mode 100644
index 00000000..05a0e183
--- /dev/null
+++ b/libs/ui/tooltip/tsconfig.spec.json
@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/libs/ui/tooltip/vite.config.ts b/libs/ui/tooltip/vite.config.ts
new file mode 100644
index 00000000..6b771f21
--- /dev/null
+++ b/libs/ui/tooltip/vite.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/ui/tooltip',
+  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../../coverage/libs/ui/tooltip',
+      provider: 'v8',
+    },
+  },
+});
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 3fa6d4ff..bb4b1148 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -54,6 +54,7 @@
       "@restate/ui/popover": ["libs/ui/popover/src/index.ts"],
       "@restate/ui/radio-group": ["libs/ui/radio-group/src/index.ts"],
       "@restate/ui/section": ["libs/ui/section/src/index.ts"],
+      "@restate/ui/tooltip": ["libs/ui/tooltip/src/index.ts"],
       "@restate/util/errors": ["libs/util/errors/src/index.ts"],
       "@restate/util/feature-flag": ["libs/util/feature-flag/src/index.ts"],
       "@restate/util/mock-api": ["libs/util/mock-api/src/index.ts"],

From ec084178737c17d105b47c1c10904fb426b41dcb Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Wed, 23 Oct 2024 10:22:31 +0100
Subject: [PATCH 02/14] add tooltip

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/ui/tooltip/src/index.ts               |  4 +-
 libs/ui/tooltip/src/lib/Tooltip.tsx        |  8 ++++
 libs/ui/tooltip/src/lib/TooltipContent.tsx | 50 ++++++++++++++++++++++
 libs/ui/tooltip/src/lib/TooltipTrigger.tsx |  8 ++++
 4 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 libs/ui/tooltip/src/lib/Tooltip.tsx
 create mode 100644 libs/ui/tooltip/src/lib/TooltipContent.tsx
 create mode 100644 libs/ui/tooltip/src/lib/TooltipTrigger.tsx

diff --git a/libs/ui/tooltip/src/index.ts b/libs/ui/tooltip/src/index.ts
index dcd7387c..84ec0ab3 100644
--- a/libs/ui/tooltip/src/index.ts
+++ b/libs/ui/tooltip/src/index.ts
@@ -1 +1,3 @@
-export * from './lib/tooltip';
+export * from './lib/TooltipContent';
+export * from './lib/Tooltip';
+export * from './lib/TooltipTrigger';
diff --git a/libs/ui/tooltip/src/lib/Tooltip.tsx b/libs/ui/tooltip/src/lib/Tooltip.tsx
new file mode 100644
index 00000000..c06cf54a
--- /dev/null
+++ b/libs/ui/tooltip/src/lib/Tooltip.tsx
@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { TooltipTrigger } from 'react-aria-components';
+
+type TooltipProps = unknown;
+
+export function Tooltip({ children }: PropsWithChildren<TooltipProps>) {
+  return <TooltipTrigger>{children}</TooltipTrigger>;
+}
diff --git a/libs/ui/tooltip/src/lib/TooltipContent.tsx b/libs/ui/tooltip/src/lib/TooltipContent.tsx
new file mode 100644
index 00000000..34d24cc4
--- /dev/null
+++ b/libs/ui/tooltip/src/lib/TooltipContent.tsx
@@ -0,0 +1,50 @@
+import { PropsWithChildren } from 'react';
+import {
+  Tooltip as AriaTooltip,
+  OverlayArrow,
+  composeRenderProps,
+} from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+
+interface TooltipContentProps {
+  className?: string;
+}
+
+const styles = tv({
+  base: 'group bg-zinc-700 backdrop-blur-xl1 border border-zinc-800 shadow-[inset_0_1px_0_0_theme(colors.gray.600)] text-white text-sm rounded-lg drop-shadow-lg will-change-transform px-3 py-1',
+  variants: {
+    isEntering: {
+      true: 'animate-in fade-in placement-bottom:slide-in-from-top-0.5 placement-top:slide-in-from-bottom-0.5 placement-left:slide-in-from-right-0.5 placement-right:slide-in-from-left-0.5 ease-out duration-200',
+    },
+    isExiting: {
+      true: 'animate-out fade-out placement-bottom:slide-out-to-top-0.5 placement-top:slide-out-to-bottom-0.5 placement-left:slide-out-to-right-0.5 placement-right:slide-out-to-left-0.5 ease-in duration-150',
+    },
+  },
+});
+
+export function TooltipContent({
+  children,
+  ...props
+}: PropsWithChildren<TooltipContentProps>) {
+  return (
+    <AriaTooltip
+      {...props}
+      offset={10}
+      className={composeRenderProps(props.className, (className, renderProps) =>
+        styles({ ...renderProps, className })
+      )}
+    >
+      <OverlayArrow>
+        <svg
+          width={8}
+          height={8}
+          viewBox="0 0 8 8"
+          className="fill-zinc-700 stroke-zinc-800 group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90"
+        >
+          <path d="M0 0 L4 4 L8 0" />
+        </svg>
+      </OverlayArrow>
+      {children}
+    </AriaTooltip>
+  );
+}
diff --git a/libs/ui/tooltip/src/lib/TooltipTrigger.tsx b/libs/ui/tooltip/src/lib/TooltipTrigger.tsx
new file mode 100644
index 00000000..469e92a8
--- /dev/null
+++ b/libs/ui/tooltip/src/lib/TooltipTrigger.tsx
@@ -0,0 +1,8 @@
+import { type PropsWithChildren } from 'react';
+
+type TooltipTriggerProps = unknown;
+export function TooltipTrigger({
+  children,
+}: PropsWithChildren<TooltipTriggerProps>) {
+  return children;
+}

From f6a974453290a538f1373f6189e3235d55547ec2 Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Wed, 23 Oct 2024 10:24:00 +0100
Subject: [PATCH 03/14] add hover card

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/ui/hover-card/.babelrc           | 12 ++++++++++
 libs/ui/hover-card/README.md          |  7 ++++++
 libs/ui/hover-card/eslint.config.js   | 12 ++++++++++
 libs/ui/hover-card/project.json       |  9 ++++++++
 libs/ui/hover-card/src/index.ts       |  1 +
 libs/ui/hover-card/tsconfig.json      | 20 +++++++++++++++++
 libs/ui/hover-card/tsconfig.lib.json  | 32 +++++++++++++++++++++++++++
 libs/ui/hover-card/tsconfig.spec.json | 26 ++++++++++++++++++++++
 libs/ui/hover-card/vite.config.ts     | 25 +++++++++++++++++++++
 tsconfig.base.json                    |  1 +
 10 files changed, 145 insertions(+)
 create mode 100644 libs/ui/hover-card/.babelrc
 create mode 100644 libs/ui/hover-card/README.md
 create mode 100644 libs/ui/hover-card/eslint.config.js
 create mode 100644 libs/ui/hover-card/project.json
 create mode 100644 libs/ui/hover-card/src/index.ts
 create mode 100644 libs/ui/hover-card/tsconfig.json
 create mode 100644 libs/ui/hover-card/tsconfig.lib.json
 create mode 100644 libs/ui/hover-card/tsconfig.spec.json
 create mode 100644 libs/ui/hover-card/vite.config.ts

diff --git a/libs/ui/hover-card/.babelrc b/libs/ui/hover-card/.babelrc
new file mode 100644
index 00000000..1ea870ea
--- /dev/null
+++ b/libs/ui/hover-card/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/ui/hover-card/README.md b/libs/ui/hover-card/README.md
new file mode 100644
index 00000000..26d522f8
--- /dev/null
+++ b/libs/ui/hover-card/README.md
@@ -0,0 +1,7 @@
+# hover-card
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test hover-card` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/libs/ui/hover-card/eslint.config.js b/libs/ui/hover-card/eslint.config.js
new file mode 100644
index 00000000..2016babe
--- /dev/null
+++ b/libs/ui/hover-card/eslint.config.js
@@ -0,0 +1,12 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];
diff --git a/libs/ui/hover-card/project.json b/libs/ui/hover-card/project.json
new file mode 100644
index 00000000..9821c561
--- /dev/null
+++ b/libs/ui/hover-card/project.json
@@ -0,0 +1,9 @@
+{
+  "name": "hover-card",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui/hover-card/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project hover-card --web",
+  "targets": {}
+}
diff --git a/libs/ui/hover-card/src/index.ts b/libs/ui/hover-card/src/index.ts
new file mode 100644
index 00000000..18da2f14
--- /dev/null
+++ b/libs/ui/hover-card/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/hover-card';
diff --git a/libs/ui/hover-card/tsconfig.json b/libs/ui/hover-card/tsconfig.json
new file mode 100644
index 00000000..4daaf45c
--- /dev/null
+++ b/libs/ui/hover-card/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}
diff --git a/libs/ui/hover-card/tsconfig.lib.json b/libs/ui/hover-card/tsconfig.lib.json
new file mode 100644
index 00000000..61dcc663
--- /dev/null
+++ b/libs/ui/hover-card/tsconfig.lib.json
@@ -0,0 +1,32 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/libs/ui/hover-card/tsconfig.spec.json b/libs/ui/hover-card/tsconfig.spec.json
new file mode 100644
index 00000000..05a0e183
--- /dev/null
+++ b/libs/ui/hover-card/tsconfig.spec.json
@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/libs/ui/hover-card/vite.config.ts b/libs/ui/hover-card/vite.config.ts
new file mode 100644
index 00000000..035f2fd9
--- /dev/null
+++ b/libs/ui/hover-card/vite.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/ui/hover-card',
+  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../../coverage/libs/ui/hover-card',
+      provider: 'v8',
+    },
+  },
+});
diff --git a/tsconfig.base.json b/tsconfig.base.json
index bb4b1148..8cc0a23f 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -46,6 +46,7 @@
       "@restate/ui/error": ["libs/ui/error/src/index.ts"],
       "@restate/ui/focus": ["libs/ui/focus/src/index.ts"],
       "@restate/ui/form-field": ["libs/ui/form-field/src/index.ts"],
+      "@restate/ui/hover-card": ["libs/ui/hover-card/src/index.ts"],
       "@restate/ui/icons": ["libs/ui/icons/src/index.ts"],
       "@restate/ui/layout": ["libs/ui/layout/src/index.ts"],
       "@restate/ui/link": ["libs/ui/link/src/index.ts"],

From ecf959a49d4d877ee3a6e7380097450f3a423dc8 Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Wed, 23 Oct 2024 15:36:02 +0100
Subject: [PATCH 04/14] remove hover card

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/ui/hover-card/.babelrc           | 12 ----------
 libs/ui/hover-card/README.md          |  7 ------
 libs/ui/hover-card/eslint.config.js   | 12 ----------
 libs/ui/hover-card/project.json       |  9 --------
 libs/ui/hover-card/src/index.ts       |  1 -
 libs/ui/hover-card/tsconfig.json      | 20 -----------------
 libs/ui/hover-card/tsconfig.lib.json  | 32 ---------------------------
 libs/ui/hover-card/tsconfig.spec.json | 26 ----------------------
 libs/ui/hover-card/vite.config.ts     | 25 ---------------------
 tsconfig.base.json                    |  1 -
 10 files changed, 145 deletions(-)
 delete mode 100644 libs/ui/hover-card/.babelrc
 delete mode 100644 libs/ui/hover-card/README.md
 delete mode 100644 libs/ui/hover-card/eslint.config.js
 delete mode 100644 libs/ui/hover-card/project.json
 delete mode 100644 libs/ui/hover-card/src/index.ts
 delete mode 100644 libs/ui/hover-card/tsconfig.json
 delete mode 100644 libs/ui/hover-card/tsconfig.lib.json
 delete mode 100644 libs/ui/hover-card/tsconfig.spec.json
 delete mode 100644 libs/ui/hover-card/vite.config.ts

diff --git a/libs/ui/hover-card/.babelrc b/libs/ui/hover-card/.babelrc
deleted file mode 100644
index 1ea870ea..00000000
--- a/libs/ui/hover-card/.babelrc
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": []
-}
diff --git a/libs/ui/hover-card/README.md b/libs/ui/hover-card/README.md
deleted file mode 100644
index 26d522f8..00000000
--- a/libs/ui/hover-card/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# hover-card
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test hover-card` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/libs/ui/hover-card/eslint.config.js b/libs/ui/hover-card/eslint.config.js
deleted file mode 100644
index 2016babe..00000000
--- a/libs/ui/hover-card/eslint.config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const nx = require('@nx/eslint-plugin');
-const baseConfig = require('../../../eslint.config.js');
-
-module.exports = [
-  ...baseConfig,
-  ...nx.configs['flat/react'],
-  {
-    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
-    // Override or add rules here
-    rules: {},
-  },
-];
diff --git a/libs/ui/hover-card/project.json b/libs/ui/hover-card/project.json
deleted file mode 100644
index 9821c561..00000000
--- a/libs/ui/hover-card/project.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "name": "hover-card",
-  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/ui/hover-card/src",
-  "projectType": "library",
-  "tags": [],
-  "// targets": "to see all targets run: nx show project hover-card --web",
-  "targets": {}
-}
diff --git a/libs/ui/hover-card/src/index.ts b/libs/ui/hover-card/src/index.ts
deleted file mode 100644
index 18da2f14..00000000
--- a/libs/ui/hover-card/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './lib/hover-card';
diff --git a/libs/ui/hover-card/tsconfig.json b/libs/ui/hover-card/tsconfig.json
deleted file mode 100644
index 4daaf45c..00000000
--- a/libs/ui/hover-card/tsconfig.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "extends": "../../../tsconfig.base.json"
-}
diff --git a/libs/ui/hover-card/tsconfig.lib.json b/libs/ui/hover-card/tsconfig.lib.json
deleted file mode 100644
index 61dcc663..00000000
--- a/libs/ui/hover-card/tsconfig.lib.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../dist/out-tsc",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
-  },
-  "exclude": [
-    "**/*.spec.ts",
-    "**/*.test.ts",
-    "**/*.spec.tsx",
-    "**/*.test.tsx",
-    "**/*.spec.js",
-    "**/*.test.js",
-    "**/*.spec.jsx",
-    "**/*.test.jsx",
-    "vite.config.ts",
-    "vitest.config.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx"
-  ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
-}
diff --git a/libs/ui/hover-card/tsconfig.spec.json b/libs/ui/hover-card/tsconfig.spec.json
deleted file mode 100644
index 05a0e183..00000000
--- a/libs/ui/hover-card/tsconfig.spec.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../dist/out-tsc",
-    "types": [
-      "vitest/globals",
-      "vitest/importMeta",
-      "vite/client",
-      "node",
-      "vitest"
-    ]
-  },
-  "include": [
-    "vite.config.ts",
-    "vitest.config.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ]
-}
diff --git a/libs/ui/hover-card/vite.config.ts b/libs/ui/hover-card/vite.config.ts
deleted file mode 100644
index 035f2fd9..00000000
--- a/libs/ui/hover-card/vite.config.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
-import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
-
-export default defineConfig({
-  root: __dirname,
-  cacheDir: '../../../node_modules/.vite/libs/ui/hover-card',
-  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
-  test: {
-    watch: false,
-    globals: true,
-    environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    reporters: ['default'],
-    coverage: {
-      reportsDirectory: '../../../coverage/libs/ui/hover-card',
-      provider: 'v8',
-    },
-  },
-});
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 8cc0a23f..bb4b1148 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -46,7 +46,6 @@
       "@restate/ui/error": ["libs/ui/error/src/index.ts"],
       "@restate/ui/focus": ["libs/ui/focus/src/index.ts"],
       "@restate/ui/form-field": ["libs/ui/form-field/src/index.ts"],
-      "@restate/ui/hover-card": ["libs/ui/hover-card/src/index.ts"],
       "@restate/ui/icons": ["libs/ui/icons/src/index.ts"],
       "@restate/ui/layout": ["libs/ui/layout/src/index.ts"],
       "@restate/ui/link": ["libs/ui/link/src/index.ts"],

From 8fcaadb308a4ec4ffe9d6c0ef9b588206969b3a6 Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Wed, 23 Oct 2024 15:58:12 +0100
Subject: [PATCH 05/14] update tooltip

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/ui/tooltip/src/lib/Tooltip.tsx        |  2 +-
 libs/ui/tooltip/src/lib/TooltipContent.tsx | 13 +------------
 libs/ui/tooltip/src/lib/TooltipTrigger.tsx | 18 +++++++++++++++---
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/libs/ui/tooltip/src/lib/Tooltip.tsx b/libs/ui/tooltip/src/lib/Tooltip.tsx
index c06cf54a..607716a6 100644
--- a/libs/ui/tooltip/src/lib/Tooltip.tsx
+++ b/libs/ui/tooltip/src/lib/Tooltip.tsx
@@ -4,5 +4,5 @@ import { TooltipTrigger } from 'react-aria-components';
 type TooltipProps = unknown;
 
 export function Tooltip({ children }: PropsWithChildren<TooltipProps>) {
-  return <TooltipTrigger>{children}</TooltipTrigger>;
+  return <TooltipTrigger delay={0}>{children}</TooltipTrigger>;
 }
diff --git a/libs/ui/tooltip/src/lib/TooltipContent.tsx b/libs/ui/tooltip/src/lib/TooltipContent.tsx
index 34d24cc4..8daf9757 100644
--- a/libs/ui/tooltip/src/lib/TooltipContent.tsx
+++ b/libs/ui/tooltip/src/lib/TooltipContent.tsx
@@ -1,7 +1,6 @@
 import { PropsWithChildren } from 'react';
 import {
   Tooltip as AriaTooltip,
-  OverlayArrow,
   composeRenderProps,
 } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
@@ -11,7 +10,7 @@ interface TooltipContentProps {
 }
 
 const styles = tv({
-  base: 'group bg-zinc-700 backdrop-blur-xl1 border border-zinc-800 shadow-[inset_0_1px_0_0_theme(colors.gray.600)] text-white text-sm rounded-lg drop-shadow-lg will-change-transform px-3 py-1',
+  base: 'group bg-zinc-800/80 backdrop-blur-lg border border-zinc-800 shadow-[inset_0_1px_0_0_theme(colors.gray.600)] text-white text-sm rounded-lg drop-shadow-lg will-change-transform px-3 py-1',
   variants: {
     isEntering: {
       true: 'animate-in fade-in placement-bottom:slide-in-from-top-0.5 placement-top:slide-in-from-bottom-0.5 placement-left:slide-in-from-right-0.5 placement-right:slide-in-from-left-0.5 ease-out duration-200',
@@ -34,16 +33,6 @@ export function TooltipContent({
         styles({ ...renderProps, className })
       )}
     >
-      <OverlayArrow>
-        <svg
-          width={8}
-          height={8}
-          viewBox="0 0 8 8"
-          className="fill-zinc-700 stroke-zinc-800 group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90"
-        >
-          <path d="M0 0 L4 4 L8 0" />
-        </svg>
-      </OverlayArrow>
       {children}
     </AriaTooltip>
   );
diff --git a/libs/ui/tooltip/src/lib/TooltipTrigger.tsx b/libs/ui/tooltip/src/lib/TooltipTrigger.tsx
index 469e92a8..864fd7ac 100644
--- a/libs/ui/tooltip/src/lib/TooltipTrigger.tsx
+++ b/libs/ui/tooltip/src/lib/TooltipTrigger.tsx
@@ -1,8 +1,20 @@
-import { type PropsWithChildren } from 'react';
+import { ComponentProps, useContext, type PropsWithChildren } from 'react';
+import { Pressable, PressResponder } from '@react-aria/interactions';
+import { TooltipTriggerStateContext } from 'react-aria-components';
 
-type TooltipTriggerProps = unknown;
+type TooltipTriggerProps = Pick<ComponentProps<typeof Pressable>, 'children'>;
 export function TooltipTrigger({
   children,
 }: PropsWithChildren<TooltipTriggerProps>) {
-  return children;
+  const state = useContext(TooltipTriggerStateContext);
+
+  return (
+    <PressResponder
+      onPress={() => {
+        state.open();
+      }}
+    >
+      {children}
+    </PressResponder>
+  );
 }

From b93dc5f93d10c89f09a34cef7c2fcc59cdb9a2ff Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Thu, 24 Oct 2024 10:54:12 +0100
Subject: [PATCH 06/14] add icon

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/features/overview-route/src/lib/RestateServer.tsx | 3 +--
 libs/ui/icons/src/lib/Icons.tsx                        | 3 +++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/libs/features/overview-route/src/lib/RestateServer.tsx b/libs/features/overview-route/src/lib/RestateServer.tsx
index 557cd732..253c9a99 100644
--- a/libs/features/overview-route/src/lib/RestateServer.tsx
+++ b/libs/features/overview-route/src/lib/RestateServer.tsx
@@ -12,7 +12,7 @@ export function RestateServer({
           viewBox="0 0 120 120"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
-          className="w-full h-full group-hover: drop-shadow-xl shadow-zinc-800/5 backdrop-blur-xl backdrop-saturate-200"
+          className="w-full h-full drop-shadow-xl shadow-zinc-800/5 backdrop-blur-xl backdrop-saturate-200"
         >
           <path
             fillRule="evenodd"
@@ -20,7 +20,6 @@ export function RestateServer({
             d="M60 0C10.59 0 0 10.59 0 60C0 109.41 10.59 120 60 120C109.41 120 120 109.41 120 60C120 10.59 109.41 0 60 0ZM43.6831 47.9347C43.238 48.6013 43 49.3889 43 50.195V73.0429C43 73.8188 43.86 74.2711 44.4811 73.8219L46.7463 72.1839C47.3731 71.7306 47.7455 70.9963 47.7455 70.2134V53.2027C47.7455 52.7307 48.2679 52.4546 48.6468 52.7265L58.6944 59.9365C59.0214 60.1711 59.0169 60.6664 58.6857 60.895L55.473 63.1117C54.3788 63.8667 54.1068 65.3898 54.8699 66.489C55.6175 67.5658 57.0775 67.8278 58.1415 67.076L63.0318 63.6206C64.0796 62.8803 64.7046 61.6639 64.7046 60.3651C64.7046 59.0915 64.1035 57.8956 63.0892 57.1509L48.6051 46.5165C47.0324 45.5379 44.9824 45.9886 43.946 47.5408L43.6831 47.9347ZM58.7713 47.0291C58.019 48.1128 58.2649 49.6116 59.3223 50.3872L72.1304 59.7826C72.4408 60.0103 72.4485 60.4781 72.1458 60.7163L61.4445 69.1358C60.4247 69.9382 60.2184 71.422 60.9793 72.4811C61.7666 73.5769 63.2846 73.799 64.3429 72.9733L76.3875 63.5753C77.404 62.7822 78 61.5524 78 60.2483C78 58.8988 77.362 57.6318 76.2859 56.8444L62.0949 46.4613C61.0244 45.6781 59.5324 45.9329 58.7713 47.0291Z"
             fill="white"
             fillOpacity="0.9"
-            id="test"
           />
         </svg>
       </Button>
diff --git a/libs/ui/icons/src/lib/Icons.tsx b/libs/ui/icons/src/lib/Icons.tsx
index 1e19ab85..d245de63 100644
--- a/libs/ui/icons/src/lib/Icons.tsx
+++ b/libs/ui/icons/src/lib/Icons.tsx
@@ -25,6 +25,7 @@ import {
   X,
   Box,
   SquareFunction,
+  Info,
 } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { tv } from 'tailwind-variants';
@@ -74,6 +75,7 @@ export const enum IconName {
   Lambda = 'Lambda',
   Box = 'Box',
   Function = 'SquareFunction',
+  Info = 'Info',
 }
 export interface IconsProps {
   name: IconName;
@@ -117,6 +119,7 @@ const ICONS: Record<IconName, LucideIcon> = {
   [IconName.Lambda]: Lambda,
   [IconName.Box]: Box,
   [IconName.Function]: SquareFunction,
+  [IconName.Info]: Info,
 };
 
 const styles = tv({

From 154e2ab5671106ba57e51c487ebde5511602ca7c Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Thu, 24 Oct 2024 10:54:31 +0100
Subject: [PATCH 07/14] add inline tooltip

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/ui/tooltip/src/index.ts               |  3 +-
 libs/ui/tooltip/src/lib/InlineTooltip.tsx  | 66 ++++++++++++++++++++++
 libs/ui/tooltip/src/lib/TooltipContent.tsx | 11 +++-
 3 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 libs/ui/tooltip/src/lib/InlineTooltip.tsx

diff --git a/libs/ui/tooltip/src/index.ts b/libs/ui/tooltip/src/index.ts
index 84ec0ab3..0594331a 100644
--- a/libs/ui/tooltip/src/index.ts
+++ b/libs/ui/tooltip/src/index.ts
@@ -1,3 +1,4 @@
-export * from './lib/TooltipContent';
+export { TooltipContent } from './lib/TooltipContent';
 export * from './lib/Tooltip';
 export * from './lib/TooltipTrigger';
+export * from './lib/InlineTooltip';
diff --git a/libs/ui/tooltip/src/lib/InlineTooltip.tsx b/libs/ui/tooltip/src/lib/InlineTooltip.tsx
new file mode 100644
index 00000000..68eb1ac9
--- /dev/null
+++ b/libs/ui/tooltip/src/lib/InlineTooltip.tsx
@@ -0,0 +1,66 @@
+import { forwardRef, PropsWithChildren, ReactNode, useRef } from 'react';
+import { InternalTooltipContent } from './TooltipContent';
+import { Link } from '@restate/ui/link';
+import { Icon, IconName } from '@restate/ui/icons';
+import { Button } from '@restate/ui/button';
+import { TooltipTrigger as AriaTooltip } from 'react-aria-components';
+import { useFocusable, useObjectRef } from 'react-aria';
+
+interface InlineTooltipProps {
+  title: ReactNode;
+  description: ReactNode;
+  learnMoreHref?: string;
+}
+
+export function InlineTooltip({
+  children,
+  title,
+  description,
+  learnMoreHref,
+}: PropsWithChildren<InlineTooltipProps>) {
+  const triggerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <AriaTooltip delay={250}>
+      <TooltipTrigger ref={triggerRef}>{children}</TooltipTrigger>
+      <InternalTooltipContent triggerRef={triggerRef}>
+        <div className="flex flex-col gap-2 items-start">
+          <h6>{title}</h6>
+          {description}
+          {learnMoreHref && (
+            <Link variant="button" rel="noopener noreferrer" target="_blank">
+              Learn more
+            </Link>
+          )}
+        </div>
+      </InternalTooltipContent>
+    </AriaTooltip>
+  );
+}
+
+const TooltipTrigger = forwardRef<HTMLElement, PropsWithChildren<unknown>>(
+  ({ children }, ref) => {
+    const refObject = useObjectRef(ref);
+    const { focusableProps } = useFocusable({}, refObject);
+
+    return (
+      <span
+        ref={refObject}
+        {...focusableProps}
+        className="group underline-offset-4 decoration-from-font decoration-dashed underline inline-flex items-center"
+      >
+        <span className="group-hover:bg-black/5 rounded-sm mx-[-0.1em] px-[0.1em] ">
+          {children}{' '}
+        </span>
+        <sup className="-mr-[0.2em]">
+          <Button
+            variant="icon"
+            className="p-0.5 inline [&_svg]:w-[0.85em] [&_svg]:h-[0.85em] [&_svg]:stroke-[0.18em] text-current"
+          >
+            <Icon name={IconName.Info} />
+          </Button>
+        </sup>
+      </span>
+    );
+  }
+);
diff --git a/libs/ui/tooltip/src/lib/TooltipContent.tsx b/libs/ui/tooltip/src/lib/TooltipContent.tsx
index 8daf9757..8e30ef55 100644
--- a/libs/ui/tooltip/src/lib/TooltipContent.tsx
+++ b/libs/ui/tooltip/src/lib/TooltipContent.tsx
@@ -1,7 +1,8 @@
-import { PropsWithChildren } from 'react';
+import { ComponentProps, PropsWithChildren } from 'react';
 import {
   Tooltip as AriaTooltip,
   composeRenderProps,
+  Tooltip,
 } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
@@ -21,10 +22,10 @@ const styles = tv({
   },
 });
 
-export function TooltipContent({
+export function InternalTooltipContent({
   children,
   ...props
-}: PropsWithChildren<TooltipContentProps>) {
+}: PropsWithChildren<ComponentProps<typeof Tooltip>>) {
   return (
     <AriaTooltip
       {...props}
@@ -37,3 +38,7 @@ export function TooltipContent({
     </AriaTooltip>
   );
 }
+
+export function TooltipContent(props: PropsWithChildren<TooltipContentProps>) {
+  return <InternalTooltipContent {...props} />;
+}

From 6f4f0599b58ea7304ced3c8f602affc8f1067770 Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Thu, 24 Oct 2024 10:56:46 +0100
Subject: [PATCH 08/14] add lib

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/features/explainers/.babelrc           | 12 ++++++++
 libs/features/explainers/README.md          |  7 +++++
 libs/features/explainers/eslint.config.js   | 12 ++++++++
 libs/features/explainers/project.json       |  9 ++++++
 libs/features/explainers/src/index.ts       |  1 +
 libs/features/explainers/tsconfig.json      | 20 +++++++++++++
 libs/features/explainers/tsconfig.lib.json  | 32 +++++++++++++++++++++
 libs/features/explainers/tsconfig.spec.json | 26 +++++++++++++++++
 libs/features/explainers/vite.config.ts     | 25 ++++++++++++++++
 tsconfig.base.json                          |  1 +
 10 files changed, 145 insertions(+)
 create mode 100644 libs/features/explainers/.babelrc
 create mode 100644 libs/features/explainers/README.md
 create mode 100644 libs/features/explainers/eslint.config.js
 create mode 100644 libs/features/explainers/project.json
 create mode 100644 libs/features/explainers/src/index.ts
 create mode 100644 libs/features/explainers/tsconfig.json
 create mode 100644 libs/features/explainers/tsconfig.lib.json
 create mode 100644 libs/features/explainers/tsconfig.spec.json
 create mode 100644 libs/features/explainers/vite.config.ts

diff --git a/libs/features/explainers/.babelrc b/libs/features/explainers/.babelrc
new file mode 100644
index 00000000..1ea870ea
--- /dev/null
+++ b/libs/features/explainers/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/features/explainers/README.md b/libs/features/explainers/README.md
new file mode 100644
index 00000000..45a02a61
--- /dev/null
+++ b/libs/features/explainers/README.md
@@ -0,0 +1,7 @@
+# explainers
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test explainers` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/libs/features/explainers/eslint.config.js b/libs/features/explainers/eslint.config.js
new file mode 100644
index 00000000..2016babe
--- /dev/null
+++ b/libs/features/explainers/eslint.config.js
@@ -0,0 +1,12 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];
diff --git a/libs/features/explainers/project.json b/libs/features/explainers/project.json
new file mode 100644
index 00000000..4775eb13
--- /dev/null
+++ b/libs/features/explainers/project.json
@@ -0,0 +1,9 @@
+{
+  "name": "explainers",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/features/explainers/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project explainers --web",
+  "targets": {}
+}
diff --git a/libs/features/explainers/src/index.ts b/libs/features/explainers/src/index.ts
new file mode 100644
index 00000000..d31b002e
--- /dev/null
+++ b/libs/features/explainers/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/explainers';
diff --git a/libs/features/explainers/tsconfig.json b/libs/features/explainers/tsconfig.json
new file mode 100644
index 00000000..4daaf45c
--- /dev/null
+++ b/libs/features/explainers/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}
diff --git a/libs/features/explainers/tsconfig.lib.json b/libs/features/explainers/tsconfig.lib.json
new file mode 100644
index 00000000..61dcc663
--- /dev/null
+++ b/libs/features/explainers/tsconfig.lib.json
@@ -0,0 +1,32 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/libs/features/explainers/tsconfig.spec.json b/libs/features/explainers/tsconfig.spec.json
new file mode 100644
index 00000000..05a0e183
--- /dev/null
+++ b/libs/features/explainers/tsconfig.spec.json
@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/libs/features/explainers/vite.config.ts b/libs/features/explainers/vite.config.ts
new file mode 100644
index 00000000..77abe058
--- /dev/null
+++ b/libs/features/explainers/vite.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/features/explainers',
+  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../../coverage/libs/features/explainers',
+      provider: 'v8',
+    },
+  },
+});
diff --git a/tsconfig.base.json b/tsconfig.base.json
index bb4b1148..9a2817ca 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -27,6 +27,7 @@
       "@restate/data-access/admin-api/spec": [
         "libs/data-access/admin-api/src/api.ts"
       ],
+      "@restate/features/explainers": ["libs/features/explainers/src/index.ts"],
       "@restate/features/health": ["libs/features/health/src/index.ts"],
       "@restate/features/invocations-route": [
         "libs/features/invocations-route/src/index.ts"

From 96bffbeb77c64498c3822bc46b582c282e66aa95 Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Thu, 24 Oct 2024 11:24:21 +0100
Subject: [PATCH 09/14] add service deployment tooltip

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/features/explainers/src/index.ts         |  2 +-
 .../explainers/src/lib/ServiceDeployment.tsx  | 22 +++++++++++++++++++
 libs/ui/tooltip/src/lib/InlineTooltip.tsx     | 11 ++++++++--
 libs/ui/tooltip/src/lib/TooltipContent.tsx    |  2 +-
 4 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 libs/features/explainers/src/lib/ServiceDeployment.tsx

diff --git a/libs/features/explainers/src/index.ts b/libs/features/explainers/src/index.ts
index d31b002e..55c84b3b 100644
--- a/libs/features/explainers/src/index.ts
+++ b/libs/features/explainers/src/index.ts
@@ -1 +1 @@
-export * from './lib/explainers';
+export * from './lib/ServiceDeployment';
diff --git a/libs/features/explainers/src/lib/ServiceDeployment.tsx b/libs/features/explainers/src/lib/ServiceDeployment.tsx
new file mode 100644
index 00000000..4da0439b
--- /dev/null
+++ b/libs/features/explainers/src/lib/ServiceDeployment.tsx
@@ -0,0 +1,22 @@
+import { InlineTooltip } from '@restate/ui/tooltip';
+import { PropsWithChildren } from 'react';
+
+export function ServiceDeploymentExplainer({
+  children,
+}: PropsWithChildren<unknown>) {
+  return (
+    <InlineTooltip
+      title="Service Deployment"
+      description={
+        <p>
+          Restate services are deployed as Service deployments. A service
+          deployment can be a Lambda function, a Kubernetes pod, a Knative
+          Service, or any other process reachable at a specific URL.
+        </p>
+      }
+      learnMoreHref="https://docs.restate.dev/deploy/overview#restate-services"
+    >
+      {children}
+    </InlineTooltip>
+  );
+}
diff --git a/libs/ui/tooltip/src/lib/InlineTooltip.tsx b/libs/ui/tooltip/src/lib/InlineTooltip.tsx
index 68eb1ac9..a41a17d3 100644
--- a/libs/ui/tooltip/src/lib/InlineTooltip.tsx
+++ b/libs/ui/tooltip/src/lib/InlineTooltip.tsx
@@ -25,11 +25,18 @@ export function InlineTooltip({
       <TooltipTrigger ref={triggerRef}>{children}</TooltipTrigger>
       <InternalTooltipContent triggerRef={triggerRef}>
         <div className="flex flex-col gap-2 items-start">
-          <h6>{title}</h6>
+          <h6 className="text-base font-semibold">{title}</h6>
           {description}
           {learnMoreHref && (
-            <Link variant="button" rel="noopener noreferrer" target="_blank">
+            <Link
+              className="mt-2 bg-gray-100 hover:bg-gray-200 pressed:bg-gray-300 text-gray-800 px-2 py-1 text-sm rounded-lg inline-flex items-center gap-2"
+              rel="noopener noreferrer"
+              target="_blank"
+              variant="button"
+              href={learnMoreHref}
+            >
               Learn more
+              <Icon name={IconName.ExternalLink} className="w-[1em] h-[1em]" />
             </Link>
           )}
         </div>
diff --git a/libs/ui/tooltip/src/lib/TooltipContent.tsx b/libs/ui/tooltip/src/lib/TooltipContent.tsx
index 8e30ef55..9a2537dd 100644
--- a/libs/ui/tooltip/src/lib/TooltipContent.tsx
+++ b/libs/ui/tooltip/src/lib/TooltipContent.tsx
@@ -11,7 +11,7 @@ interface TooltipContentProps {
 }
 
 const styles = tv({
-  base: 'group bg-zinc-800/80 backdrop-blur-lg border border-zinc-800 shadow-[inset_0_1px_0_0_theme(colors.gray.600)] text-white text-sm rounded-lg drop-shadow-lg will-change-transform px-3 py-1',
+  base: 'max-w-sm p-4 group bg-zinc-800/80 backdrop-blur-xl border border-zinc-800 shadow-[inset_0_1px_0_0_theme(colors.gray.600)] text-gray-200 text-sm rounded-xl drop-shadow-xl will-change-transform',
   variants: {
     isEntering: {
       true: 'animate-in fade-in placement-bottom:slide-in-from-top-0.5 placement-top:slide-in-from-bottom-0.5 placement-left:slide-in-from-right-0.5 placement-right:slide-in-from-left-0.5 ease-out duration-200',

From 0c6356aa81a30e7fa01d25e25b9d3d6fcb2b6e24 Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Thu, 24 Oct 2024 11:39:16 +0100
Subject: [PATCH 10/14] add service explainer

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/features/explainers/src/index.ts         |  1 +
 libs/features/explainers/src/lib/Service.tsx  | 21 +++++++++++++++++++
 .../overview-route/src/lib/overview.route.tsx | 21 +++++++++++++++----
 3 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 libs/features/explainers/src/lib/Service.tsx

diff --git a/libs/features/explainers/src/index.ts b/libs/features/explainers/src/index.ts
index 55c84b3b..513a74ef 100644
--- a/libs/features/explainers/src/index.ts
+++ b/libs/features/explainers/src/index.ts
@@ -1 +1,2 @@
 export * from './lib/ServiceDeployment';
+export * from './lib/Service';
diff --git a/libs/features/explainers/src/lib/Service.tsx b/libs/features/explainers/src/lib/Service.tsx
new file mode 100644
index 00000000..b26e6375
--- /dev/null
+++ b/libs/features/explainers/src/lib/Service.tsx
@@ -0,0 +1,21 @@
+import { InlineTooltip } from '@restate/ui/tooltip';
+import { PropsWithChildren } from 'react';
+
+export function ServiceExplainer({ children }: PropsWithChildren<unknown>) {
+  return (
+    <InlineTooltip
+      title="Service"
+      description={
+        <p>
+          Contain the handlers which process incoming requests. Services run
+          like regular RPC services (e.g. a NodeJS app in a Docker container).
+          Services can be written in any language for which there is an SDK
+          available.
+        </p>
+      }
+      learnMoreHref="https://docs.restate.dev/concepts/services#services-1"
+    >
+      {children}
+    </InlineTooltip>
+  );
+}
diff --git a/libs/features/overview-route/src/lib/overview.route.tsx b/libs/features/overview-route/src/lib/overview.route.tsx
index da35fe99..05de400b 100644
--- a/libs/features/overview-route/src/lib/overview.route.tsx
+++ b/libs/features/overview-route/src/lib/overview.route.tsx
@@ -5,6 +5,10 @@ import { tv } from 'tailwind-variants';
 import { TriggerRegisterDeploymentDialog } from './RegisterDeployment/Dialog';
 import { ServiceDetails } from './Details.tsx/Service';
 import { DeploymentDetails } from './Details.tsx/Deployment';
+import {
+  ServiceDeploymentExplainer,
+  ServiceExplainer,
+} from '@restate/features/explainers';
 
 const deploymentsStyles = tv({
   base: 'w-full md:row-start-1 md:col-start-1 grid gap-8 gap-x-20 gap2-x-[calc(8rem+150px)]',
@@ -49,8 +53,12 @@ function OneDeploymentPlaceholder() {
   return (
     <div className="flex p-4 flex-col gap-2 items-center relative w-full text-center rounded-xl border bg-gray-200/50 shadow-[inset_0_1px_0px_0px_rgba(0,0,0,0.03)]">
       <p className="text-sm text-gray-500 max-w-md">
-        Point Restate to your deployed services so Restate can discover and
-        register your services and handlers
+        Point Restate to your{' '}
+        <ServiceDeploymentExplainer>
+          service deployments
+        </ServiceDeploymentExplainer>{' '}
+        so Restate can discover and register your{' '}
+        <ServiceExplainer>services</ServiceExplainer> and handlers
       </p>
       <div className="mt-4">
         <TriggerRegisterDeploymentDialog />
@@ -62,10 +70,15 @@ function OneDeploymentPlaceholder() {
 function NoDeploymentPlaceholder() {
   return (
     <div className="flex flex-col gap-2 items-center relative w-full text-center mt-6">
-      <h3 className="text-sm font-semibold text-gray-600">No deployments</h3>
+      <h3 className="text-sm font-semibold text-gray-600">
+        No{' '}
+        <ServiceDeploymentExplainer>
+          service deployment
+        </ServiceDeploymentExplainer>
+      </h3>
       <p className="text-sm text-gray-500 px-4 max-w-md">
         Point Restate to your deployed services so Restate can discover and
-        register your services and handlers
+        register your <ServiceExplainer>services</ServiceExplainer> and handlers
       </p>
       <div className="mt-4">
         <TriggerRegisterDeploymentDialog />

From 1349ae0fb10e185458cd313d2b8e9a7d8b6cad7f Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Thu, 24 Oct 2024 11:43:24 +0100
Subject: [PATCH 11/14] update styling

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/ui/tooltip/src/lib/TooltipContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/ui/tooltip/src/lib/TooltipContent.tsx b/libs/ui/tooltip/src/lib/TooltipContent.tsx
index 9a2537dd..63a1dc14 100644
--- a/libs/ui/tooltip/src/lib/TooltipContent.tsx
+++ b/libs/ui/tooltip/src/lib/TooltipContent.tsx
@@ -11,7 +11,7 @@ interface TooltipContentProps {
 }
 
 const styles = tv({
-  base: 'max-w-sm p-4 group bg-zinc-800/80 backdrop-blur-xl border border-zinc-800 shadow-[inset_0_1px_0_0_theme(colors.gray.600)] text-gray-200 text-sm rounded-xl drop-shadow-xl will-change-transform',
+  base: 'max-w-sm p-4 group bg-zinc-800/80 backdrop-blur-xl border border-zinc-700 shadow-[inset_0_1px_0_0_theme(colors.gray.500)] text-gray-200 text-sm rounded-xl drop-shadow-xl will-change-transform',
   variants: {
     isEntering: {
       true: 'animate-in fade-in placement-bottom:slide-in-from-top-0.5 placement-top:slide-in-from-bottom-0.5 placement-left:slide-in-from-right-0.5 placement-right:slide-in-from-left-0.5 ease-out duration-200',

From bed92be737d0796233d4c45f57e1277f1351d4a2 Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Thu, 24 Oct 2024 11:45:58 +0100
Subject: [PATCH 12/14] fix misspelling

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/features/overview-route/src/lib/overview.route.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/features/overview-route/src/lib/overview.route.tsx b/libs/features/overview-route/src/lib/overview.route.tsx
index 05de400b..accc7d62 100644
--- a/libs/features/overview-route/src/lib/overview.route.tsx
+++ b/libs/features/overview-route/src/lib/overview.route.tsx
@@ -73,7 +73,7 @@ function NoDeploymentPlaceholder() {
       <h3 className="text-sm font-semibold text-gray-600">
         No{' '}
         <ServiceDeploymentExplainer>
-          service deployment
+          service deployments
         </ServiceDeploymentExplainer>
       </h3>
       <p className="text-sm text-gray-500 px-4 max-w-md">

From 2281425b71f565340a476a43e7add33f06d10d59 Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Thu, 24 Oct 2024 11:57:31 +0100
Subject: [PATCH 13/14] fix test

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 apps/web-ui-e2e/src/example.spec.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/web-ui-e2e/src/example.spec.ts b/apps/web-ui-e2e/src/example.spec.ts
index bf820c2a..92f5f288 100644
--- a/apps/web-ui-e2e/src/example.spec.ts
+++ b/apps/web-ui-e2e/src/example.spec.ts
@@ -5,5 +5,7 @@ test('has title', async ({ page }) => {
   await page.goto('/');
   await listDeployment;
   // Expect h3 to contain a substring.
-  expect(await page.locator('h3').innerText()).toContain('No deployment');
+  expect((await page.locator('h3').innerText()).replace(/\n/g, '')).toContain(
+    'No service deployments'
+  );
 });

From b2ae17f30a5d0f69677f969bbd0e38cb1b16ade5 Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Thu, 24 Oct 2024 12:03:57 +0100
Subject: [PATCH 14/14] update styling

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 libs/ui/tooltip/src/lib/InlineTooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/ui/tooltip/src/lib/InlineTooltip.tsx b/libs/ui/tooltip/src/lib/InlineTooltip.tsx
index a41a17d3..b3d5b44f 100644
--- a/libs/ui/tooltip/src/lib/InlineTooltip.tsx
+++ b/libs/ui/tooltip/src/lib/InlineTooltip.tsx
@@ -29,7 +29,7 @@ export function InlineTooltip({
           {description}
           {learnMoreHref && (
             <Link
-              className="mt-2 bg-gray-100 hover:bg-gray-200 pressed:bg-gray-300 text-gray-800 px-2 py-1 text-sm rounded-lg inline-flex items-center gap-2"
+              className="mt-2 bg-zinc-500/80 hover:bg-zinc-500 pressed:bg-zinc-400 text-gray-100 px-2 py-1 text-sm rounded-lg inline-flex items-center gap-2"
               rel="noopener noreferrer"
               target="_blank"
               variant="button"