diff --git a/.changeset/green-taxis-chew.md b/.changeset/green-taxis-chew.md
new file mode 100644
index 0000000..0d9d87a
--- /dev/null
+++ b/.changeset/green-taxis-chew.md
@@ -0,0 +1,9 @@
+---
+"schema-stream": patch
+"llm-polyglot": patch
+"zod-stream": patch
+"evalz": patch
+"stream-hooks": patch
+---
+
+updating docs
diff --git a/.syncpackrc b/.syncpackrc
new file mode 100644
index 0000000..69dd379
--- /dev/null
+++ b/.syncpackrc
@@ -0,0 +1,11 @@
+{
+  "specifierTypes": ["!workspace-protocol"],
+    "versionGroups": [
+    {
+      "label": "Use workspace protocol when developing local packages",
+      "dependencies": ["$LOCAL"],
+      "dependencyTypes": ["dev", "peer", "optional", "prod"],
+      "pinVersion": "workspace:*"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/.zed/settings.json b/.zed/settings.json
deleted file mode 100644
index e69de29..0000000
diff --git a/README.md b/README.md
index 544942b..7e3a61f 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@
 
 ## Overview
 
-Island AI is a collection of low-level utilities and high-level tools for handling structured data streams from Large Language Models (LLMs). The packages range from basic JSON streaming parsers to complete LLM clients, giving you the flexibility to build custom solutions or use pre-built integrations.
+Island AI is a collection of low-level utilities and high-level tools for handling structured data streams from LLMs. The packages range from basic JSON streaming parsers to complete LLM clients, giving you the flexibility to build custom solutions or use pre-built integrations.
 
 ## Core Packages
 
diff --git a/apps/next-demo/.eslintrc.js b/apps/next-demo/.eslintrc.js
deleted file mode 100644
index 8c26244..0000000
--- a/apps/next-demo/.eslintrc.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/** @type {import("eslint").Linter.Config} */
-module.exports = {
-  root: true,
-  extends: ["@repo/eslint-config/next.js"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true
-  },
-  overrides: [
-    {
-      extends: ["plugin:@typescript-eslint/disable-type-checked"],
-      files: ["./**/*.mjs", "*.js"]
-    }
-  ],
-  settings: {
-    tailwindcss: {
-      callees: ["cn"],
-      config: "tailwind.config.js"
-    }
-  }
-}
diff --git a/apps/next-demo/CHANGELOG.md b/apps/next-demo/CHANGELOG.md
deleted file mode 100644
index 98accb3..0000000
--- a/apps/next-demo/CHANGELOG.md
+++ /dev/null
@@ -1,132 +0,0 @@
-# island-next-demos
-
-## 1.0.18
-
-### Patch Changes
-
-- Updated dependencies [[`e192f1a`](https://github.com/hack-dance/island-ai/commit/e192f1a440b60f88f9f6982013ce6785a1e3eb9d)]:
-  - zod-stream@2.0.1
-  - stream-hooks@2.0.0
-
-## 1.0.17
-
-### Patch Changes
-
-- Updated dependencies [[`d2a1ee5`](https://github.com/hack-dance/island-ai/commit/d2a1ee5f04e5f95f0755c3ad39766573b29962ca)]:
-  - stream-hooks@2.0.0
-  - zod-stream@2.0.0
-
-## 1.0.16
-
-### Patch Changes
-
-- Updated dependencies [[`dcd090c`](https://github.com/hack-dance/island-ai/commit/dcd090cc13022488cfcbd99007933b238bd93f74)]:
-  - stream-hooks@1.0.4
-
-## 1.0.15
-
-### Patch Changes
-
-- Updated dependencies [[`0708276`](https://github.com/hack-dance/island-ai/commit/0708276f32ee6de6ccb81de90a54d6d0e3463ec2)]:
-  - zod-stream@1.0.3
-
-## 1.0.14
-
-### Patch Changes
-
-- Updated dependencies [[`6a018c6`](https://github.com/hack-dance/island-ai/commit/6a018c6d9623120296a3abe954cb43f6209ac937)]:
-  - zod-stream@1.0.2
-
-## 1.0.13
-
-### Patch Changes
-
-- Updated dependencies [[`8d0ec77`](https://github.com/hack-dance/island-ai/commit/8d0ec77948510ff7aedf6327fdaa168a89873e76)]:
-  - zod-stream@1.0.1
-
-## 1.0.12
-
-### Patch Changes
-
-- Updated dependencies [[`1f6b63175bf5baa787b0e38e8decb1c811a49bec`](https://github.com/hack-dance/island-ai/commit/1f6b63175bf5baa787b0e38e8decb1c811a49bec)]:
-  - zod-stream@1.0.0
-  - stream-hooks@1.0.0
-
-## 1.0.11
-
-### Patch Changes
-
-- Updated dependencies []:
-  - zod-stream@0.0.8
-  - stream-hooks@0.0.4
-
-## 1.0.10
-
-### Patch Changes
-
-- Updated dependencies [[`a79bd11a9caaf4f9d99eebe0e528b04fd4ca811e`](https://github.com/hack-dance/island-ai/commit/a79bd11a9caaf4f9d99eebe0e528b04fd4ca811e)]:
-  - stream-hooks@0.0.3
-
-## 1.0.9
-
-### Patch Changes
-
-- Updated dependencies [[`17f8583a9284731be3dcc4c2b59b6733f49c8383`](https://github.com/hack-dance/island-ai/commit/17f8583a9284731be3dcc4c2b59b6733f49c8383)]:
-  - zod-stream@0.0.7
-
-## 1.0.8
-
-### Patch Changes
-
-- Updated dependencies [[`5e8a2cc7bfe39452928a434675bd23539890814a`](https://github.com/hack-dance/island-ai/commit/5e8a2cc7bfe39452928a434675bd23539890814a)]:
-  - zod-stream@0.0.6
-
-## 1.0.7
-
-### Patch Changes
-
-- Updated dependencies [[`bf334a0f23ace44e866a37b3111ac0f312f32929`](https://github.com/hack-dance/island-ai/commit/bf334a0f23ace44e866a37b3111ac0f312f32929), [`6ab5c4076c35b8b7935886eda6225b2cd7b374e2`](https://github.com/hack-dance/island-ai/commit/6ab5c4076c35b8b7935886eda6225b2cd7b374e2)]:
-  - zod-stream@0.0.5
-
-## 1.0.6
-
-### Patch Changes
-
-- Updated dependencies [[`274d6af9530e9437035dda14f92948703b20dd93`](https://github.com/hack-dance/island-ai/commit/274d6af9530e9437035dda14f92948703b20dd93)]:
-  - zod-stream@0.0.4
-
-## 1.0.5
-
-### Patch Changes
-
-- Updated dependencies [[`068d069798b07af96d03d9c2f063806ee04ee980`](https://github.com/hack-dance/island-ai/commit/068d069798b07af96d03d9c2f063806ee04ee980)]:
-  - zod-stream@0.0.4
-
-## 1.0.4
-
-### Patch Changes
-
-- Updated dependencies [[`e922466f35bd72bdfce8c0710a8868cca66f1571`](https://github.com/hack-dance/island-ai/commit/e922466f35bd72bdfce8c0710a8868cca66f1571)]:
-  - zod-stream@0.0.3
-
-## 1.0.3
-
-### Patch Changes
-
-- Updated dependencies [[`fb5fd7354cbf5c8cdda46ff5bac5e1a2a72b6f59`](https://github.com/hack-dance/island-ai/commit/fb5fd7354cbf5c8cdda46ff5bac5e1a2a72b6f59)]:
-  - zod-stream@0.0.2
-
-## 1.0.2
-
-### Patch Changes
-
-- Updated dependencies [[`2e9c39de36385887f0a8fd3c7c69302f7981cbf0`](https://github.com/hack-dance/island-ai/commit/2e9c39de36385887f0a8fd3c7c69302f7981cbf0)]:
-  - stream-hooks@0.0.2
-
-## 1.0.1
-
-### Patch Changes
-
-- Updated dependencies [[`c3cbe97f01f3532038dc041ccb9a43e2cdb73e97`](https://github.com/hack-dance/island-ai/commit/c3cbe97f01f3532038dc041ccb9a43e2cdb73e97)]:
-  - stream-hooks@0.0.1
-  - zod-stream@0.0.1
diff --git a/apps/next-demo/README.md b/apps/next-demo/README.md
deleted file mode 100644
index fc72a5c..0000000
--- a/apps/next-demo/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# demo
diff --git a/apps/next-demo/moonlight-ii.json b/apps/next-demo/moonlight-ii.json
deleted file mode 100644
index 20bc983..0000000
--- a/apps/next-demo/moonlight-ii.json
+++ /dev/null
@@ -1,960 +0,0 @@
-{
-  "name": "Moonlight II",
-  "type": "dark",
-  "colors": {
-    "foreground": "#c8d3f5",
-    "focusBorder": "#82aaff",
-    "contrastBorder": "#15151b",
-    "editorCursor.foreground": "#82aaff",
-    "editorRuler.foreground": "#444a73bb",
-    "scrollbar.shadow": "#00000022",
-    "tree.indentGuidesStroke": "#828bb866",
-    "editorLink.activeForeground": "#c8d3f5",
-    "selection.background": "#c8d3f5",
-    "progressBar.background": "#82aaff",
-    "textLink.foreground": "#65bcff",
-    "textLink.activeForeground": "#b2dfff",
-    "editorLineNumber.foreground": "#444a73",
-    "editorLineNumber.activeForeground": "#828bb8",
-    "editorBracketMatch.border": "#82aaffbb",
-    "editorBracketMatch.background": "#1F2028",
-    "editorWhitespace.foreground": "#c8d3f540",
-    "editor.background": "#1F2028",
-    "editor.foreground": "#c8d3f5",
-    "editor.lineHighlightBackground": "#2f334d",
-    "editor.selectionBackground": "#828bb850",
-    "editor.selectionHighlightBackground": "#444a73",
-    "editor.findMatchBackground": "#444a73",
-    "editor.findMatchBorder": "#86e1fc",
-    "editor.findMatchHighlightBackground": "#444a73",
-    "editorOverviewRuler.findMatchForeground": "#86e1fcbb",
-    "editorOverviewRuler.errorForeground": "#ff757fcc",
-    "editorOverviewRuler.infoForeground": "#65bcff66",
-    "editorOverviewRuler.warningForeground": "#ffc777cc",
-    "editorOverviewRuler.modifiedForeground": "#82aaff66",
-    "editorOverviewRuler.addedForeground": "#c3e88d66",
-    "editorOverviewRuler.deletedForeground": "#ff98a466",
-    "editorOverviewRuler.bracketMatchForeground": "#3e68d7bb",
-    "editorOverviewRuler.border": "#1F2028",
-    "editorHoverWidget.background": "#15151b",
-    "editorHoverWidget.border": "#000000aa",
-    "editorIndentGuide.background": "#444a73bb",
-    "editorIndentGuide.activeBackground": "#828bb8aa",
-    "editorGroupHeader.tabsBackground": "#1c1d24",
-    "editorGroup.border": "#15151b",
-    "editorGutter.modifiedBackground": "#82aaff66",
-    "editorGutter.addedBackground": "#c3e88d66",
-    "editorGutter.deletedBackground": "#ff5370aa",
-    "tab.activeBorder": "#82aaff",
-    "tab.activeModifiedBorder": "#828bb8",
-    "tab.unfocusedActiveBorder": "#828bb8",
-    "tab.activeForeground": "#c8d3f5",
-    "tab.activeBackground": "#1F2028",
-    "tab.inactiveForeground": "#828bb8",
-    "tab.inactiveBackground": "#1c1d24",
-    "tab.unfocusedActiveForeground": "#c8d3f5",
-    "tab.border": "#15151b",
-    "statusBar.noFolderBackground": "#1F2028",
-    "statusBar.border": "#15151b",
-    "statusBar.background": "#1c1d24",
-    "statusBar.foreground": "#828bb8",
-    "statusBar.debuggingBackground": "#baacff",
-    "statusBar.debuggingForeground": "#c8d3f5",
-    "statusBarItem.hoverBackground": "#828bb820",
-    "activityBar.background": "#1c1d24",
-    "activityBar.border": "#1F202860",
-    "activityBar.foreground": "#b4c2f0",
-    "activityBarBadge.background": "#3e68d7",
-    "activityBarBadge.foreground": "#ffffff",
-    "titleBar.activeBackground": "#1c1d24",
-    "titleBar.activeForeground": "#c8d3f5",
-    "titleBar.inactiveBackground": "#1c1d24",
-    "titleBar.inactiveForeground": "#828bb8",
-    "sideBar.background": "#1c1d24",
-    "sideBar.foreground": "#828bb8",
-    "sideBar.border": "#15151b",
-    "titleBar.border": "#15151b",
-    "sideBarTitle.foreground": "#c8d3f5",
-    "sideBarSectionHeader.background": "#1c1d24",
-    "sideBarSectionHeader.border": "#2f334d",
-    "input.background": "#15151b",
-    "input.foreground": "#c8d3f5",
-    "input.placeholderForeground": "#c8d3f5aa",
-    "input.border": "#00000066",
-    "inputValidation.errorBackground": "#c53b53",
-    "inputValidation.errorForeground": "#ffffff",
-    "inputValidation.errorBorder": "#ff537050",
-    "inputValidation.infoBackground": "#446bbb",
-    "inputValidation.infoForeground": "#ffffff",
-    "inputValidation.infoBorder": "#82aaff50",
-    "inputValidation.warningBackground": "#ad7c43",
-    "inputValidation.warningForeground": "#ffffff",
-    "inputValidation.warningBorder": "#ffc77750",
-    "dropdown.foreground": "#c8d3f5",
-    "dropdown.background": "#2f334d",
-    "dropdown.border": "#00000066",
-    "list.hoverForeground": "#c8d3f5",
-    "list.hoverBackground": "#1c1d24",
-    "list.activeSelectionBackground": "#383e5c",
-    "list.activeSelectionForeground": "#ffffff",
-    "list.inactiveSelectionForeground": "#c8d3f5",
-    "list.inactiveSelectionBackground": "#292e46",
-    "list.focusBackground": "#131421",
-    "list.focusForeground": "#c8d3f5",
-    "list.highlightForeground": "#86e1fc",
-    "list.warningForeground": "#ffc777cc",
-    "terminal.foreground": "#bcc4d6",
-    "terminal.selectionBackground": "#c8d3f544",
-    "terminal.ansiWhite": "#c8d3f5",
-    "terminal.ansiBlack": "#000000",
-    "terminal.ansiBlue": "#82aaff",
-    "terminal.ansiCyan": "#86e1fc",
-    "terminal.ansiGreen": "#c3e88d",
-    "terminal.ansiMagenta": "#fca7ea",
-    "terminal.ansiRed": "#ff757f",
-    "terminal.ansiYellow": "#ffc777",
-    "terminal.ansiBrightWhite": "#c8d3f5",
-    "terminal.ansiBrightBlack": "#828bb8",
-    "terminal.ansiBrightBlue": "#82aaff",
-    "terminal.ansiBrightCyan": "#86e1fc",
-    "terminal.ansiBrightGreen": "#c3e88d",
-    "terminal.ansiBrightMagenta": "#fca7ea",
-    "terminal.ansiBrightRed": "#ff757f",
-    "terminal.ansiBrightYellow": "#ffc777",
-    "terminal.border": "#2f334d",
-    "scrollbarSlider.background": "#828bb830",
-    "scrollbarSlider.hoverBackground": "#a9b8e830",
-    "scrollbarSlider.activeBackground": "#82aaff",
-    "minimap.findMatchHighlight": "#86e1fccc",
-    "minimap.selectionHighlight": "#86e1fc33",
-    "minimapGutter.addedBackground": "#c3e88d66",
-    "minimapGutter.modifiedBackground": "#82aaff66",
-    "editorSuggestWidget.background": "#15151b",
-    "editorSuggestWidget.foreground": "#a9b8e8",
-    "editorSuggestWidget.highlightForeground": "#86e1fc",
-    "editorSuggestWidget.selectedBackground": "#2f334d",
-    "editorSuggestWidget.border": "#00000033",
-    "editorError.foreground": "#ff5370",
-    "editorWarning.foreground": "#ffc777cc",
-    "editorWidget.background": "#1c1d24",
-    "editorWidget.resizeBorder": "#82aaff",
-    "editorMarkerNavigation.background": "#c8d3f505",
-    "widget.shadow": "#00000033",
-    "panel.border": "#00000033",
-    "panel.background": "#1c1d24",
-    "panel.dropBackground": "#c8d3f5",
-    "panelTitle.inactiveForeground": "#828bb8",
-    "panelTitle.activeForeground": "#c8d3f5",
-    "panelTitle.activeBorder": "#82aaff",
-    "terminalCursor.foreground": "#82aaff",
-    "diffEditor.insertedTextBackground": "#c3e88d15",
-    "diffEditor.removedTextBackground": "#ff537020",
-    "notifications.background": "#15151b",
-    "notifications.foreground": "#c8d3f5",
-    "notificationLink.foreground": "#82aaff",
-    "badge.background": "#3e68d7",
-    "badge.foreground": "#ffffff",
-    "button.background": "#3e68d7",
-    "button.hoverBackground": "#65bcffcc",
-    "extensionButton.prominentBackground": "#3e68d7",
-    "extensionButton.prominentHoverBackground": "#65bcffcc",
-    "peekView.border": "#00000030",
-    "peekViewEditor.background": "#c8d3f505",
-    "peekViewTitle.background": "#c8d3f505",
-    "peekViewResult.background": "#c8d3f505",
-    "peekViewEditorGutter.background": "#c8d3f505",
-    "peekViewTitleDescription.foreground": "#c8d3f560",
-    "peekViewResult.matchHighlightBackground": "#828bb850",
-    "peekViewEditor.matchHighlightBackground": "#828bb850",
-    "debugToolBar.background": "#1c1d24",
-    "pickerGroup.foreground": "#82aaff",
-    "gitDecoration.deletedResourceForeground": "#ff5370dd",
-    "gitDecoration.conflictingResourceForeground": "#ffc777cc",
-    "gitDecoration.modifiedResourceForeground": "#82aaffee",
-    "gitDecoration.untrackedResourceForeground": "#77e0c6dd",
-    "gitDecoration.ignoredResourceForeground": "#777fabaa",
-    "gitlens.trailingLineForegroundColor": "#828bb8aa",
-    "editorCodeLens.foreground": "#828bb8",
-    "peekViewResult.selectionBackground": "#828bb870",
-    "breadcrumb.background": "#1F2028",
-    "breadcrumb.foreground": "#828bb8",
-    "breadcrumb.focusForeground": "#c8d3f5",
-    "breadcrumb.activeSelectionForeground": "#82aaff",
-    "breadcrumbPicker.background": "#1c1d24",
-    "menu.background": "#1c1d24",
-    "menu.foreground": "#c8d3f5",
-    "menu.selectionBackground": "#00000050",
-    "menu.selectionForeground": "#82aaff",
-    "menu.selectionBorder": "#00000030",
-    "menu.separatorBackground": "#c8d3f5",
-    "menubar.selectionBackground": "#00000030",
-    "menubar.selectionForeground": "#82aaff",
-    "menubar.selectionBorder": "#00000030",
-    "settings.dropdownForeground": "#c8d3f5",
-    "settings.dropdownBackground": "#2f334d",
-    "settings.dropdownBorder": "#15151b",
-    "settings.numberInputForeground": "#c8d3f5",
-    "settings.numberInputBackground": "#15151b",
-    "settings.numberInputBorder": "#00000066",
-    "settings.textInputForeground": "#c8d3f5",
-    "settings.textInputBackground": "#15151b",
-    "settings.textInputBorder": "#00000066",
-    "settings.headerForeground": "#82aaff",
-    "settings.modifiedItemIndicator": "#82aaff",
-    "settings.checkboxBackground": "#131421",
-    "settings.checkboxForeground": "#c8d3f5",
-    "settings.checkboxBorder": "#00000066"
-  },
-  "tokenColors": [
-    {
-      "name": "Comment",
-      "scope": ["comment", "punctuation.definition.comment", "string.quoted.docstring"],
-      "settings": {
-        "foreground": "#858aa6"
-      }
-    },
-    {
-      "name": "Variables and Plain Text",
-      "scope": ["variable", "support.variable", "string constant.other.placeholder", "text.html"],
-      "settings": {
-        "foreground": "#c8d3f5"
-      }
-    },
-    {
-      "name": "DOM Variables",
-      "scope": [
-        "support.variable.dom",
-        "support.constant.math",
-        "support.type.object.module",
-        "support.variable.object.process",
-        "support.constant.json"
-      ],
-      "settings": {
-        "foreground": "#ffc777"
-      }
-    },
-    {
-      "name": "Nil",
-      "scope": ["constant.language.undefined", "constant.language.null"],
-      "settings": {
-        "foreground": "#7f85a3"
-      }
-    },
-    {
-      "name": "PHP Constants",
-      "scope": ["constant.other.php"],
-      "settings": {
-        "foreground": "#ffc777"
-      }
-    },
-    {
-      "name": "Colors",
-      "scope": ["constant.other.color"],
-      "settings": {
-        "foreground": "#ffffff"
-      }
-    },
-    {
-      "name": "Invalid",
-      "scope": ["invalid", "invalid.illegal"],
-      "settings": {
-        "foreground": "#ff5370"
-      }
-    },
-    {
-      "name": "Invalid deprecated",
-      "scope": ["invalid.deprecated"],
-      "settings": {
-        "foreground": "#c099ff"
-      }
-    },
-    {
-      "name": "Keyword, Storage",
-      "scope": ["keyword", "storage.type", "storage.modifier", "keyword.other.important"],
-      "settings": {
-        "foreground": "#c099ff"
-      }
-    },
-    {
-      "name": "Keyword, Storage",
-      "scope": ["keyword.control", "storage"],
-      "settings": {}
-    },
-    {
-      "name": "Interpolation",
-      "scope": ["punctuation.definition.template-expression", "punctuation.section.embedded"],
-      "settings": {
-        "foreground": "#86e1fc"
-      }
-    },
-    {
-      "name": "Spread",
-      "scope": ["keyword.operator.spread", "keyword.operator.rest"],
-      "settings": {
-        "foreground": "#ff757f",
-        "fontStyle": "bold"
-      }
-    },
-    {
-      "name": "Operator, Misc",
-      "scope": [
-        "keyword.operator",
-        "keyword.control",
-        "punctuation",
-        "punctuation.definition.string",
-        "punctuation.support.type.property-name",
-        "text.html.vue-html meta.tag",
-        "punctuation.definition.keyword",
-        "punctuation.terminator.rule",
-        "punctuation.definition.entity",
-        "constant.other.color",
-        "meta.tag",
-        "punctuation.definition.tag",
-        "punctuation.separator.inheritance.php",
-        "punctuation.definition.block.tag",
-        "punctuation.definition.tag.html",
-        "punctuation.definition.tag.begin.html",
-        "punctuation.definition.tag.end.html",
-        "meta.property-list",
-        "meta.brace.square",
-        "keyword.other.template",
-        "keyword.other.substitution"
-      ],
-      "settings": {
-        "foreground": "#86e1fc"
-      }
-    },
-    {
-      "name": "Keyword Control",
-      "scope": ["keyword.control"],
-      "settings": {}
-    },
-    {
-      "name": "Tag",
-      "scope": ["entity.name.tag", "meta.tag", "markup.deleted.git_gutter"],
-      "settings": {
-        "foreground": "#ff757f"
-      }
-    },
-    {
-      "name": "Function, Special Method",
-      "scope": ["entity.name.function", "variable.function", "keyword.other.special-method"],
-      "settings": {
-        "foreground": "#82aaff"
-      }
-    },
-    {
-      "name": "Support Function",
-      "scope": ["support.function", "meta.function-call entity.name.function"],
-      "settings": {
-        "foreground": "#65bcff"
-      }
-    },
-    {
-      "name": "C-related Block Level Variables",
-      "scope": ["source.cpp meta.block variable.other"],
-      "settings": {
-        "foreground": "#ff757f"
-      }
-    },
-    {
-      "name": "Other Variable, String Link",
-      "scope": ["support.other.variable", "string.other.link"],
-      "settings": {
-        "foreground": "#ff757f"
-      }
-    },
-    {
-      "name": "Constant, Function Argument, Tag Attribute, Embedded",
-      "scope": [
-        "variable.other.constant",
-        "constant.language",
-        "keyword.other.type.php",
-        "storage.type.php",
-        "support.constant",
-        "constant.character",
-        "constant.escape",
-        "keyword.other.unit"
-      ],
-      "settings": {
-        "foreground": "#ff98a4"
-      }
-    },
-    {
-      "name": "Number, Boolean",
-      "scope": [
-        "constant.numeric",
-        "constant.language.boolean",
-        "constant.language.json",
-        "constant.language.infinity",
-        "constant.language.nan"
-      ],
-      "settings": {
-        "foreground": "#ff966c"
-      }
-    },
-    {
-      "name": "Function Argument",
-      "scope": [
-        "variable.parameter.function.language.special",
-        "variable.parameter",
-        "meta.function.parameter variable"
-      ],
-      "settings": {
-        "foreground": "#fca7ea"
-      }
-    },
-    {
-      "name": "String, Symbols, Inherited Class, Markup Heading",
-      "scope": [
-        "string",
-        "constant.other.symbol",
-        "constant.other.key",
-        "entity.other.inherited-class",
-        "markup.heading",
-        "markup.inserted.git_gutter",
-        "meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js",
-        "meta.attribute-selector"
-      ],
-      "settings": {
-        "fontStyle": "",
-        "foreground": "#c3e88d"
-      }
-    },
-    {
-      "name": "Object",
-      "scope": ["variable.other.object"],
-      "settings": {
-        "foreground": "#ffc777"
-      }
-    },
-    {
-      "name": "Object Key",
-      "scope": [
-        "meta.object-literal.key",
-        "string.alias.graphql",
-        "string.unquoted.graphql",
-        "string.unquoted.alias.graphql",
-        "meta.field.declaration.ts variable.object.property",
-        "variable.object.property"
-      ],
-      "settings": {
-        "foreground": "#4fd6be"
-      }
-    },
-    {
-      "name": "Nested Object Property",
-      "scope": ["meta.object.member", "variable.other.object.property"],
-      "settings": {
-        "foreground": "#a9b8e8"
-      }
-    },
-    {
-      "name": "Object Property",
-      "scope": [
-        "variable.other.property",
-        "support.variable.property",
-        "support.variable.property.dom"
-      ],
-      "settings": {
-        "foreground": "#a9b8e8"
-      }
-    },
-    {
-      "name": "Haskell Constants",
-      "scope": ["source.haskell constant.other.haskell"],
-      "settings": {
-        "foreground": "#ff98a4"
-      }
-    },
-    {
-      "name": "Haskell Imports",
-      "scope": ["source.haskell meta.import.haskell entity.name.namespace"],
-      "settings": {
-        "foreground": "#c8d3f5"
-      }
-    },
-    {
-      "name": "Types Fixes",
-      "scope": ["source.haskell storage.type", "source.c storage.type", "source.java storage.type"],
-      "settings": {
-        "foreground": "#ffc777"
-      }
-    },
-    {
-      "name": "Lambda Arrow",
-      "scope": ["storage.type.function"],
-      "settings": {
-        "foreground": "#c099ff"
-      }
-    },
-    {
-      "name": "Class, Support",
-      "scope": [
-        "entity.name",
-        "support.type",
-        "support.class",
-        "support.orther.namespace.use.php",
-        "meta.use.php",
-        "support.other.namespace.php",
-        "markup.changed.git_gutter",
-        "support.type.sys-types"
-      ],
-      "settings": {
-        "foreground": "#ffc777"
-      }
-    },
-    {
-      "name": "Entity types",
-      "scope": ["support.type"],
-      "settings": {
-        "foreground": "#ff966c"
-      }
-    },
-    {
-      "name": "CSS Class and Support",
-      "scope": [
-        "source.css support.type.property-name",
-        "source.sass support.type.property-name",
-        "source.scss support.type.property-name",
-        "source.less support.type.property-name",
-        "source.stylus support.type.property-name",
-        "source.postcss support.type.property-name",
-        "support.type.property-name.css",
-        "support.type.vendored.property-name"
-      ],
-      "settings": {
-        "foreground": "#82aaff"
-      }
-    },
-    {
-      "name": "Sub-methods",
-      "scope": ["entity.name.module.js", "variable.import.parameter.js", "variable.other.class.js"],
-      "settings": {
-        "foreground": "#ff757f"
-      }
-    },
-    {
-      "name": "Language methods",
-      "scope": ["variable.language"],
-      "settings": {
-        "foreground": "#ff757f"
-      }
-    },
-    {
-      "name": "entity.name.method.js",
-      "scope": ["entity.name.method.js"],
-      "settings": {
-        "foreground": "#82aaff"
-      }
-    },
-    {
-      "name": "meta.method.js",
-      "scope": ["meta.class-method.js entity.name.function.js", "variable.function.constructor"],
-      "settings": {
-        "foreground": "#82aaff"
-      }
-    },
-    {
-      "name": "Attributes",
-      "scope": ["entity.other.attribute-name"],
-      "settings": {
-        "foreground": "#c099ff"
-      }
-    },
-    {
-      "name": "HTML Attributes",
-      "scope": [
-        "text.html.basic entity.other.attribute-name.html",
-        "text.html.basic entity.other.attribute-name"
-      ],
-      "settings": {
-        "foreground": "#ffc777"
-      }
-    },
-    {
-      "name": "HTML Doctype",
-      "scope": [
-        "meta.tag.metadata.doctype entity.name.tag",
-        "meta.tag.metadata.doctype entity.other.attribute-name"
-      ],
-      "settings": {
-        "foreground": "#c099ff"
-      }
-    },
-    {
-      "name": "CSS Classes",
-      "scope": ["entity.other.attribute-name.class"],
-      "settings": {
-        "foreground": "#ffc777"
-      }
-    },
-    {
-      "name": "CSS ID's",
-      "scope": ["source.sass keyword.control"],
-      "settings": {
-        "foreground": "#82aaff"
-      }
-    },
-    {
-      "name": "CSS psuedo selectors",
-      "scope": [
-        "entity.other.attribute-name.pseudo-class",
-        "entity.other.attribute-name.pseudo-element"
-      ],
-      "settings": {
-        "foreground": "#4fd6be"
-      }
-    },
-    {
-      "name": "CSS Property value",
-      "scope": ["support.constant.property-value"],
-      "settings": {
-        "foreground": "#fca7ea"
-      }
-    },
-    {
-      "name": "Inserted",
-      "scope": ["markup.inserted"],
-      "settings": {
-        "foreground": "#c3e88d"
-      }
-    },
-    {
-      "name": "Deleted",
-      "scope": ["markup.deleted"],
-      "settings": {
-        "foreground": "#ff757f"
-      }
-    },
-    {
-      "name": "Changed",
-      "scope": ["markup.changed"],
-      "settings": {
-        "foreground": "#c099ff"
-      }
-    },
-    {
-      "name": "Regular Expressions",
-      "scope": ["string.regexp"],
-      "settings": {
-        "foreground": "#b4f9f8"
-      }
-    },
-    {
-      "name": "Regular Expressions - Punctuation",
-      "scope": ["punctuation.definition.group"],
-      "settings": {
-        "foreground": "#ff757f"
-      }
-    },
-    {
-      "name": "Regular Expressions - Character Class",
-      "scope": ["constant.other.character-class.regexp", "keyword.control.anchor.regexp"],
-      "settings": {
-        "foreground": "#c099ff"
-      }
-    },
-    {
-      "name": "Regular Expressions - Character Class Set",
-      "scope": ["constant.other.character-class.set.regexp"],
-      "settings": {
-        "foreground": "#ffc777"
-      }
-    },
-    {
-      "name": "Regular Expressions - Quantifier",
-      "scope": ["keyword.operator.quantifier.regexp"],
-      "settings": {
-        "foreground": "#fca7ea"
-      }
-    },
-    {
-      "name": "Escape Characters",
-      "scope": ["constant.character.escape"],
-      "settings": {
-        "foreground": "#86e1fc"
-      }
-    },
-    {
-      "name": "URL",
-      "scope": ["*url*", "*link*", "*uri*"],
-      "settings": {
-        "fontStyle": "underline"
-      }
-    },
-    {
-      "name": "Decorators",
-      "scope": [
-        "tag.decorator.js entity.name.tag.js",
-        "tag.decorator.js punctuation.definition.tag.js"
-      ],
-      "settings": {
-        "foreground": "#82aaff"
-      }
-    },
-    {
-      "name": "CSS Units",
-      "scope": ["keyword.other.unit"],
-      "settings": {
-        "foreground": "#fc7b7b"
-      }
-    },
-    {
-      "name": "ES7 Bind Operator",
-      "scope": ["source.js constant.other.object.key.js string.unquoted.label.js"],
-      "settings": {
-        "foreground": "#ff757f"
-      }
-    },
-    {
-      "name": "JSON Key - Level 0",
-      "scope": ["source.json meta.structure.dictionary.json support.type.property-name.json"],
-      "settings": {
-        "foreground": "#82aaff"
-      }
-    },
-    {
-      "name": "JSON Key - Level 1",
-      "scope": [
-        "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
-      ],
-      "settings": {
-        "foreground": "#65bcff"
-      }
-    },
-    {
-      "name": "JSON Key - Level 2",
-      "scope": [
-        "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
-      ],
-      "settings": {
-        "foreground": "#ff757f"
-      }
-    },
-    {
-      "name": "JSON Key - Level 3",
-      "scope": [
-        "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
-      ],
-      "settings": {
-        "foreground": "#fca7ea"
-      }
-    },
-    {
-      "name": "JSON Key - Level 4",
-      "scope": [
-        "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
-      ],
-      "settings": {
-        "foreground": "#ffc777"
-      }
-    },
-    {
-      "name": "JSON Key - Level 5",
-      "scope": [
-        "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
-      ],
-      "settings": {
-        "foreground": "#4fd6be"
-      }
-    },
-    {
-      "name": "JSON Key - Level 6",
-      "scope": [
-        "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
-      ],
-      "settings": {
-        "foreground": "#82aaff"
-      }
-    },
-    {
-      "name": "Plain Punctuation",
-      "scope": ["punctuation.definition.list_item.markdown"],
-      "settings": {
-        "foreground": "#828bb8"
-      }
-    },
-    {
-      "name": "Block Punctuation",
-      "scope": [
-        "meta.block",
-        "meta.brace",
-        "punctuation.definition.block",
-        "punctuation.definition.parameters",
-        "punctuation.section.function"
-      ],
-      "settings": {
-        "foreground": "#b4c2f0"
-      }
-    },
-    {
-      "name": "Markdown - Plain",
-      "scope": ["meta.jsx.children", "meta.embedded.block"],
-      "settings": {
-        "foreground": "#b4c2f0"
-      }
-    },
-    {
-      "name": "Markdown - Markup Raw Inline",
-      "scope": ["text.html.markdown markup.inline.raw.markdown"],
-      "settings": {
-        "foreground": "#c099ff"
-      }
-    },
-    {
-      "name": "Markdown - Markup Raw Inline Punctuation",
-      "scope": [
-        "text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown"
-      ],
-      "settings": {
-        "foreground": "#86e1fc"
-      }
-    },
-    {
-      "name": "Markdown - Heading punctuation",
-      "scope": [
-        "markdown.heading",
-        "markup.heading | markup.heading entity.name",
-        "markup.heading.markdown punctuation.definition.heading.markdown"
-      ],
-      "settings": {
-        "foreground": "#86e1fc"
-      }
-    },
-    {
-      "name": "Markup - Italic",
-      "scope": ["markup.italic"],
-      "settings": {
-        "fontStyle": "italic",
-        "foreground": "#ff757f"
-      }
-    },
-    {
-      "name": "Markup - Bold",
-      "scope": ["markup.bold", "markup.bold string"],
-      "settings": {
-        "fontStyle": "bold",
-        "foreground": "#ff757f"
-      }
-    },
-    {
-      "name": "Markup - Bold-Italic",
-      "scope": [
-        "markup.bold markup.italic",
-        "markup.italic markup.bold",
-        "markup.quote markup.bold",
-        "markup.bold markup.italic string",
-        "markup.italic markup.bold string",
-        "markup.quote markup.bold string"
-      ],
-      "settings": {
-        "fontStyle": "bold",
-        "foreground": "#ff757f"
-      }
-    },
-    {
-      "name": "Markup - Underline",
-      "scope": ["markup.underline"],
-      "settings": {
-        "fontStyle": "underline",
-        "foreground": "#ff966c"
-      }
-    },
-    {
-      "name": "Markdown - Blockquote",
-      "scope": ["markup.quote punctuation.definition.blockquote.markdown"],
-      "settings": {
-        "foreground": "#86e1fc"
-      }
-    },
-    {
-      "name": "Markup - Quote",
-      "scope": ["markup.quote"],
-      "settings": {
-        "fontStyle": "italic"
-      }
-    },
-    {
-      "name": "Markdown - Link",
-      "scope": ["string.other.link.title.markdown"],
-      "settings": {
-        "foreground": "#82aaff"
-      }
-    },
-    {
-      "name": "Markdown - Link Description",
-      "scope": ["string.other.link.description.title.markdown"],
-      "settings": {
-        "foreground": "#c099ff"
-      }
-    },
-    {
-      "name": "Markdown - Link Anchor",
-      "scope": ["constant.other.reference.link.markdown"],
-      "settings": {
-        "foreground": "#ffc777"
-      }
-    },
-    {
-      "name": "Markup - Raw Block",
-      "scope": ["markup.raw.block"],
-      "settings": {
-        "foreground": "#c099ff"
-      }
-    },
-    {
-      "name": "Markdown - Fenced Bode Block Variable",
-      "scope": ["markup.fenced_code.block.markdown", "markup.inline.raw.string.markdown"],
-      "settings": {
-        "foreground": "#86e1fc"
-      }
-    },
-    {
-      "name": "Markdown - Fenced Language",
-      "scope": ["variable.language.fenced.markdown"],
-      "settings": {
-        "foreground": "#86e1fc"
-      }
-    },
-    {
-      "name": "Markdown - Separator",
-      "scope": ["meta.separator"],
-      "settings": {
-        "fontStyle": "bold",
-        "foreground": "#86e1fc"
-      }
-    },
-    {
-      "name": "Markup - Table",
-      "scope": ["markup.table"],
-      "settings": {
-        "foreground": "#828bb8"
-      }
-    },
-    {
-      "scope": "token.info-token",
-      "settings": {
-        "foreground": "#65bcff"
-      }
-    },
-    {
-      "scope": "token.warn-token",
-      "settings": {
-        "foreground": "#ffc777"
-      }
-    },
-    {
-      "scope": "token.error-token",
-      "settings": {
-        "foreground": "#ff757f"
-      }
-    },
-    {
-      "scope": "token.debug-token",
-      "settings": {
-        "foreground": "#c099ff"
-      }
-    }
-  ]
-}
diff --git a/apps/next-demo/next-env.d.ts b/apps/next-demo/next-env.d.ts
deleted file mode 100644
index 4f11a03..0000000
--- a/apps/next-demo/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/apps/next-demo/next.config.mjs b/apps/next-demo/next.config.mjs
deleted file mode 100644
index 9080a14..0000000
--- a/apps/next-demo/next.config.mjs
+++ /dev/null
@@ -1,21 +0,0 @@
-import fs from "fs"
-import createMDX from "@next/mdx"
-import rehypePrettyCode from "rehype-pretty-code"
-import remarkGfm from "remark-gfm"
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-const options = {
-  keepBackground: false,
-  theme: JSON.parse(fs.readFileSync(new URL("./moonlight-ii.json", import.meta.url)))
-}
-
-const withMDX = createMDX({
-  options: {
-    extension: /\.mdx?$/,
-    remarkPlugins: [remarkGfm],
-    rehypePlugins: [[rehypePrettyCode, options]]
-  }
-})
-export default withMDX(nextConfig)
diff --git a/apps/next-demo/package.json b/apps/next-demo/package.json
deleted file mode 100644
index bc22af9..0000000
--- a/apps/next-demo/package.json
+++ /dev/null
@@ -1,64 +0,0 @@
-{
-  "name": "island-next-demos",
-  "version": "1.0.18",
-  "private": true,
-  "scripts": {
-    "dev": "next dev --port=4000",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint . --max-warnings 0"
-  },
-  "dependencies": {
-    "@mdx-js/loader": "^2.3.0",
-    "@mdx-js/react": "^2.3.0",
-    "@next/mdx": "^13.4.19",
-    "@next/eslint-plugin-next": "^14.0.2",
-    "zod-stream": "workspace:*",
-    "stream-hooks": "workspace:*",
-    "@repo/constants": "workspace:*",
-    "@repo/eslint-config": "workspace:*",
-    "@repo/tailwind-config": "workspace:*",
-    "@repo/typescript-config": "workspace:*",
-    "@repo/ui": "workspace:*",
-    "@types/eslint": "^8.44.7",
-    "@types/mdx": "^2.0.7",
-    "@types/node": "^17.0.12",
-    "@types/react": "^18.3.2",
-    "@types/react-dom": "^18.3.0",
-    "@vercel/analytics": "^1.1.1",
-    "@vercel/kv": "^0.2.2",
-    "@vercel/speed-insights": "latest",
-    "avvvatars-react": "^0.4.2",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^1.2.1",
-    "cmdk": "^0.2.0",
-    "cookies": "^0.8.0",
-    "date-fns": "^2.30.0",
-    "framer-motion": "^10.12.18",
-    "js-tiktoken": "^1.0.7",
-    "jsonwebtoken": "^9.0.2",
-    "lucide-react": "latest",
-    "next": "14.2.3",
-    "next-themes": "^0.2.1",
-    "openai": "4.24.1",
-    "ramda": "^0.29.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-markdown": "^8.0.7",
-    "rehype-highlight": "^6.0.0",
-    "rehype-pretty-code": "^0.10.1",
-    "remark-gfm": "^3.0.1",
-    "shiki": "^0.14.4",
-    "sonner": "^1.3.1",
-    "svix": "^1.13.0",
-    "tailwind-merge": "^1.13.2",
-    "tailwindcss": "^3.2.2",
-    "tailwindcss-animate": "^1.0.6",
-    "tippy.js": "^6.3.7",
-    "typescript": "^5.2.2",
-    "use-debounce": "^9.0.4",
-    "use-immer": "^0.9.0",
-    "vaul": "^0.7.9",
-    "zod": "^3.23.3"
-  }
-}
diff --git a/apps/next-demo/postcss.config.js b/apps/next-demo/postcss.config.js
deleted file mode 100644
index 2d17c8b..0000000
--- a/apps/next-demo/postcss.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = {
-  plugins: {
-    "postcss-import": {},
-    "tailwindcss/nesting": {},
-    "tailwindcss": {},
-    "autoprefixer": {}
-  }
-}
diff --git a/apps/next-demo/public/favicon.ico b/apps/next-demo/public/favicon.ico
deleted file mode 100644
index 446e4c5..0000000
Binary files a/apps/next-demo/public/favicon.ico and /dev/null differ
diff --git a/apps/next-demo/public/favicon.png b/apps/next-demo/public/favicon.png
deleted file mode 100644
index e7396ad..0000000
Binary files a/apps/next-demo/public/favicon.png and /dev/null differ
diff --git a/apps/next-demo/src/app/api/ai/chat/route.ts b/apps/next-demo/src/app/api/ai/chat/route.ts
deleted file mode 100644
index 33737f9..0000000
--- a/apps/next-demo/src/app/api/ai/chat/route.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { coreAgentSchema } from "@/schemas/core"
-import OpenAI from "openai"
-import { z } from "zod"
-import { OAIStream, withResponseModel } from "zod-stream"
-
-import { jsonToZod } from "@/lib/json-to-zod"
-
-const oai = new OpenAI({
-  apiKey: process.env["OPENAI_API_KEY"] ?? undefined,
-  organization: process.env["OPENAI_ORG_ID"] ?? undefined
-})
-
-export const runtime = "edge"
-
-interface IRequest {
-  messages: OpenAI.ChatCompletionMessageParam[]
-  schema?: string
-}
-
-export async function POST(request: Request) {
-  const { messages, schema } = (await request.json()) as IRequest
-
-  let resolvedSchema: z.AnyZodObject = coreAgentSchema
-
-  if (schema) {
-    const potentialSchema = jsonToZod(schema)
-    if (potentialSchema instanceof Error) {
-      throw potentialSchema
-    }
-
-    resolvedSchema = potentialSchema
-  }
-
-  const params = withResponseModel({
-    response_model: { schema: resolvedSchema, name: "Extract" },
-    params: {
-      messages,
-      model: "gpt-4o-mini",
-      stream: true
-    },
-    mode: "TOOLS"
-  })
-
-  // @ts-ignore
-  const extractionStream = await oai.chat.completions.create(params)
-
-  return new Response(
-    OAIStream({
-      res: extractionStream
-    })
-  )
-}
diff --git a/apps/next-demo/src/app/extract/page.tsx b/apps/next-demo/src/app/extract/page.tsx
deleted file mode 100644
index 521ab19..0000000
--- a/apps/next-demo/src/app/extract/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ExtractTest } from "@/components/extract-test"
-
-export default async function Page() {
-  return (
-    <div className="flex flex-col h-full flex-1">
-      <div className="overflow-y-auto">
-        <div className="py-12 px-6">
-          <ExtractTest />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/next-demo/src/app/layout.tsx b/apps/next-demo/src/app/layout.tsx
deleted file mode 100644
index 4725aa1..0000000
--- a/apps/next-demo/src/app/layout.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import "@/styles/globals.css"
-
-import { ReactNode } from "react"
-import { Metadata } from "next"
-import Link from "next/link"
-
-import { siteConfig } from "@/config/site"
-import { cn } from "@/lib/utils"
-import { LogoMark } from "@/components/logo-mark"
-import ModeToggle from "@/components/mode-toggle"
-import { defaultFontMapper } from "@/styles/fonts"
-
-import Providers from "./providers"
-
-export const metadata: Metadata = {
-  title: siteConfig.name,
-  description: siteConfig.description
-}
-
-export const viewport = {
-  width: "device-width",
-  initialScale: 1,
-  maximumScale: 1,
-  interactiveWidget: "resizes-content"
-}
-
-export default function RootLayout({ children }: { children: ReactNode }) {
-  return (
-    <html
-      lang="en"
-      suppressHydrationWarning
-      className={cn(
-        "antialiased overflow-hidden h-screen w-screen font-default",
-        ...Object.values(defaultFontMapper)
-      )}
-    >
-      <body className="antialiased bg-background">
-        <Providers>
-          <>
-            <div
-              className="h-screen w-screen flex flex-col overflow-hidden bg-background"
-              vaul-drawer-wrapper=""
-            >
-              <header className="w-full py-4 px-4 h-[64px] backdrop-blur-md bg-background/90 dark:bg-background/50">
-                <div className="flex justify-between items-center">
-                  <div className="flex items-center lg:gap-6 gap-2">
-                    <div className="flex items-center">
-                      <h1 className="text-lg font-okineBold overflow-hidden whitespace-nowrap">
-                        <Link
-                          href="/"
-                          className="flex items-center gap-1 tracking-widest text-2xl text-foreground/90"
-                        >
-                          <LogoMark size={24} />
-                        </Link>
-                      </h1>
-
-                      <nav className="space-x-8 ml-12">
-                        {siteConfig.mainNav.map(({ label, url }) => (
-                          <Link
-                            className="text-xs hover:underline font-okineMedium uppercase tracking-widest text-muted-foreground hover:text-foreground"
-                            href={url}
-                            key={label}
-                          >
-                            {label}
-                          </Link>
-                        ))}
-                      </nav>
-                    </div>
-                  </div>
-
-                  <div className="gap-4 items-center flex">
-                    <div className="ml-[-2px] mt-[4px] flex items-center gap-6">
-                      <ModeToggle />
-                    </div>
-                  </div>
-                </div>
-              </header>
-
-              <main className="h-[calc(100dvh-64px)] w-full flex-1 flex flex-col overflow-hidden texture">
-                {children}
-              </main>
-            </div>
-          </>
-        </Providers>
-      </body>
-    </html>
-  )
-}
diff --git a/apps/next-demo/src/app/page.tsx b/apps/next-demo/src/app/page.tsx
deleted file mode 100644
index 6092212..0000000
--- a/apps/next-demo/src/app/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { StreamTest } from "@/components/stream-test"
-
-export default async function Page() {
-  return (
-    <div className="flex flex-col h-full flex-1">
-      <div className="overflow-y-auto">
-        <div className="py-12 px-6">
-          <StreamTest />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/next-demo/src/app/providers.tsx b/apps/next-demo/src/app/providers.tsx
deleted file mode 100644
index 7c5a853..0000000
--- a/apps/next-demo/src/app/providers.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-"use client"
-
-import { Toaster } from "@repo/ui/components/ui/toaster"
-import { ThemeProvider } from "next-themes"
-
-export default function Providers({ children }: { children: React.ReactNode }) {
-  return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <Toaster />
-      {children}
-    </ThemeProvider>
-  )
-}
diff --git a/apps/next-demo/src/components/extract-test.tsx b/apps/next-demo/src/components/extract-test.tsx
deleted file mode 100644
index 718f572..0000000
--- a/apps/next-demo/src/components/extract-test.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { Button } from "@repo/ui/components/ui/button"
-import { Textarea } from "@repo/ui/components/ui/textarea"
-import { Loader2 } from "lucide-react"
-import ZodStream from "zod-stream"
-
-import { jsonToZod } from "@/lib/json-to-zod"
-
-export function ExtractTest() {
-  const [prompt] = useState("go")
-
-  const [result, setResult] = useState({})
-  const [schema, setSchema] = useState(
-    `{ "users": [{ "name": "string", "email": "string", "twitter": "string" }], "budget": 123, "meetingDate": "1/2/23"}`
-  )
-  const [text, setText] = useState(`
-  In our recent online meeting, participants from various backgrounds joined to discuss the upcoming tech conference. The names and contact details of the participants were as follows:
-  
-  - Name: John Doe, Email: johndoe@email.com, Twitter: @TechGuru44
-  - Name: Jane Smith, Email: janesmith@email.com, Twitter: @DigitalDiva88
-  - Name: Alex Johnson, Email: alexj@email.com, Twitter: @CodeMaster2023
-  
-  During the meeting, we agreed on several key points. The conference will be held on March 15th, 2024, at the Grand Tech Arena located at 4521 Innovation Drive. Dr. Emily Johnson, a renowned AI researcher, will be our keynote speaker.
-  
-  The budget for the event is set at $50,000, covering venue costs, speaker fees, and promotional activities. Each participant is expected to contribute an article to the conference blog by February 20th.
-  
-  A follow-up meeting is scheduled for January 25th at 3 PM GMT to finalize the agenda and confirm the list of speakers.
-  `)
-
-  const [loading, setLoading] = useState(false)
-
-  const startStream = async ({ url }: { url: string }) => {
-    setLoading(true)
-
-    try {
-      const completion = async () => {
-        const response = await fetch(url, {
-          method: "POST",
-          body: JSON.stringify({
-            schema,
-            messages: [
-              {
-                content: text,
-                role: "user"
-              }
-            ]
-          })
-        })
-
-        if (!response.ok || !response?.body) throw new Error("failed to fetch completion")
-
-        return response?.body
-      }
-      const zodSchema = jsonToZod(schema)
-
-      if (!zodSchema || zodSchema instanceof Error) throw new Error("failed to parse schema")
-
-      const client = new ZodStream({})
-
-      const extractionStream = await client.create({
-        completionPromise: completion,
-        response_model: { schema: zodSchema, name: "Extractor" }
-      })
-
-      for await (const data of extractionStream) {
-        setResult(data)
-      }
-    } catch (e) {
-      console.log(e)
-    }
-
-    setLoading(false)
-  }
-
-  const submitMessage = async () => {
-    if (!prompt.length || loading) return
-
-    try {
-      await startStream({
-        url: "/api/ai/chat"
-      })
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  return (
-    <div className="container">
-      <div className="flex items-start w-full">
-        <div className="w-full h-full flex-1 min-h-[400px]">
-          <h3 className="text-lg font-bold">Example model</h3>
-          <Textarea
-            className="w-full h-full flex-1 min-h-[400px]"
-            value={schema}
-            onChange={e => setSchema(e.target.value)}
-          />
-        </div>
-        <div className="w-full h-full flex-1 min-h-[400px]">
-          <h3 className="text-lg font-bold">Raw text</h3>
-          <Textarea
-            className="w-full h-full flex-1 min-h-[400px]"
-            value={text}
-            onChange={e => setText(e.target.value)}
-          />
-        </div>
-        <pre className="w-full h-full p-4 overflow-auto flex-1">
-          <code>{JSON.stringify(result, null, 2)}</code>
-        </pre>
-      </div>
-      <footer className="fixed bottom-0 left-0 w-full p-6 flex items-center justify-center gap-4">
-        <Button size="lg" onClick={submitMessage}>
-          {loading ? (
-            <div className="flex items-center gap-2">
-              <Loader2 className="animate-spin w-4 h-4" />
-            </div>
-          ) : (
-            "start stream"
-          )}
-        </Button>
-      </footer>
-    </div>
-  )
-}
diff --git a/apps/next-demo/src/components/logo-mark.tsx b/apps/next-demo/src/components/logo-mark.tsx
deleted file mode 100644
index 3efa617..0000000
--- a/apps/next-demo/src/components/logo-mark.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-export async function LogoMark({ size = 32 }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 74.54 74.54">
-      <g>
-        <g>
-          <rect
-            width="74.54"
-            height="74.54"
-            rx="37.27"
-            style={{
-              fill: "hsl(var(--foreground))"
-            }}
-          />
-          <path
-            d="M22.3,44l3.93-3.93c1.85-1.85,1.85-3.77,0-5.62L22.3,30.53c-1.84-1.84-1.92-3.93,0-5.69L25,22.27c1.92-1.84,3.85-1.76,5.69,0l3.93,3.85c1.85,1.85,3.77,1.85,5.62,0L44,22.27c1.84-1.84,3.93-1.92,5.69,0l2.57,2.65c1.76,1.92,1.76,3.85,0,5.69l-3.85,3.85c-1.85,1.85-1.85,3.77,0,5.62l3.85,3.85c1.76,1.84,1.84,3.77,0,5.69l-2.57,2.65c-1.76,1.92-3.85,1.84-5.69,0l-3.85-3.85c-1.85-1.85-3.77-1.93-5.62-.08l-3.93,3.93C28.8,54,26.87,54,25,52.27L22.3,49.7C20.38,47.94,20.46,45.85,22.3,44Z"
-            style={{
-              fill: "hsl(var(--background))"
-            }}
-          />
-        </g>
-      </g>
-    </svg>
-  )
-}
diff --git a/apps/next-demo/src/components/mdx-components.tsx b/apps/next-demo/src/components/mdx-components.tsx
deleted file mode 100644
index 6482af0..0000000
--- a/apps/next-demo/src/components/mdx-components.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import Link from "next/link"
-
-import { cn } from "@/lib/utils"
-
-export const customComponents = {
-  h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
-    <h1 className={cn("font-blunt mt-2 mb-4 text-4xl tracking-widest", className)} {...props} />
-  ),
-  h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
-    <h2 className={cn("font-blunt mt-8 mb-4 text-2xl tracking-widest", className)} {...props} />
-  ),
-  h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
-    <h3 className={cn("font-blunt mt-8 text-xl  tracking-widest  ", className)} {...props} />
-  ),
-  h4: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
-    <h4 className={cn("font-blunt mt-8 text-lg  tracking-widest ", className)} {...props} />
-  ),
-  h5: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
-    <h5 className={cn("mt-8 text-lg  tracking-widest", className)} {...props} />
-  ),
-  h6: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
-    <h6 className={cn("mt-8 text-base  tracking-widest", className)} {...props} />
-  ),
-  a: ({ className, ...props }: React.HTMLAttributes<HTMLAnchorElement>) => (
-    <a className={cn("font-medium underline underline-offset-4", className)} {...props} />
-  ),
-  p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
-    <p className={cn("leading-7 [&:not(:first-child)]:mt-6", className)} {...props} />
-  ),
-  small: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
-    <small className={cn("text-sm font-medium leading-none", className)} {...props} />
-  ),
-  ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
-    <ul className={cn("my-4 ml-6 list-disc", className)} {...props} />
-  ),
-  ol: ({ className, ...props }: React.HTMLAttributes<HTMLOListElement>) => (
-    <ol className={cn("my-4 ml-6 list-decimal", className)} {...props} />
-  ),
-  li: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
-    <li className={cn("mt-2", className)} {...props} />
-  ),
-  blockquote: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
-    <blockquote className={cn("mt-6 border-l-2 pl-6 italic", className)} {...props} />
-  ),
-  img: ({ className, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img className={cn("rounded-md", className)} alt={alt} {...props} />
-  ),
-  hr: ({ ...props }: React.HTMLAttributes<HTMLHRElement>) => (
-    <hr className="my-4 md:my-8" {...props} />
-  ),
-  table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
-    <div className="my-6 w-full overflow-y-auto">
-      <table className={cn("w-full", className)} {...props} />
-    </div>
-  ),
-  tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
-    <tr className={cn("m-0 border-t p-0 even:bg-muted", className)} {...props} />
-  ),
-  th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
-    <th
-      className={cn(
-        "border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
-        className
-      )}
-      {...props}
-    />
-  ),
-  td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
-    <td
-      className={cn(
-        "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
-        className
-      )}
-      {...props}
-    />
-  ),
-  code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
-    <code
-      className={cn("relative rounded text-background font-mono text-sm", className)}
-      {...props}
-    />
-  ),
-  pre: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
-    <pre className={cn("rounded-lg border bg-foreground p-4", className)} {...props} />
-  ),
-  Link: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
-    <Link className={cn("font-medium underline underline-offset-4", className)} {...props} />
-  )
-}
diff --git a/apps/next-demo/src/components/mobile-nav.tsx b/apps/next-demo/src/components/mobile-nav.tsx
deleted file mode 100644
index a3d16c1..0000000
--- a/apps/next-demo/src/components/mobile-nav.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import Link from "next/link"
-import { Button } from "@repo/ui/components/ui/button"
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger
-} from "@repo/ui/components/ui/sheet"
-import { PanelLeftOpen } from "lucide-react"
-
-import { siteConfig } from "@/config/site"
-
-export function MobileNav() {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button size={"sm"} variant="ghost" className="px-2">
-          <PanelLeftOpen className="h-4 w-4" />
-        </Button>
-      </SheetTrigger>
-
-      <SheetContent side="left">
-        <SheetHeader>
-          <SheetTitle>
-            <h1 className="text-lg font-okineBold overflow-hidden whitespace-nowrap">
-              <Link
-                href="/"
-                className="flex items-center gap-1 tracking-widest text-2xl text-foreground/90"
-              >
-                NOTES
-              </Link>
-            </h1>
-          </SheetTitle>
-        </SheetHeader>
-
-        <div className="mt-8 pl-4">
-          <nav className="space-y-6 flex flex-col">
-            {siteConfig.mainNav.map(({ label, url }) => (
-              <Link
-                className="text-xs hover:underline font-okineMedium uppercase tracking-widest text-muted-foreground hover:text-foreground"
-                href={url}
-                key={label}
-              >
-                {label}
-              </Link>
-            ))}
-          </nav>
-        </div>
-      </SheetContent>
-    </Sheet>
-  )
-}
diff --git a/apps/next-demo/src/components/mode-toggle.tsx b/apps/next-demo/src/components/mode-toggle.tsx
deleted file mode 100644
index ea3af94..0000000
--- a/apps/next-demo/src/components/mode-toggle.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-"use client"
-
-import dynamic from "next/dynamic"
-import { Button } from "@repo/ui/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from "@repo/ui/components/ui/dropdown-menu"
-import { Monitor, Moon, SunDim } from "lucide-react"
-import { useTheme } from "next-themes"
-
-const appearances = [
-  {
-    theme: "System",
-    icon: <Monitor className="h-4 w-4" />
-  },
-  {
-    theme: "Light",
-    icon: <SunDim className="h-4 w-4" />
-  },
-  {
-    theme: "Dark",
-    icon: <Moon className="h-4 w-4" />
-  }
-]
-
-function ModeToggle() {
-  const { theme: currentTheme, setTheme } = useTheme()
-  const activeThemeItem = appearances.find(({ theme }) => theme.toLowerCase() === currentTheme)
-
-  return (
-    <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            className="p-0 m-0 rounded-full h-auto cursor-pointer outline-none focus-visible:ring-0 text-muted-foreground hover:text-foreground"
-          >
-            {activeThemeItem?.icon}
-          </Button>
-        </DropdownMenuTrigger>
-
-        <DropdownMenuContent className="w-56" collisionPadding={24}>
-          <DropdownMenuLabel>App settings</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuRadioGroup value={currentTheme} onValueChange={setTheme}>
-            {appearances.map(({ theme, icon }) => (
-              <DropdownMenuRadioItem key={theme} value={theme.toLowerCase()}>
-                <div className="flex items-center space-x-2">
-                  <div className="p-1">{icon}</div>
-                  <span>{theme}</span>
-                </div>
-              </DropdownMenuRadioItem>
-            ))}
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </>
-  )
-}
-
-export default dynamic(() => Promise.resolve(ModeToggle), {
-  ssr: false,
-  loading: () => <div className="text-xl h-auto mt-[-8px]">☺️</div>
-})
diff --git a/apps/next-demo/src/components/stream-test.tsx b/apps/next-demo/src/components/stream-test.tsx
deleted file mode 100644
index e99608c..0000000
--- a/apps/next-demo/src/components/stream-test.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client"
-
-import { coreAgentSchema } from "@/schemas/core"
-import { Button } from "@repo/ui/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle
-} from "@repo/ui/components/ui/card"
-import { Loader2 } from "lucide-react"
-import { useJsonStream } from "stream-hooks"
-
-export function StreamTest() {
-  const { data, loading, startStream } = useJsonStream({
-    schema: coreAgentSchema
-  })
-
-  const submitMessage = async () => {
-    try {
-      await startStream({
-        url: "/api/ai/chat",
-        method: "POST",
-        body: {
-          messages: [
-            {
-              content: "yo",
-              role: "user"
-            }
-          ]
-        }
-      })
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  return (
-    <div className="container">
-      <ul className="w-full h-full flex flex-wrap gap-4">
-        {Object.entries(data).map(([key, value]) => {
-          if (key in data) {
-            return (
-              <li key={key} className="">
-                <Card className="w-full">
-                  <CardHeader>
-                    <CardTitle>{key}</CardTitle>
-                    <CardDescription>Card Description</CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    {typeof value === "string" ? <>{value}</> : JSON.stringify(value, null, 4)}
-                  </CardContent>
-                </Card>
-              </li>
-            )
-          }
-        })}
-      </ul>
-      <footer className="fixed bottom-0 left-0 w-full p-6 flex items-center justify-center gap-4">
-        <Button size="lg" onClick={submitMessage}>
-          {loading ? (
-            <div className="flex items-center gap-2">
-              <Loader2 className="animate-spin w-4 h-4" />
-            </div>
-          ) : (
-            "start stream"
-          )}
-        </Button>
-      </footer>
-    </div>
-  )
-}
diff --git a/apps/next-demo/src/config/site.ts b/apps/next-demo/src/config/site.ts
deleted file mode 100644
index 5d850b1..0000000
--- a/apps/next-demo/src/config/site.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export type SiteConfig = typeof siteConfig
-
-export const siteConfig = {
-  name: "Next Instructor",
-  url: "https://hack.dance",
-  description: "",
-  links: {},
-  mainNav: [
-    {
-      label: "JSON Stream",
-      url: "/"
-    },
-    {
-      label: "RSC",
-      url: "/rsc"
-    },
-    {
-      label: "Extraction",
-      url: "/extract"
-    }
-  ]
-}
diff --git a/apps/next-demo/src/constants/index.ts b/apps/next-demo/src/constants/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/apps/next-demo/src/lib/json-to-zod.ts b/apps/next-demo/src/lib/json-to-zod.ts
deleted file mode 100644
index 95280b3..0000000
--- a/apps/next-demo/src/lib/json-to-zod.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { AnyZodObject, z, ZodTypeAny } from "zod"
-
-type JsonValue = string | number | boolean | bigint | JsonArray | JsonObject | null
-interface JsonArray extends Array<JsonValue> {}
-interface JsonObject {
-  [key: string]: JsonValue
-}
-
-const typeMap = new Map<string, () => ZodTypeAny>([
-  ["string", () => z.string()],
-  ["number", () => z.number()],
-  ["bigint", () => z.bigint()],
-  ["boolean", () => z.boolean()],
-  ["undefined", () => z.undefined()],
-  ["function", () => z.function()],
-  ["symbol", () => z.unknown()],
-  ["object-null", () => z.null()]
-])
-
-export const jsonToZod = (jsonString: string): AnyZodObject | Error => {
-  let obj: JsonValue
-  try {
-    obj = JSON.parse(jsonString)
-  } catch (error) {
-    console.error("Error parsing JSON:", error)
-    return new Error("Invalid JSON input")
-  }
-
-  const parse = (obj: JsonValue, seen: JsonObject[]): ZodTypeAny | Error => {
-    if (obj === null) {
-      return z.null()
-    }
-
-    const type = typeof obj
-    const zodSchema = typeMap.get(type)
-
-    if (zodSchema) {
-      return zodSchema()
-    }
-
-    if (Array.isArray(obj)) {
-      if (obj.length === 0) {
-        return z.array(z.unknown())
-      } else {
-        const itemType = parse(obj[0], seen)
-        if (itemType instanceof Error) {
-          return itemType
-        }
-        return z.array(itemType)
-      }
-    }
-
-    if (typeof obj === "object") {
-      if (seen.includes(obj)) {
-        return new Error("Circular objects are not supported")
-      }
-      seen.push(obj)
-
-      const objectSchema: { [key: string]: ZodTypeAny } = {}
-      let error: Error | null = null
-
-      for (const [key, value] of Object.entries(obj)) {
-        const parsedValue = parse(value, seen)
-        if (parsedValue instanceof Error) {
-          error = parsedValue
-          break
-        }
-        objectSchema[key] = parsedValue
-      }
-
-      if (error) {
-        return error
-      }
-
-      return z.object(objectSchema)
-    }
-
-    return z.unknown()
-  }
-
-  const result = parse(obj, [])
-  if (result instanceof Error) {
-    console.error("Error generating Zod schema:", result)
-    return result
-  }
-
-  if (result instanceof z.ZodObject) {
-    return result
-  }
-
-  return new Error("Invalid Zod schema generated")
-}
diff --git a/apps/next-demo/src/lib/utils.ts b/apps/next-demo/src/lib/utils.ts
deleted file mode 100644
index 6889963..0000000
--- a/apps/next-demo/src/lib/utils.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-export function generateBrowserUUID(): string {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
-    const r = (Math.random() * 16) | 0
-    const v = c === "x" ? r : (r & 0x3) | 0x8
-    return v.toString(16)
-  })
-}
diff --git a/apps/next-demo/src/schemas/core.ts b/apps/next-demo/src/schemas/core.ts
deleted file mode 100644
index 3bb18a3..0000000
--- a/apps/next-demo/src/schemas/core.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import z from "zod"
-
-export const coreAgentSchema = z.object({
-  listOfReasonsWhyJavascriptIsBetterThenPython: z.array(z.string()).min(10),
-  listOfReasonsWhyPythonIsBetterThenJavascript: z.array(z.string()).min(1),
-  listOfThingsBetterThenPython: z.array(z.string()).min(10),
-  listOfFeaturesPythonLacks: z
-    .array(
-      z.object({
-        name: z.string(),
-        description: z.string()
-      })
-    )
-    .min(10),
-  finalSummary: z.string(),
-  pointsForPython: z.number().min(0).max(100),
-  pointsForJavascript: z.number().min(0).max(100)
-})
diff --git a/apps/next-demo/src/styles/FantasqueSansMono-Bold.woff2 b/apps/next-demo/src/styles/FantasqueSansMono-Bold.woff2
deleted file mode 100644
index 1d0c4f4..0000000
Binary files a/apps/next-demo/src/styles/FantasqueSansMono-Bold.woff2 and /dev/null differ
diff --git a/apps/next-demo/src/styles/FantasqueSansMono-Regular.woff2 b/apps/next-demo/src/styles/FantasqueSansMono-Regular.woff2
deleted file mode 100644
index 3015d46..0000000
Binary files a/apps/next-demo/src/styles/FantasqueSansMono-Regular.woff2 and /dev/null differ
diff --git a/apps/next-demo/src/styles/fonts.ts b/apps/next-demo/src/styles/fonts.ts
deleted file mode 100644
index 6006458..0000000
--- a/apps/next-demo/src/styles/fonts.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Inconsolata, Inter, Zilla_Slab } from "next/font/google"
-import localFont from "next/font/local"
-
-export const zillaBold = Zilla_Slab({
-  weight: "700",
-  variable: "--font-serif",
-  subsets: ["latin"]
-})
-
-export const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-  preload: true,
-  display: "swap"
-})
-
-export const inconsolata = Inconsolata({
-  variable: "--font-mono",
-  subsets: ["latin"]
-})
-
-export const blunt = localFont({
-  src: "./sp-blunt-regular.woff2",
-  variable: "--font-blunt",
-  preload: true,
-  display: "swap"
-})
-
-export const bluntOutline = localFont({
-  src: "./sp-blunt-outline.woff2",
-  variable: "--font-blunt-outline",
-  preload: true,
-  display: "swap"
-})
-
-export const okineBold = localFont({
-  src: "./made-okine-sans-bold.woff2",
-  variable: "--font-okine-bold",
-  preload: true,
-  display: "swap"
-})
-
-export const okineBoldOutline = localFont({
-  src: "./made-okine-sans-bold-outline.woff2",
-  variable: "--font-okine-bold-outline",
-  preload: true,
-  display: "swap"
-})
-
-export const okineBlack = localFont({
-  src: "./made-okine-sans-black.woff2",
-  variable: "--font-okine-black",
-  preload: true,
-  display: "swap"
-})
-
-export const okine = localFont({
-  src: "./made-okine-sans-regular.woff",
-  variable: "--font-okine",
-  preload: true,
-  display: "swap"
-})
-
-export const okineMedium = localFont({
-  src: "./made-okine-sans-medium.woff",
-  variable: "--font-okine-medium",
-  preload: true,
-  display: "swap"
-})
-
-export const okineBlackOutline = localFont({
-  src: "./made-okine-sans-black-outline.woff2",
-  variable: "--font-okine-black-outline",
-  preload: true,
-  display: "swap"
-})
-
-export const fantasqueRegular = localFont({
-  src: "./FantasqueSansMono-Regular.woff2",
-  variable: "--font-default"
-})
-
-export const fantasqueBold = localFont({
-  src: "./FantasqueSansMono-Bold.woff2",
-  variable: "--font-bold"
-})
-
-export const defaultFontMapper = {
-  default: inter.variable,
-  serif: zillaBold.variable,
-
-  mono: fantasqueRegular.variable,
-  monoBold: fantasqueBold.variable,
-
-  blunt: blunt.variable,
-  bluntOutline: bluntOutline.variable,
-  okineBold: okineBold.variable,
-  okineBoldOutline: okineBoldOutline.variable,
-  okineBlack: okineBlack.variable,
-  okineBlackOutline: okineBlackOutline.variable,
-  okine: okine.variable,
-  okineMedium: okineMedium.variable
-}
diff --git a/apps/next-demo/src/styles/globals.css b/apps/next-demo/src/styles/globals.css
deleted file mode 100644
index 9cbe388..0000000
--- a/apps/next-demo/src/styles/globals.css
+++ /dev/null
@@ -1,180 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 256 31% 88%;
-    --primary-foreground: 222.2 84% 4.9%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 0 0% 93.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-
-    --fl-pink: #e797a9;
-    --fl-blue: #4456a1;
-    --fl-purple: #dcd7ea;
-    --fl-orange: #ea9c71;
-    --fl-white: #ffffff;
-    --fl-green: #41a54b;
-  }
-
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 256 31% 88%;
-    --primary-foreground: 222.2 84% 4.9%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-
-    --fl-white: #000000;
-  }
-}
-
-@layer base {
-  * {
-    /* -webkit-overflow-scrolling: touch; */
-    @apply border-border;
-  }
-
-  body {
-    height: 100%;
-    width: 100%;
-    @apply bg-background text-foreground;
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
-  }
-
-  .border-animate {
-    background: linear-gradient(
-      to top,
-      #dadada,
-      #dadada,
-      #dadada,
-      #00b4ff
-    ); /* Adjust the colors for shimmer effect */
-    animation: spin 2s linear infinite;
-  }
-
-  .texture {
-    background-image: radial-gradient(hsl(var(--muted) / 0.4) 1px, transparent 0),
-      radial-gradient(hsl(var(--muted) / 0.4) 1px, transparent 0);
-    background-size: 12px 12px;
-    background-position:
-      0 0,
-      5px 5px;
-  }
-
-  @supports (-webkit-touch-callout: none) {
-    /* The hacks for Safari */
-    body {
-      max-height: -webkit-fill-available !important;
-    }
-
-    .h-screen {
-      height: -webkit-fill-available !important;
-    }
-
-    .max-h-screen {
-      max-height: -webkit-fill-available !important;
-    }
-  }
-
-  .hack-stack {
-    display: grid;
-    grid-template-columns: 1fr;
-    font-size: inherit;
-  }
-
-  .hack-stack span {
-    grid-row-start: 1;
-    grid-column-start: 1;
-    font-size: inherit;
-    --stack-height: calc(100% / 3 - 1px);
-    --inverse-index: calc(calc(3 - 1) - var(--index));
-    --clip-top: calc(var(--stack-height) * var(--index));
-    --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
-    clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
-    animation:
-      stack 340ms cubic-bezier(0.46, 0.29, 0, 1.24) 1 backwards calc(var(--index) * 120ms),
-      glitch 2.4s ease infinite 2.4s alternate-reverse;
-  }
-
-  .hack-stack span:nth-child(odd) {
-    --glitch-translate: 8px;
-  }
-  .hack-stack span:nth-child(even) {
-    --glitch-translate: -8px;
-  }
-
-  @keyframes stack {
-    0% {
-      opacity: 0;
-      transform: translateX(-50%);
-      text-shadow:
-        -2px 3px 0 red,
-        2px -3px 0 blue;
-    }
-    60% {
-      opacity: 0.5;
-      transform: translateX(50%);
-    }
-    80% {
-      transform: none;
-      opacity: 1;
-      text-shadow:
-        2px -3px 0 red,
-        -2px 3px 0 blue;
-    }
-    100% {
-      text-shadow: none;
-    }
-  }
-
-  @keyframes glitch {
-    0% {
-      text-shadow:
-        -2px 3px 0 red,
-        2px -3px 0 blue;
-      transform: translate(var(--glitch-translate));
-    }
-    2% {
-      text-shadow:
-        2px -3px 0 red,
-        -2px 3px 0 blue;
-    }
-    4%,
-    100% {
-      text-shadow: none;
-      transform: none;
-    }
-  }
-}
diff --git a/apps/next-demo/src/styles/made-okine-sans-black-outline.woff2 b/apps/next-demo/src/styles/made-okine-sans-black-outline.woff2
deleted file mode 100644
index f4a139d..0000000
Binary files a/apps/next-demo/src/styles/made-okine-sans-black-outline.woff2 and /dev/null differ
diff --git a/apps/next-demo/src/styles/made-okine-sans-black.woff2 b/apps/next-demo/src/styles/made-okine-sans-black.woff2
deleted file mode 100644
index e674744..0000000
Binary files a/apps/next-demo/src/styles/made-okine-sans-black.woff2 and /dev/null differ
diff --git a/apps/next-demo/src/styles/made-okine-sans-bold-outline.woff2 b/apps/next-demo/src/styles/made-okine-sans-bold-outline.woff2
deleted file mode 100644
index a33228b..0000000
Binary files a/apps/next-demo/src/styles/made-okine-sans-bold-outline.woff2 and /dev/null differ
diff --git a/apps/next-demo/src/styles/made-okine-sans-bold.woff2 b/apps/next-demo/src/styles/made-okine-sans-bold.woff2
deleted file mode 100644
index bfae35f..0000000
Binary files a/apps/next-demo/src/styles/made-okine-sans-bold.woff2 and /dev/null differ
diff --git a/apps/next-demo/src/styles/made-okine-sans-regular.woff b/apps/next-demo/src/styles/made-okine-sans-regular.woff
deleted file mode 100644
index 4184003..0000000
Binary files a/apps/next-demo/src/styles/made-okine-sans-regular.woff and /dev/null differ
diff --git a/apps/next-demo/src/styles/sp-blunt-outline.woff2 b/apps/next-demo/src/styles/sp-blunt-outline.woff2
deleted file mode 100644
index 758624a..0000000
Binary files a/apps/next-demo/src/styles/sp-blunt-outline.woff2 and /dev/null differ
diff --git a/apps/next-demo/src/styles/sp-blunt-regular.woff2 b/apps/next-demo/src/styles/sp-blunt-regular.woff2
deleted file mode 100644
index 05be909..0000000
Binary files a/apps/next-demo/src/styles/sp-blunt-regular.woff2 and /dev/null differ
diff --git a/apps/next-demo/tailwind.config.ts b/apps/next-demo/tailwind.config.ts
deleted file mode 100644
index e2903af..0000000
--- a/apps/next-demo/tailwind.config.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import sharedConfig from "@repo/tailwind-config/tailwind.config"
-import type { Config } from "tailwindcss"
-
-const config: Pick<Config, "content" | "presets"> = {
-  content: [
-    "../../packages/ui/dist/**/*.{mjs,js,ts,jsx,tsx}",
-    "./**/*.{js,ts,jsx,tsx}",
-    "./pages/**/*.{js,ts,jsx,tsx}"
-  ],
-  presets: [sharedConfig]
-}
-
-export default config
diff --git a/apps/next-demo/tsconfig.json b/apps/next-demo/tsconfig.json
deleted file mode 100644
index 7f8c20a..0000000
--- a/apps/next-demo/tsconfig.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "extends": "@repo/typescript-config/nextjs.json",
-  "compilerOptions": {
-    "lib": ["dom", "esnext"],
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "baseUrl": ".",
-    "declaration": false,
-    "declarationMap": false,
-    "incremental": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true
-  },
-  "include": [
-    "next-env.d.ts",
-    "next.config.js",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "postcss.config.js"
-  ],
-  "exclude": ["node_modules"]
-}
diff --git a/apps/next-demo/tsconfig.lint.json b/apps/next-demo/tsconfig.lint.json
deleted file mode 100644
index 7f8c20a..0000000
--- a/apps/next-demo/tsconfig.lint.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "extends": "@repo/typescript-config/nextjs.json",
-  "compilerOptions": {
-    "lib": ["dom", "esnext"],
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "baseUrl": ".",
-    "declaration": false,
-    "declarationMap": false,
-    "incremental": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true
-  },
-  "include": [
-    "next-env.d.ts",
-    "next.config.js",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "postcss.config.js"
-  ],
-  "exclude": ["node_modules"]
-}
diff --git a/apps/www/.eslintrc.js b/apps/www/.eslintrc.js
index 8c26244..9c0c663 100644
--- a/apps/www/.eslintrc.js
+++ b/apps/www/.eslintrc.js
@@ -15,7 +15,7 @@ module.exports = {
   settings: {
     tailwindcss: {
       callees: ["cn"],
-      config: "tailwind.config.js"
+      config: "tailwind.config.ts"
     }
   }
 }
diff --git a/apps/www/.source/index.d.ts b/apps/www/.source/index.d.ts
new file mode 100644
index 0000000..3eca4d1
--- /dev/null
+++ b/apps/www/.source/index.d.ts
@@ -0,0 +1,3 @@
+import type { GetOutput } from "fumadocs-mdx/config"
+export declare const docs: GetOutput<typeof import("../source.config.ts").docs>
+export declare const meta: GetOutput<typeof import("../source.config.ts").meta>
\ No newline at end of file
diff --git a/apps/www/.source/index.js b/apps/www/.source/index.js
new file mode 100644
index 0000000..fd4185f
--- /dev/null
+++ b/apps/www/.source/index.js
@@ -0,0 +1,23 @@
+import { toRuntime, toRuntimeAsync } from "fumadocs-mdx"
+import * as docs_0 from "../src/content/docs/concepts.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_1 from "../src/content/docs/contributing.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_2 from "../src/content/docs/index.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_3 from "../src/content/docs/instructor-js.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_4 from "../src/content/docs/evalz/api.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_5 from "../src/content/docs/evalz/examples.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_6 from "../src/content/docs/evalz/getting-started.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_7 from "../src/content/docs/evalz/index.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_8 from "../src/content/docs/llm-polyglot/anthropic.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_9 from "../src/content/docs/llm-polyglot/google.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_10 from "../src/content/docs/llm-polyglot/index.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_11 from "../src/content/docs/schema-stream/api-reference.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_12 from "../src/content/docs/schema-stream/getting-started.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_13 from "../src/content/docs/schema-stream/index.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_14 from "../src/content/docs/stream-hooks/api-reference.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_15 from "../src/content/docs/stream-hooks/getting-started.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_16 from "../src/content/docs/stream-hooks/index.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_17 from "../src/content/docs/zod-stream/examples.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_18 from "../src/content/docs/zod-stream/getting-started.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+import * as docs_19 from "../src/content/docs/zod-stream/index.mdx?collection=docs&hash=2e6a4c0c4e1ff8f4eb4e9c63cd435def7b2a4cb435da79461da5fcf7976662fa"
+export const docs = [toRuntime("doc", docs_0, {"path":"concepts.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/concepts.mdx"}), toRuntime("doc", docs_1, {"path":"contributing.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/contributing.mdx"}), toRuntime("doc", docs_2, {"path":"index.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/index.mdx"}), toRuntime("doc", docs_3, {"path":"instructor-js.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/instructor-js.mdx"}), toRuntime("doc", docs_4, {"path":"evalz/api.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/evalz/api.mdx"}), toRuntime("doc", docs_5, {"path":"evalz/examples.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/evalz/examples.mdx"}), toRuntime("doc", docs_6, {"path":"evalz/getting-started.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/evalz/getting-started.mdx"}), toRuntime("doc", docs_7, {"path":"evalz/index.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/evalz/index.mdx"}), toRuntime("doc", docs_8, {"path":"llm-polyglot/anthropic.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/llm-polyglot/anthropic.mdx"}), toRuntime("doc", docs_9, {"path":"llm-polyglot/google.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/llm-polyglot/google.mdx"}), toRuntime("doc", docs_10, {"path":"llm-polyglot/index.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/llm-polyglot/index.mdx"}), toRuntime("doc", docs_11, {"path":"schema-stream/api-reference.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/schema-stream/api-reference.mdx"}), toRuntime("doc", docs_12, {"path":"schema-stream/getting-started.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/schema-stream/getting-started.mdx"}), toRuntime("doc", docs_13, {"path":"schema-stream/index.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/schema-stream/index.mdx"}), toRuntime("doc", docs_14, {"path":"stream-hooks/api-reference.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/stream-hooks/api-reference.mdx"}), toRuntime("doc", docs_15, {"path":"stream-hooks/getting-started.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/stream-hooks/getting-started.mdx"}), toRuntime("doc", docs_16, {"path":"stream-hooks/index.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/stream-hooks/index.mdx"}), toRuntime("doc", docs_17, {"path":"zod-stream/examples.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/zod-stream/examples.mdx"}), toRuntime("doc", docs_18, {"path":"zod-stream/getting-started.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/zod-stream/getting-started.mdx"}), toRuntime("doc", docs_19, {"path":"zod-stream/index.mdx","absolutePath":"/Users/hack/dev/hack-dance/island-ai/apps/www/src/content/docs/zod-stream/index.mdx"})];
+export const meta = [];
\ No newline at end of file
diff --git a/apps/www/.source/source.config.mjs b/apps/www/.source/source.config.mjs
new file mode 100644
index 0000000..d1d1432
--- /dev/null
+++ b/apps/www/.source/source.config.mjs
@@ -0,0 +1,9 @@
+// source.config.ts
+import { defineDocs } from "fumadocs-mdx/config";
+var { docs, meta } = defineDocs({
+  dir: "./src/content/docs"
+});
+export {
+  docs,
+  meta
+};
diff --git a/apps/www/next-env.d.ts b/apps/www/next-env.d.ts
index 4f11a03..40c3d68 100644
--- a/apps/www/next-env.d.ts
+++ b/apps/www/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/apps/www/next.config.mjs b/apps/www/next.config.mjs
index 00021bd..f7b1992 100644
--- a/apps/www/next.config.mjs
+++ b/apps/www/next.config.mjs
@@ -1,10 +1,12 @@
 import fs from "fs"
-import createMDX from "@next/mdx"
+import { createMDX } from "fumadocs-mdx/next"
 import rehypePrettyCode from "rehype-pretty-code"
 import remarkGfm from "remark-gfm"
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  transpilePackages: ["@repo/ui"]
+}
 
 const options = {
   keepBackground: false,
diff --git a/apps/www/package.json b/apps/www/package.json
index 4c91e0d..c6b1575 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -1,32 +1,31 @@
 {
-  "name": "island-docs",
+  "name": "docs",
   "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint . --max-warnings 0"
+    "lint": "eslint . --max-warnings 0",
+    "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
+    "@content-collections/core": "^0.7.3",
+    "@content-collections/mdx": "^0.2.0",
+    "@content-collections/next": "^0.2.4",
+    "@fumadocs/content-collections": "^1.1.5",
     "@mynaui/icons-react": "latest",
-    "@mdx-js/loader": "^2.3.0",
-    "@mdx-js/react": "^2.3.0",
     "@next/eslint-plugin-next": "^14.0.2",
-    "@next/mdx": "^13.4.19",
-    "@repo/constants": "workspace:*",
     "@repo/eslint-config": "workspace:*",
     "@repo/tailwind-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@repo/ui": "workspace:*",
-    "@stackblitz/sdk": "^1.9.0",
-    "@types/eslint": "^8.44.7",
-    "@types/mdx": "^2.0.7",
-    "@types/node": "^17.0.12",
+    "@types/eslint": "^8.56.1",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^20.10.6",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@vercel/analytics": "^1.1.1",
-    "@vercel/kv": "^0.2.2",
     "@vercel/speed-insights": "latest",
     "avvvatars-react": "^0.4.2",
     "class-variance-authority": "^0.7.0",
@@ -35,30 +34,34 @@
     "cookies": "^0.8.0",
     "date-fns": "^2.30.0",
     "framer-motion": "^10.12.18",
+    "fumadocs-core": "^14.5.4",
+    "fumadocs-mdx": "^11.1.2",
+    "fumadocs-typescript": "^3.0.2",
+    "fumadocs-ui": "^14.5.4",
     "js-tiktoken": "^1.0.7",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "latest",
-    "next": "14.2.3",
+    "next": "15.0.3",
     "next-themes": "^0.2.1",
-    "openai": "4.24.1",
+    "openai": "4.47.1",
     "ramda": "^0.29.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-markdown": "^8.0.7",
     "rehype-highlight": "^6.0.0",
     "rehype-pretty-code": "^0.10.1",
     "remark-gfm": "^3.0.1",
     "shiki": "^0.14.4",
-    "sonner": "^1.3.1",
+    "sonner": "*",
     "svix": "^1.13.0",
     "tailwind-merge": "^1.13.2",
-    "tailwindcss": "^3.2.2",
+    "tailwindcss": "^3.3.5",
     "tailwindcss-animate": "^1.0.6",
     "tippy.js": "^6.3.7",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "use-debounce": "^9.0.4",
     "use-immer": "^0.9.0",
     "vaul": "^0.7.9",
-    "zod":  "^3.23.3"
+    "zod": "^3.23.3"
   }
 }
diff --git a/apps/www/public/android-chrome-192x192.png b/apps/www/public/android-chrome-192x192.png
new file mode 100644
index 0000000..bf6235c
Binary files /dev/null and b/apps/www/public/android-chrome-192x192.png differ
diff --git a/apps/www/public/android-chrome-512x512.png b/apps/www/public/android-chrome-512x512.png
new file mode 100644
index 0000000..d25be99
Binary files /dev/null and b/apps/www/public/android-chrome-512x512.png differ
diff --git a/apps/www/public/apple-touch-icon.png b/apps/www/public/apple-touch-icon.png
new file mode 100644
index 0000000..fed7dde
Binary files /dev/null and b/apps/www/public/apple-touch-icon.png differ
diff --git a/apps/www/public/favicon-16x16.png b/apps/www/public/favicon-16x16.png
new file mode 100644
index 0000000..dd79322
Binary files /dev/null and b/apps/www/public/favicon-16x16.png differ
diff --git a/apps/www/public/favicon-32x32.png b/apps/www/public/favicon-32x32.png
new file mode 100644
index 0000000..dd58a4f
Binary files /dev/null and b/apps/www/public/favicon-32x32.png differ
diff --git a/apps/www/public/favicon.ico b/apps/www/public/favicon.ico
index 446e4c5..d9ca3f1 100644
Binary files a/apps/www/public/favicon.ico and b/apps/www/public/favicon.ico differ
diff --git a/apps/www/public/favicon.png b/apps/www/public/favicon.png
deleted file mode 100644
index e7396ad..0000000
Binary files a/apps/www/public/favicon.png and /dev/null differ
diff --git a/apps/www/public/site.webmanifest b/apps/www/public/site.webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/apps/www/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/apps/www/source.config.ts b/apps/www/source.config.ts
new file mode 100644
index 0000000..95a7dda
--- /dev/null
+++ b/apps/www/source.config.ts
@@ -0,0 +1,5 @@
+import { defineDocs } from "fumadocs-mdx/config"
+
+export const { docs, meta } = defineDocs({
+  dir: "./src/content/docs"
+})
diff --git a/apps/www/src/app/api/docs-og/[[...slug]]/FantasqueSansMono-Regular.ttf b/apps/www/src/app/api/docs-og/[[...slug]]/FantasqueSansMono-Regular.ttf
new file mode 100644
index 0000000..fa6be4d
Binary files /dev/null and b/apps/www/src/app/api/docs-og/[[...slug]]/FantasqueSansMono-Regular.ttf differ
diff --git a/apps/next-demo/src/styles/made-okine-sans-medium.woff b/apps/www/src/app/api/docs-og/[[...slug]]/made-okine-sans-medium.woff
similarity index 100%
rename from apps/next-demo/src/styles/made-okine-sans-medium.woff
rename to apps/www/src/app/api/docs-og/[[...slug]]/made-okine-sans-medium.woff
diff --git a/apps/www/src/app/api/docs-og/[[...slug]]/route.tsx b/apps/www/src/app/api/docs-og/[[...slug]]/route.tsx
new file mode 100644
index 0000000..25b8c8c
--- /dev/null
+++ b/apps/www/src/app/api/docs-og/[[...slug]]/route.tsx
@@ -0,0 +1,394 @@
+import { ImageResponse } from "next/og"
+
+import { source } from "@/lib/source"
+
+export const runtime = "edge"
+
+export async function GET(
+  _req: Request,
+  { params }: { params: Promise<{ slug: string[] }> }
+): Promise<Response> {
+  const slug = (await params).slug
+
+  const page = source.getPage(slug)
+  const title = page?.data.title
+  const description = page?.data.description
+
+  if (!title) {
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            fontFamily: "Okine",
+            display: "flex",
+            height: "100%",
+            width: "100%",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "#fdfdfd",
+            flexDirection: "column"
+          }}
+        >
+          <svg width="300" height="300" viewBox="0 0 851.38 851.38" style={{ marginBottom: 20 }}>
+            <g>
+              <circle
+                style={{
+                  fill: "#242420"
+                }}
+                cx="425.69"
+                cy="425.69"
+                r="425.69"
+              />
+              <circle
+                style={{
+                  stroke: "#e1ddd7",
+                  fill: "none"
+                }}
+                strokeWidth="12"
+                cx="425.69"
+                cy="425.69"
+                r="390.01"
+              />
+
+              <g>
+                <rect
+                  style={{
+                    fill: "#e1ddd7"
+                  }}
+                  x="411.91"
+                  y="285.1"
+                  width="33.1"
+                  height="56.2"
+                />
+                <rect
+                  style={{
+                    fill: "#e1ddd7"
+                  }}
+                  x="413.62"
+                  y="363.66"
+                  width="33.1"
+                  height="46.48"
+                />
+              </g>
+              <g>
+                <path
+                  style={{
+                    fill: "#e1ddd7"
+                  }}
+                  d="M397.43,250.45c-18.6,0-33.74,15.14-33.74,33.74s15.14,33.74,33.74,33.74,33.74-15.14,33.74-33.74-15.14-33.74-33.74-33.74Z"
+                />
+                <path
+                  style={{
+                    fill: "#e1ddd7"
+                  }}
+                  d="M458.28,250.45c-18.6,0-33.74,15.14-33.74,33.74s15.14,33.74,33.74,33.74,33.74-15.14,33.74-33.74-15.14-33.74-33.74-33.74Z"
+                />
+                <path
+                  style={{
+                    fill: "#e1ddd7"
+                  }}
+                  d="M681.13,268.74c-1.86-1.77-44.41-41.4-117.16-45.1l37.3-13.93c-3.96-5.83-9.49-9.9-15.03-14.21-.54-.42-.08-1.37.56-1.34,8.18.4,16.17,4.13,23.97,6.34,2.5.71,4.96,1.71,7.29,2.94l46.07-17.2c1.27-.47,2.12-1.67,2.15-3.03.03-1.35-.77-2.59-2.02-3.12-2.47-1.05-61.49-25.48-135.86,2.28-2.81,1.05-5.61,2.17-8.39,3.35l32.01-31.1c-5.17-1.58-10.43-2.26-15.7-3.41-.91-.2-.98-1.77,0-1.91,7.39-1.05,15.5-2.31,23.39-2.15l21.62-21.01c.97-.94,1.27-2.38.75-3.63-.52-1.25-1.9-1.88-3.1-2.05-2.27.03-56.14,1.17-104.15,47.82,0,0,0,0-.01.01l-47.54,46.81-46.4-46.82c-48.01-46.65-101.88-47.79-104.15-47.82-1.33.12-2.58.8-3.1,2.05-.52,1.25-.22,2.69.75,3.63l13.44,13.06c12.09.52,24.01,1.69,34.18,9.46.99.76.48,2.66-.92,2.19-6.11-2.04-14.25-2.06-22.24-.95l36.86,35.82c-2.78-1.18-5.58-2.3-8.39-3.35-74.38-27.77-133.37-3.34-135.86-2.28-1.24.53-2.04,1.77-2.01,3.12.03,1.35.89,2.55,2.15,3.03l26.21,9.79c10.56-3.52,20.61-5.66,24.69-6.04,1.34-.12,1.33,1.74.29,2.15-4.42,1.76-8.55,5.43-12.49,8.55l61.44,22.94c-72.75,3.7-115.3,43.33-117.16,45.1-.98.93-1.29,2.37-.8,3.63.5,1.26,1.73,2.08,3.08,2.08h32.93c.36-.22.73-.45,1.07-.66,13.73-8.48,28.29-14.67,43.06-21.02,1.62-.7,3.03,1.5,1.42,2.43-8.39,4.8-15.5,12.08-22.48,19.25h34.56c10.12-7.37,20.89-13.52,31.17-20.62,1.4-.97,2.89,1.15,1.77,2.29-5.56,5.63-10.53,11.99-15.47,18.33h276.76c-2.36-7.57-4.79-15.05-9.78-21.42-.77-.99.43-2.28,1.4-1.4,7.96,7.14,17.45,14.58,26.11,22.82h36.33c-3.26-8.34-7.23-16.17-13.53-20.53-1.28-.88-.19-2.73,1.21-2.07,10.42,4.92,19.59,13.89,27.6,22.6h47.85c1.35,0,2.57-.82,3.08-2.08.5-1.26.19-2.7-.8-3.63Z"
+                />
+                <rect
+                  style={{
+                    fill: "#e1ddd7"
+                  }}
+                  x="413.36"
+                  y="431.49"
+                  width="35.62"
+                  height="50.01"
+                />
+                <g>
+                  <path
+                    style={{
+                      fill: "#e1ddd7"
+                    }}
+                    d="M204.3,511.84c9.47-.08,18.94-.16,28.41-.23-11.35,33.92-22.7,68.84-34.05,104.77-11.04.92-22.08,2.06-33.12,3.45,12.92-35.97,25.84-71.97,38.76-107.99Z"
+                  />
+                  <path
+                    style={{
+                      fill: "#e1ddd7"
+                    }}
+                    d="M216.42,583.31c9.86-1.43,19.69-2.69,29.49-3.8-1.34,5.37.82,8.85,7.41,8.65,5.24-.15,8.9-2.32,9.74-5.75,1.05-4.16-2.19-5.04-14.41-9.18-15.7-5.1-21.78-13.06-15.94-31.43,6.7-20.76,24.94-32.1,41.08-32.1,17.88-.05,27.21,10.77,25.27,26.2-9.04,1.06-18.12,2.17-27.24,3.35.72-3.28-.63-5.94-4.07-5.88-3.02.05-5.93,2.09-6.77,5.09-1.08,3.87.61,5.68,7.55,7.97,18.74,6.42,29.98,12.43,25.84,32.73-4.66,23.6-23.66,35.59-48.32,36.24-25.93.81-35.62-13.34-29.63-32.1Z"
+                  />
+                  <path
+                    style={{
+                      fill: "#e1ddd7"
+                    }}
+                    d="M316.86,511.17c9.47-.03,18.94-.07,28.41-.09-3.69,23.51-7.38,47.9-11.07,73.17,12.38.38,24.77.89,37.15,1.48-.92,9.93-1.84,19.95-2.76,30.07-23.94-1.23-47.87-2.16-71.81-2.46,6.7-35.98,13.39-70.03,20.09-102.17Z"
+                  />
+                  <path
+                    style={{
+                      fill: "#e1ddd7"
+                    }}
+                    d="M416.68,510.91c10.53-.02,21.06-.04,31.59-.06,11.99,36.84,25.87,75.03,41.65,112.26-11.76-.67-23.52-1.39-35.28-2.13-2.04-5.94-4.03-11.89-5.98-17.84-11.29-.7-22.58-1.41-33.88-2.1-2.04,5.67-4.13,11.34-6.27,17.02-11.76-.72-23.52-1.42-35.29-2.04,16.38-35.45,30.86-69.74,43.45-105.13ZM440.1,576.28c-2.75-9.04-5.4-18.04-7.95-26.98-2.7,8.74-5.49,17.43-8.39,26.1,5.45.29,10.89.59,16.34.88Z"
+                  />
+                  <path
+                    style={{
+                      fill: "#e1ddd7"
+                    }}
+                    d="M487.82,510.78c10.4-.02,20.8-.05,31.19-.07,12.01,20.93,24.86,41.87,38.56,62.29-3.21-20.27-6.42-41.06-9.62-62.38,9.42-.03,18.85-.07,28.27-.11,7.65,40.66,15.3,79.36,22.95,116.07-12.07.04-24.14-.1-36.21-.38-14.37-19.58-27.9-39.8-40.59-60.26,2.28,20.14,4.57,39.86,6.85,59.14-11.04-.47-22.08-1.02-33.12-1.62-2.76-36.5-5.52-74.06-8.28-112.68Z"
+                  />
+                  <path
+                    style={{
+                      fill: "#e1ddd7"
+                    }}
+                    d="M586.84,510.47c10.84-.05,21.68-.11,32.52-.17,31.72.34,59.7,22.61,71.55,54.6,11.79,32.16-3.58,58.42-41.44,60.37-12.64.65-25.28,1.04-37.92,1.22-8.24-36.73-16.47-75.41-24.71-116.02ZM641.04,594.02c16.42-.86,23.21-11.13,18.53-26.46-4.73-15.5-16.57-24.56-31.78-24.13-1.43.04-2.87.09-4.31.13,4.32,17.21,8.63,34.1,12.95,50.68,1.54-.07,3.07-.14,4.61-.22Z"
+                  />
+                  <g>
+                    <path
+                      style={{
+                        fill: "#e1ddd7"
+                      }}
+                      d="M369.97,643.2c12.46.73,24.92,1.51,37.38,2.29,13.23,37.19,28.35,74.42,45.36,109.49-13.61-.06-27.22-.11-40.83-.17-2.2-5.82-4.36-11.68-6.47-17.57-13.11-.25-26.22-.5-39.32-.74-2.48,5.98-5.01,12.01-7.57,18.09-13.61-.06-27.22-.11-40.83-.17,19.32-39.13,36.75-75.65,52.28-111.21ZM396.12,710.43c-3-9.08-5.89-18.19-8.69-27.31-3.36,8.8-6.82,17.65-10.38,26.59,6.36.23,12.71.47,19.07.71Z"
+                    />
+                    <path
+                      style={{
+                        fill: "#e1ddd7"
+                      }}
+                      d="M461.74,648.39c11.2.66,22.41,1.28,33.61,1.84,3.48,36.27,6.96,71.26,10.44,104.95-12.77-.05-25.55-.11-38.32-.16-1.91-34.78-3.82-70.32-5.73-106.62Z"
+                    />
+                  </g>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </div>
+      )
+    )
+  }
+
+  const Mono = fetch(new URL("./FantasqueSansMono-Regular.ttf", import.meta.url)).then(res =>
+    res.arrayBuffer()
+  )
+
+  const Okine = fetch(new URL("./made-okine-sans-medium.woff", import.meta.url)).then(res =>
+    res.arrayBuffer()
+  )
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontFamily: "Okine",
+          display: "flex",
+          height: "100%",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "space-between",
+          letterSpacing: "-.02em",
+          fontWeight: 700,
+          background: "#fdfdfd",
+          flexDirection: "column"
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            padding: "0 50px",
+            color: "#21201c",
+            textAlign: "center",
+            height: 630 - 50 - 50,
+            maxWidth: 1000
+          }}
+        >
+          <svg width="100" height="100" viewBox="0 0 851.38 851.38" style={{ marginBottom: 20 }}>
+            <g>
+              <circle
+                style={{
+                  fill: "#242420"
+                }}
+                cx="425.69"
+                cy="425.69"
+                r="425.69"
+              />
+              <circle
+                style={{
+                  stroke: "#e1ddd7",
+                  fill: "none"
+                }}
+                strokeWidth="12"
+                cx="425.69"
+                cy="425.69"
+                r="390.01"
+              />
+
+              <g>
+                <rect
+                  style={{
+                    fill: "#e1ddd7"
+                  }}
+                  x="411.91"
+                  y="285.1"
+                  width="33.1"
+                  height="56.2"
+                />
+                <rect
+                  style={{
+                    fill: "#e1ddd7"
+                  }}
+                  x="413.62"
+                  y="363.66"
+                  width="33.1"
+                  height="46.48"
+                />
+              </g>
+              <g>
+                <path
+                  style={{
+                    fill: "#e1ddd7"
+                  }}
+                  d="M397.43,250.45c-18.6,0-33.74,15.14-33.74,33.74s15.14,33.74,33.74,33.74,33.74-15.14,33.74-33.74-15.14-33.74-33.74-33.74Z"
+                />
+                <path
+                  style={{
+                    fill: "#e1ddd7"
+                  }}
+                  d="M458.28,250.45c-18.6,0-33.74,15.14-33.74,33.74s15.14,33.74,33.74,33.74,33.74-15.14,33.74-33.74-15.14-33.74-33.74-33.74Z"
+                />
+                <path
+                  style={{
+                    fill: "#e1ddd7"
+                  }}
+                  d="M681.13,268.74c-1.86-1.77-44.41-41.4-117.16-45.1l37.3-13.93c-3.96-5.83-9.49-9.9-15.03-14.21-.54-.42-.08-1.37.56-1.34,8.18.4,16.17,4.13,23.97,6.34,2.5.71,4.96,1.71,7.29,2.94l46.07-17.2c1.27-.47,2.12-1.67,2.15-3.03.03-1.35-.77-2.59-2.02-3.12-2.47-1.05-61.49-25.48-135.86,2.28-2.81,1.05-5.61,2.17-8.39,3.35l32.01-31.1c-5.17-1.58-10.43-2.26-15.7-3.41-.91-.2-.98-1.77,0-1.91,7.39-1.05,15.5-2.31,23.39-2.15l21.62-21.01c.97-.94,1.27-2.38.75-3.63-.52-1.25-1.9-1.88-3.1-2.05-2.27.03-56.14,1.17-104.15,47.82,0,0,0,0-.01.01l-47.54,46.81-46.4-46.82c-48.01-46.65-101.88-47.79-104.15-47.82-1.33.12-2.58.8-3.1,2.05-.52,1.25-.22,2.69.75,3.63l13.44,13.06c12.09.52,24.01,1.69,34.18,9.46.99.76.48,2.66-.92,2.19-6.11-2.04-14.25-2.06-22.24-.95l36.86,35.82c-2.78-1.18-5.58-2.3-8.39-3.35-74.38-27.77-133.37-3.34-135.86-2.28-1.24.53-2.04,1.77-2.01,3.12.03,1.35.89,2.55,2.15,3.03l26.21,9.79c10.56-3.52,20.61-5.66,24.69-6.04,1.34-.12,1.33,1.74.29,2.15-4.42,1.76-8.55,5.43-12.49,8.55l61.44,22.94c-72.75,3.7-115.3,43.33-117.16,45.1-.98.93-1.29,2.37-.8,3.63.5,1.26,1.73,2.08,3.08,2.08h32.93c.36-.22.73-.45,1.07-.66,13.73-8.48,28.29-14.67,43.06-21.02,1.62-.7,3.03,1.5,1.42,2.43-8.39,4.8-15.5,12.08-22.48,19.25h34.56c10.12-7.37,20.89-13.52,31.17-20.62,1.4-.97,2.89,1.15,1.77,2.29-5.56,5.63-10.53,11.99-15.47,18.33h276.76c-2.36-7.57-4.79-15.05-9.78-21.42-.77-.99.43-2.28,1.4-1.4,7.96,7.14,17.45,14.58,26.11,22.82h36.33c-3.26-8.34-7.23-16.17-13.53-20.53-1.28-.88-.19-2.73,1.21-2.07,10.42,4.92,19.59,13.89,27.6,22.6h47.85c1.35,0,2.57-.82,3.08-2.08.5-1.26.19-2.7-.8-3.63Z"
+                />
+                <rect
+                  style={{
+                    fill: "#e1ddd7"
+                  }}
+                  x="413.36"
+                  y="431.49"
+                  width="35.62"
+                  height="50.01"
+                />
+                <g>
+                  <path
+                    style={{
+                      fill: "#e1ddd7"
+                    }}
+                    d="M204.3,511.84c9.47-.08,18.94-.16,28.41-.23-11.35,33.92-22.7,68.84-34.05,104.77-11.04.92-22.08,2.06-33.12,3.45,12.92-35.97,25.84-71.97,38.76-107.99Z"
+                  />
+                  <path
+                    style={{
+                      fill: "#e1ddd7"
+                    }}
+                    d="M216.42,583.31c9.86-1.43,19.69-2.69,29.49-3.8-1.34,5.37.82,8.85,7.41,8.65,5.24-.15,8.9-2.32,9.74-5.75,1.05-4.16-2.19-5.04-14.41-9.18-15.7-5.1-21.78-13.06-15.94-31.43,6.7-20.76,24.94-32.1,41.08-32.1,17.88-.05,27.21,10.77,25.27,26.2-9.04,1.06-18.12,2.17-27.24,3.35.72-3.28-.63-5.94-4.07-5.88-3.02.05-5.93,2.09-6.77,5.09-1.08,3.87.61,5.68,7.55,7.97,18.74,6.42,29.98,12.43,25.84,32.73-4.66,23.6-23.66,35.59-48.32,36.24-25.93.81-35.62-13.34-29.63-32.1Z"
+                  />
+                  <path
+                    style={{
+                      fill: "#e1ddd7"
+                    }}
+                    d="M316.86,511.17c9.47-.03,18.94-.07,28.41-.09-3.69,23.51-7.38,47.9-11.07,73.17,12.38.38,24.77.89,37.15,1.48-.92,9.93-1.84,19.95-2.76,30.07-23.94-1.23-47.87-2.16-71.81-2.46,6.7-35.98,13.39-70.03,20.09-102.17Z"
+                  />
+                  <path
+                    style={{
+                      fill: "#e1ddd7"
+                    }}
+                    d="M416.68,510.91c10.53-.02,21.06-.04,31.59-.06,11.99,36.84,25.87,75.03,41.65,112.26-11.76-.67-23.52-1.39-35.28-2.13-2.04-5.94-4.03-11.89-5.98-17.84-11.29-.7-22.58-1.41-33.88-2.1-2.04,5.67-4.13,11.34-6.27,17.02-11.76-.72-23.52-1.42-35.29-2.04,16.38-35.45,30.86-69.74,43.45-105.13ZM440.1,576.28c-2.75-9.04-5.4-18.04-7.95-26.98-2.7,8.74-5.49,17.43-8.39,26.1,5.45.29,10.89.59,16.34.88Z"
+                  />
+                  <path
+                    style={{
+                      fill: "#e1ddd7"
+                    }}
+                    d="M487.82,510.78c10.4-.02,20.8-.05,31.19-.07,12.01,20.93,24.86,41.87,38.56,62.29-3.21-20.27-6.42-41.06-9.62-62.38,9.42-.03,18.85-.07,28.27-.11,7.65,40.66,15.3,79.36,22.95,116.07-12.07.04-24.14-.1-36.21-.38-14.37-19.58-27.9-39.8-40.59-60.26,2.28,20.14,4.57,39.86,6.85,59.14-11.04-.47-22.08-1.02-33.12-1.62-2.76-36.5-5.52-74.06-8.28-112.68Z"
+                  />
+                  <path
+                    style={{
+                      fill: "#e1ddd7"
+                    }}
+                    d="M586.84,510.47c10.84-.05,21.68-.11,32.52-.17,31.72.34,59.7,22.61,71.55,54.6,11.79,32.16-3.58,58.42-41.44,60.37-12.64.65-25.28,1.04-37.92,1.22-8.24-36.73-16.47-75.41-24.71-116.02ZM641.04,594.02c16.42-.86,23.21-11.13,18.53-26.46-4.73-15.5-16.57-24.56-31.78-24.13-1.43.04-2.87.09-4.31.13,4.32,17.21,8.63,34.1,12.95,50.68,1.54-.07,3.07-.14,4.61-.22Z"
+                  />
+                  <g>
+                    <path
+                      style={{
+                        fill: "#e1ddd7"
+                      }}
+                      d="M369.97,643.2c12.46.73,24.92,1.51,37.38,2.29,13.23,37.19,28.35,74.42,45.36,109.49-13.61-.06-27.22-.11-40.83-.17-2.2-5.82-4.36-11.68-6.47-17.57-13.11-.25-26.22-.5-39.32-.74-2.48,5.98-5.01,12.01-7.57,18.09-13.61-.06-27.22-.11-40.83-.17,19.32-39.13,36.75-75.65,52.28-111.21ZM396.12,710.43c-3-9.08-5.89-18.19-8.69-27.31-3.36,8.8-6.82,17.65-10.38,26.59,6.36.23,12.71.47,19.07.71Z"
+                    />
+                    <path
+                      style={{
+                        fill: "#e1ddd7"
+                      }}
+                      d="M461.74,648.39c11.2.66,22.41,1.28,33.61,1.84,3.48,36.27,6.96,71.26,10.44,104.95-12.77-.05-25.55-.11-38.32-.16-1.91-34.78-3.82-70.32-5.73-106.62Z"
+                    />
+                  </g>
+                </g>
+              </g>
+            </g>
+          </svg>
+          {title && (
+            <div
+              style={{
+                fontSize: 54,
+                fontWeight: 900,
+                marginBottom: 12,
+                lineHeight: 1.1,
+                fontFamily: "Okine",
+                textTransform: "uppercase"
+              }}
+            >
+              {title}
+            </div>
+          )}
+          {description && (
+            <div
+              style={{
+                fontFamily: "Mono",
+                fontSize: 26,
+                fontWeight: 400,
+                marginBottom: 0
+              }}
+            >
+              {description}
+            </div>
+          )}
+        </div>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            width: "100%",
+            padding: "12px"
+          }}
+        >
+          <span></span>
+          <span
+            style={{
+              fontSize: 25,
+              fontWeight: 700,
+              background: "#21201c",
+              color: "#fdfdfd",
+              padding: "4px 10px",
+              textTransform: "uppercase"
+            }}
+          >
+            ISLAND.HACK.DANCE/DOCS/{slug?.join("/")}
+          </span>
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        {
+          name: "Mono",
+          data: await Mono,
+          style: "normal",
+          weight: 400
+        },
+        {
+          name: "Okine",
+          data: await Okine,
+          style: "normal",
+          weight: 400
+        }
+      ]
+    }
+  )
+}
diff --git a/apps/www/src/app/api/search/route.ts b/apps/www/src/app/api/search/route.ts
new file mode 100644
index 0000000..3bafe9c
--- /dev/null
+++ b/apps/www/src/app/api/search/route.ts
@@ -0,0 +1,5 @@
+import { createFromSource } from "fumadocs-core/search/server"
+
+import { source } from "@/lib/source"
+
+export const { GET } = createFromSource(source)
diff --git a/apps/www/src/app/docs/[...slug]/layout.tsx b/apps/www/src/app/docs/[...slug]/layout.tsx
deleted file mode 100644
index 64bf17b..0000000
--- a/apps/www/src/app/docs/[...slug]/layout.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { notFound } from "next/navigation"
-
-import { docs } from "@/config/docs"
-
-import { DocSidebar } from "../sidebar"
-
-export default async function DocLayout({
-  children,
-  params: { slug }
-}: {
-  children: React.ReactNode
-  params: { slug: string[] }
-}) {
-  const parsedSlug = slug?.[0]?.split("#")[0]
-  const packageConfig = docs[parsedSlug]
-
-  if (!packageConfig) {
-    return notFound()
-  }
-
-  return (
-    <>
-      <div className="flex  h-full flex-1 w-full relative">
-        <DocSidebar packageConfig={packageConfig} />
-
-        <div className="w-full flex-grow pl-2 border-l-[1px] border-accent h-full max-w-full">
-          <main className="h-full w-full overflow-y-auto max-w-full pb-4">{children}</main>
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/apps/www/src/app/docs/[...slug]/page.tsx b/apps/www/src/app/docs/[...slug]/page.tsx
deleted file mode 100644
index fe76ce4..0000000
--- a/apps/www/src/app/docs/[...slug]/page.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// apps/www/src/app/docs/[...slug]/page.tsx
-import dynamic from "next/dynamic"
-import Link from "next/link"
-import { notFound } from "next/navigation"
-import { Loader2 } from "lucide-react"
-
-import { docs } from "@/config/docs"
-import { cn } from "@/lib/utils"
-
-const allDocs = Object.values(docs)
-const allPages = allDocs.flatMap(pkg =>
-  pkg.sections.flatMap(section =>
-    section.pages.map(page => ({
-      ...page,
-      package: pkg.title
-    }))
-  )
-)
-
-export async function generateStaticParams() {
-  return allPages.map(page => ({
-    params: {
-      slug: page.slug.split("/")
-    }
-  }))
-}
-
-export default async function Page({ params: { slug } }: { params: { slug: string[] } }) {
-  const doc = allPages.find(doc => doc.slug === slug.join("/"))
-
-  if (!doc) {
-    return notFound()
-  }
-
-  const Content = dynamic(() => import(`@/docs/${doc.id}.mdx`), {
-    loading: () => (
-      <div className="mt-[200px] h-full w-full flex justify-center items-center">
-        <div className="flex items-center gap-2">
-          <Loader2 className="h-4 w-4 animate-spin" />
-          Loading...
-        </div>
-      </div>
-    )
-  })
-
-  return (
-    <div className="p-4 min-h-full">
-      <header className="border-b-[1px] border-b-accent pb-4 mb-8 pl-12 lg:pl-0">
-        {[...slug].slice(0, -1).map((part, index) => {
-          return (
-            <span key={`${part}-${index}`}>
-              {!!index && <span className="text-sm text-muted-foreground">{` / `}</span>}
-              <span
-                key={part}
-                className={cn(
-                  "text-sm text-muted-foreground hover:underline cursor-pointer capitalize"
-                )}
-              >
-                <Link href={`/docs/${slug.slice(0, slug.indexOf(part) + 1).join("/")}`}>
-                  {part.replace(/-/g, " ")}
-                </Link>
-              </span>
-            </span>
-          )
-        })}
-        <span className="text-sm text-muted-foreground">{` / `}</span>
-        <span className="text-sm font-semibold">{doc.title}</span>
-      </header>
-
-      <div className="px-2 min-h-full">
-        <Content />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/src/app/docs/[[...slug]]/page.tsx b/apps/www/src/app/docs/[[...slug]]/page.tsx
new file mode 100644
index 0000000..43bd231
--- /dev/null
+++ b/apps/www/src/app/docs/[[...slug]]/page.tsx
@@ -0,0 +1,46 @@
+import { notFound } from "next/navigation"
+import { createTypeTable } from "fumadocs-typescript/ui"
+import defaultMdxComponents from "fumadocs-ui/mdx"
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page"
+
+import { metadataImage } from "@/lib/metadata"
+import { source } from "@/lib/source"
+
+const { AutoTypeTable } = createTypeTable()
+
+export default async function Page(props: { params: Promise<{ slug?: string[] }> }) {
+  const params = await props.params
+  const page = source.getPage(params.slug)
+
+  console.log(page, params.slug)
+
+  if (!page) notFound()
+
+  const MDX = page.data.body
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDX components={{ ...defaultMdxComponents, AutoTypeTable }} />
+      </DocsBody>
+    </DocsPage>
+  )
+}
+
+export async function generateStaticParams() {
+  return source.generateParams()
+}
+
+export async function generateMetadata(props: { params: Promise<{ slug?: string[] }> }) {
+  const params = await props.params
+  const page = source.getPage(params.slug)
+
+  if (!page) notFound()
+
+  return metadataImage.withImage(page.slugs, {
+    title: page.data.title,
+    description: page.data.description
+  })
+}
diff --git a/apps/www/src/app/docs/layout.tsx b/apps/www/src/app/docs/layout.tsx
new file mode 100644
index 0000000..fde09a6
--- /dev/null
+++ b/apps/www/src/app/docs/layout.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from "react"
+import Link from "next/link"
+import { baseOptions } from "@/app/layout.config"
+import { DocsLayout } from "fumadocs-ui/layouts/docs"
+
+import { source } from "@/lib/source"
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <DocsLayout
+      tree={source.pageTree}
+      {...baseOptions}
+      sidebar={{
+        footer: (
+          <div className="py-4">
+            <Link
+              className="hover:underline uppercase font-okineBold flex flex-col"
+              href="https://hack.dance"
+              target="_blank"
+            >
+              <span className="text-muted-foreground text-xs">Built in Boston by</span>
+              <span className="text-sm font-okineBold">HACK DANCE</span>
+            </Link>
+          </div>
+        )
+      }}
+    >
+      {children}
+    </DocsLayout>
+  )
+}
diff --git a/apps/www/src/app/docs/sidebar.tsx b/apps/www/src/app/docs/sidebar.tsx
deleted file mode 100644
index 8dda090..0000000
--- a/apps/www/src/app/docs/sidebar.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { Button } from "@repo/ui/components/ui/button"
-import { List, XIcon } from "lucide-react"
-
-import { DocType } from "@/config/docs"
-import { cn } from "@/lib/utils"
-import { DocNav } from "@/components/doc-nav"
-
-export function DocSidebar({ packageConfig }: { packageConfig: DocType }) {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <div className="lg:hidden absolute left-4 p-2">
-        <Button variant="secondary" size="icon" className="shadow-xl border">
-          <List className="h-4 w-4" onClick={() => setOpen(!open)} />
-        </Button>
-      </div>
-      <aside
-        className={cn(
-          "shadow-xl lg:shadow-none top-0 border-r border-accent lg:border-transparent z-50 pl-4 pt-6 min-w-[280px] h-full absolute lg:static lg:block bg-background transition-all",
-          {
-            "translate-x-0": open,
-            "lg:translate-x-0 -translate-x-full": !open
-          }
-        )}
-      >
-        <Button variant="secondary" size="icon" className="absolute right-4 top-3 z-20 lg:hidden">
-          <XIcon className="h-4 w-4" onClick={() => setOpen(!open)} />
-        </Button>
-        <DocNav packageConfig={packageConfig} />
-      </aside>
-    </>
-  )
-}
diff --git a/apps/www/src/app/layout.config.tsx b/apps/www/src/app/layout.config.tsx
new file mode 100644
index 0000000..c1563f6
--- /dev/null
+++ b/apps/www/src/app/layout.config.tsx
@@ -0,0 +1,15 @@
+import { BaseLayoutProps } from "fumadocs-ui/layouts/shared"
+
+import { LogoMark } from "@/components/logo-mark"
+
+export const baseOptions: BaseLayoutProps = {
+  githubUrl: "https://github.com/hack-dance/island-ai",
+  nav: {
+    title: (
+      <>
+        <LogoMark size={20} />
+        <h1 className="text-2xl font-okineBold uppercase">Island AI</h1>
+      </>
+    )
+  }
+}
diff --git a/apps/www/src/app/layout.tsx b/apps/www/src/app/layout.tsx
index d0298fa..ddc4ca9 100644
--- a/apps/www/src/app/layout.tsx
+++ b/apps/www/src/app/layout.tsx
@@ -2,15 +2,11 @@ import "@/styles/globals.css"
 
 import { ReactNode } from "react"
 import { Metadata } from "next"
-import Link from "next/link"
 import { Analytics } from "@vercel/analytics/react"
 import { SpeedInsights } from "@vercel/speed-insights/next"
 
 import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
-import { LogoMark } from "@/components/logo-mark"
-import { MobileNav } from "@/components/mobile-nav"
-import ModeToggle from "@/components/mode-toggle"
 import { defaultFontMapper } from "@/styles/fonts"
 
 import Providers from "./providers"
@@ -21,18 +17,34 @@ export const metadata: Metadata = {
   metadataBase: new URL(siteConfig.url),
   openGraph: {
     title: "Island AI",
-    description: "",
+    description:
+      "Island AI is a collection of low-level utilities and high-level tools for handling structured data streams from LLMs.",
     url: "https://island.hack.dance",
     siteName: "Island AI",
     locale: "en_US",
     type: "website",
-    images: []
+    images: [
+      {
+        url: "/api/docs-og/home-page",
+        width: 1200,
+        height: 630,
+        alt: "Island AI"
+      }
+    ]
   },
   twitter: {
     title: "Island AI",
     card: "summary_large_image",
-    creator: "@dimitrikennedy"
+    creator: "@dimitrikennedy",
+    description:
+      "Island AI is a collection of low-level utilities and high-level tools for handling structured data streams from LLMs.",
+    images: ["/api/docs-og/home-page"]
   },
+  alternates: {
+    canonical: "https://island.hack.dance"
+  },
+  keywords: ["open source", "ai", "llm", "production"],
+  authors: [{ name: "Dimitri Kennedy" }],
   icons: {
     shortcut: "/favicon.ico"
   }
@@ -50,61 +62,10 @@ export default function RootLayout({ children }: { children: ReactNode }) {
     <html
       lang="en"
       suppressHydrationWarning
-      className={cn(
-        ...Object.values(defaultFontMapper),
-        "antialiased overflow-hidden h-screen w-screen font-inter"
-      )}
+      className={cn(...Object.values(defaultFontMapper), "antialiased font-inter")}
     >
-      <body className="antialiased bg-background">
-        <Providers>
-          <>
-            <div
-              className="h-screen w-screen flex flex-col overflow-hidden bg-background"
-              vaul-drawer-wrapper=""
-            >
-              <header className="w-full py-4 px-4 h-[64px] backdrop-blur-md bg-background/90 dark:bg-background/50 border-b border-accent/70">
-                <div className="flex justify-between items-center">
-                  <div className="flex items-center lg:gap-6 gap-2">
-                    <div className="flex items-center">
-                      <div className="md:hidden">
-                        <MobileNav />
-                      </div>
-                      <h1 className="text-lg font-okineBold overflow-hidden whitespace-nowrap">
-                        <Link
-                          href="/"
-                          className="flex items-center gap-1 tracking-widest text-2xl text-foreground/90"
-                        >
-                          <LogoMark size={24} />
-                        </Link>
-                      </h1>
-                      <nav className="ml-12 hidden md:flex items-center gap-8">
-                        {siteConfig.mainNav.map(({ label, url }) => (
-                          <Link
-                            className="text-xs hover:underline font-mono uppercase tracking-widest text-muted-foreground hover:text-foreground"
-                            href={url}
-                            key={label}
-                          >
-                            {label}
-                          </Link>
-                        ))}
-                      </nav>
-                    </div>
-                  </div>
-
-                  <div className="gap-4 items-center flex">
-                    <div className="ml-[-2px] mt-[4px] flex items-center gap-6">
-                      <ModeToggle />
-                    </div>
-                  </div>
-                </div>
-              </header>
-
-              <main className="h-[calc(100dvh-64px)] w-full flex-1 flex flex-col overflow-hidden texture">
-                {children}
-              </main>
-            </div>
-          </>
-        </Providers>
+      <body className="antialiased bg-background flex flex-col min-h-screen">
+        <Providers>{children}</Providers>
         <Analytics />
         <SpeedInsights />
       </body>
diff --git a/apps/www/src/app/page.tsx b/apps/www/src/app/page.tsx
index 2ef8db1..b6fa9b1 100644
--- a/apps/www/src/app/page.tsx
+++ b/apps/www/src/app/page.tsx
@@ -13,17 +13,14 @@ export default async function Page() {
           <BadgeLogo size={186} />
 
           <p className="sm:text-center mt-12 mb-6 font-mono">
-            A TypeScript toolkit for building dynamic ai-generated UI with structured, streaming,
-            immediately safe-to-parse JSON from OpenAI or AnyScale.
+            A TypeScript toolkit for building dynamic LLM generated UI with structured, streaming,
+            immediately safe-to-parse JSON.
           </p>
 
           <div className="flex items-center gap-2">
-            <Link href="/docs/overview/introduction">
+            <Link href="/docs">
               <Button>Read the docs</Button>
             </Link>
-            <Link href="https://dashboard-demo.novy.work/">
-              <Button variant="secondary">Live demo</Button>
-            </Link>
           </div>
         </div>
       </div>
diff --git a/apps/www/src/app/providers.tsx b/apps/www/src/app/providers.tsx
index cf75da6..8be3b21 100644
--- a/apps/www/src/app/providers.tsx
+++ b/apps/www/src/app/providers.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { createContext, Dispatch, ReactNode, SetStateAction, useState } from "react"
+import { RootProvider } from "fumadocs-ui/provider"
 import { ThemeProvider, useTheme } from "next-themes"
 import { Toaster } from "sonner"
 
@@ -30,7 +31,7 @@ export default function Providers({ children }: { children: ReactNode }) {
         }}
       >
         <ToasterProvider />
-        <div>{children}</div>
+        <RootProvider>{children}</RootProvider>
       </AppContext.Provider>
     </ThemeProvider>
   )
diff --git a/apps/www/src/components/doc-nav.tsx b/apps/www/src/components/doc-nav.tsx
deleted file mode 100644
index 9ed5e26..0000000
--- a/apps/www/src/components/doc-nav.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import Link from "next/link"
-import { ScrollArea } from "@repo/ui/components/ui/scroll-area"
-import { ArrowRight } from "lucide-react"
-
-import { docs, DocType } from "@/config/docs"
-
-export function DocNav({ packageConfig }: { packageConfig: DocType }) {
-  return (
-    <>
-      <ScrollArea className="h-full">
-        <div className="pb-6">
-          <div className="flex flex-col gap-2">
-            {Object.values(docs).map(({ title, indexRoute }) => (
-              <>
-                <Link
-                  key={title}
-                  href={`/docs/${indexRoute}`}
-                  className="flex items-center gap-2 text-xs hover:underline"
-                >
-                  <h3 className="text-sm font-okineBold tracking-widest uppercase">{title}</h3>
-                  {packageConfig.title !== title && <ArrowRight className="h-4 w-4" />}
-                </Link>
-                {packageConfig.title === title && (
-                  <>
-                    {packageConfig.sections.map((docSection, index) => (
-                      <div key={index} className="ml-2">
-                        <h3 className="mb-2 text-sm font-semibold">{docSection.title}</h3>
-                        <div className="grid grid-flow-row auto-rows-max text-sm mb-2">
-                          {docSection.pages.map(doc => (
-                            <div key={doc.title}>
-                              {doc?.titlePage ? (
-                                <h4 className="mb-1 rounded-md px-2 text-sm font-semibold">
-                                  <Link
-                                    replace={false}
-                                    className="hover:underline"
-                                    href={`/docs/${doc.slug}`}
-                                  >
-                                    {doc.title}
-                                  </Link>
-                                </h4>
-                              ) : (
-                                <Link
-                                  replace={false}
-                                  scroll={false}
-                                  className="font-medium text-muted-foreground group flex w-full items-center rounded-md border border-transparent px-3 py-1 hover:underline"
-                                  href={`/docs/${doc.slug}`}
-                                >
-                                  {doc.title}
-                                </Link>
-                              )}
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    ))}
-                  </>
-                )}
-              </>
-            ))}
-          </div>
-        </div>
-      </ScrollArea>
-    </>
-  )
-}
diff --git a/apps/www/src/components/floating-chat.tsx b/apps/www/src/components/floating-chat.tsx
deleted file mode 100644
index f129dee..0000000
--- a/apps/www/src/components/floating-chat.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-"use client"
-
-import React, { ReactNode } from "react"
-import ReactMarkdown from "react-markdown"
-import rehypeHighlight from "rehype-highlight"
-
-import { cn } from "@/lib/utils"
-
-interface MessageWrapperProps {
-  children: ReactNode
-  className?: string
-  message: Message
-}
-
-type Message = {
-  role: string
-  content: string
-  createdAt?: string
-}
-
-const MessageWrapper = ({ children, className = "", message }: MessageWrapperProps) => {
-  return (
-    <div
-      className={cn(`mb-2 rounded-xl bg-accent p-4 shadow-xl relative`, className, {
-        "bg-mint-8": message.role === "assistant"
-      })}
-    >
-      {children}
-    </div>
-  )
-}
-
-const MdxContent = ({ content, className = "" }: { content: string; className?: string }) => {
-  return (
-    <ReactMarkdown
-      linkTarget="_blank"
-      rehypePlugins={[rehypeHighlight]}
-      className={cn("react-markdown-message prose dark:prose-invert", className)}
-      components={{
-        a: ({ ...props }) => {
-          return <a {...props} className="text-sky-8 hover:text-sky-9 underline" />
-        },
-        img: ({ src }) => {
-          return (
-            <div className="">
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
-                src={`/api/images/fallback?imageUri=${src}`}
-                className="max-w-full rounded-lg shadow-md md:max-w-sm"
-                alt="message image"
-              />
-            </div>
-          )
-        }
-      }}
-    >
-      {content}
-    </ReactMarkdown>
-  )
-}
-
-export function FloatingChat({ messages }: { messages: Message[] }) {
-  return (
-    <>
-      <ul>
-        {messages.map((message, i) => {
-          return (
-            <li key={message?.createdAt ?? i} className={`mb-4`}>
-              <MessageWrapper message={message}>
-                <MdxContent content={message.content} />
-              </MessageWrapper>
-            </li>
-          )
-        })}
-      </ul>
-    </>
-  )
-}
diff --git a/apps/www/src/components/mdx-components.tsx b/apps/www/src/components/mdx-components.tsx
index 517244a..ac1d2db 100644
--- a/apps/www/src/components/mdx-components.tsx
+++ b/apps/www/src/components/mdx-components.tsx
@@ -2,10 +2,7 @@ import Link from "next/link"
 
 import { cn } from "@/lib/utils"
 
-import { Shell } from "./shell"
-
 export const customComponents = {
-  Shell: Shell,
   h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
     <h1
       className={cn(
@@ -18,7 +15,7 @@ export const customComponents = {
   h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
     <h2
       className={cn(
-        "peer mt-8 text-2xl font-okineBold tracking-tight first:mt-0 uppercase tracking-widest pb-4 mb-4 border-b border-accent",
+        "peer mt-8 text-2xl font-okineBold  first:mt-0 uppercase tracking-widest pb-4 mb-4 border-b border-accent",
         className
       )}
       {...props}
diff --git a/apps/www/src/components/shell.tsx b/apps/www/src/components/shell.tsx
deleted file mode 100644
index 574ad0f..0000000
--- a/apps/www/src/components/shell.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client"
-
-import { useEffect, useRef } from "react"
-import sdk from "@stackblitz/sdk"
-
-export function Shell() {
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (ref?.current) {
-      sdk.embedProjectId("embed", "sdk-open-embed-sb-projects-ts", {
-        forceEmbedLayout: true,
-        openFile: "index.ts",
-        view: "editor",
-        hideExplorer: true,
-        hideNavigation: true,
-        devToolsHeight: 33
-      })
-    }
-  }, [ref])
-  return <div className="my-6 block" ref={ref} id="embed" />
-}
diff --git a/apps/www/src/docs/overview-concepts-partial-streaming.mdx b/apps/www/src/content/docs/concepts.mdx
similarity index 87%
rename from apps/www/src/docs/overview-concepts-partial-streaming.mdx
rename to apps/www/src/content/docs/concepts.mdx
index f09f381..6c84c7d 100644
--- a/apps/www/src/docs/overview-concepts-partial-streaming.mdx
+++ b/apps/www/src/content/docs/concepts.mdx
@@ -1,15 +1,17 @@
+---
+title:   Concepts
+---
 
-# Partial Streaming in Island AI
 
-## Understanding Partial Streaming
+## Partial Streaming
 - **Concept**: Partial streaming in Island AI involves processing and utilizing parts of a JSON data stream as they become available. This method uses the defined Zod schema to understand the final output and stubs out the model, allowing incremental streaming of data into the JSON structure.
 
 - **Benefits**: This approach enables safe reading and parsing of data, enhancing real-time responsiveness. Applications can react immediately to data as it streams in, making the user experience more dynamic.
 
-## Implementation in Island AI
 
-### OpenAI SSE and Stream Conversion
+### SSE and Stream Conversion
 - **OpenAI's SSE Response**: OpenAI provides its completion responses using Server-Sent Events (SSE). Island AI efficiently consumes this SSE data, facilitating the processing of real-time updates from the server.
+
 - **Conversion to Async Generators or ReadableStreams**: The response from OpenAI's SSE is typically handled as an Async Generator. In Island AI, tools like `OAIStream` in `zod-stream` are used to convert this Async Generator into a ReadableStream when necessary. This conversion is particularly useful for integrating into server-side environments like Next.js edge routes on Vercel or for applying custom transformations.
 
 ### Efficient and Responsive UIs
@@ -20,9 +22,11 @@
 
 ### Complex Streaming Scenarios and Back Pressure
 - **Back Pressure Management**: In streaming data, 'back pressure' refers to the build-up of data at a point in the system where it's being consumed slower than it's being produced. Island AI's choice of using ReadableStreams over SSE is partly influenced by the need to manage back pressure effectively. Streams provide a more controlled way of handling large volumes of data, preventing potential bottlenecks and ensuring a smooth data flow.
+
 - **Stream vs. SSE**: While SSE is ideal for sending real-time updates, it doesn't inherently handle back pressure. ReadableStreams, on the other hand, offer mechanisms to control the flow of data, making them more suitable for scenarios where large amounts of data need to be processed or where the rate of data generation varies significantly.
+
 - **Incremental Validation and Efficiency**: Along with handling back pressure, Island AI's streaming approach allows for incremental validation of data as it's received. This contributes to the efficiency and responsiveness of applications, particularly important in real-time, data-intensive scenarios.
 
-Island AI's streaming capabilities, with their focus on back pressure management and incremental validation, are designed to ensure efficient and seamless integration of streaming data into AI-driven applications, whether it's for processing large data sets or updating UI components in real time.
+Our focus on back pressure management and incremental validation, is designed to ensure efficient and seamless integration of streaming data into AI-driven applications, whether it's for processing large data sets or updating UI components in real time.
 
 
diff --git a/apps/www/src/content/docs/contributing.mdx b/apps/www/src/content/docs/contributing.mdx
new file mode 100644
index 0000000..6dd5e32
--- /dev/null
+++ b/apps/www/src/content/docs/contributing.mdx
@@ -0,0 +1,5 @@
+---
+title:   Contributing
+---
+
+We welcome contributions! Check out our issues labeled as `good-first-issue` or `help-wanted`.
diff --git a/apps/www/src/content/docs/evalz/api.mdx b/apps/www/src/content/docs/evalz/api.mdx
new file mode 100644
index 0000000..8666dde
--- /dev/null
+++ b/apps/www/src/content/docs/evalz/api.mdx
@@ -0,0 +1,233 @@
+---
+title:   API Reference
+---
+
+### createEvaluator
+
+Creates a basic evaluator for assessing AI-generated content based on custom criteria.
+
+**Parameters**
+
+- `client`: OpenAI instance.
+- `model`: OpenAI model to use (e.g., "gpt-4o").
+- `evaluationDescription`: Description guiding the evaluation criteria.
+- `resultsType`: Type of results to return ("score" or "binary").
+- `messages`: Additional messages to include in the OpenAI API call.
+
+**Example**
+
+```typescript
+import { createEvaluator } from "evalz";
+import OpenAI from "openai";
+
+const oai = new OpenAI({
+  apiKey: process.env["OPENAI_API_KEY"],
+  organization: process.env["OPENAI_ORG_ID"]
+});
+
+const evaluator = createEvaluator({
+  client: oai,
+  model: "gpt-4-turbo",
+  evaluationDescription: "Rate the relevance from 0 to 1."
+});
+
+const result = await evaluator({ data: [{ prompt: "Discuss the importance of AI.", completion: "AI is important for future technology.", expectedCompletion: "AI is important for future technology." }] });
+console.log(result.scoreResults);
+```
+
+### createAccuracyEvaluator
+
+Creates an evaluator that assesses string similarity using a hybrid approach of Levenshtein distance (factual similarity) and semantic embeddings (semantic similarity), with customizable weights.
+
+**Parameters**
+
+- `model` (optional): OpenAI.Embeddings.EmbeddingCreateParams["model"] - The OpenAI embedding model to use defaults to `"text-embedding-3-small"`.
+
+- `weights` (optional): An object specifying the weights for factual and semantic similarities. Defaults to `{` factual: 0.5, semantic: 0.5 }.
+
+**Example**
+
+```typescript
+import { createAccuracyEvaluator } from "evalz";
+
+const evaluator = createAccuracyEvaluator({
+  model: "text-embedding-3-small",
+  weights: { factual: 0.4, semantic: 0.6 }
+});
+
+
+const data = [
+  { completion: "Einstein was born in Germany in 1879.", expectedCompletion: "Einstein was born in 1879 in Germany." }
+];
+
+const result = await evaluator({ data });
+console.log(result.scoreResults);
+```
+
+### createWeightedEvaluator
+
+Combines multiple evaluators with specified weights for a comprehensive assessment.
+
+**Parameters**
+
+- `evaluators`: An object mapping evaluator names to evaluator functions.
+
+- `weights`: An object mapping evaluator names to their corresponding weights.
+
+**Example**
+
+```typescript
+import { createWeightedEvaluator } from "evalz";
+
+const weightedEvaluator = createWeightedEvaluator({
+  evaluators: {
+    relevance: relevanceEval(),
+    fluency: fluencyEval(),
+    completeness: completenessEval()
+  },
+  weights: {
+    relevance: 0.25,
+    fluency: 0.25,
+    completeness: 0.5
+  }
+});
+
+const result = await weightedEvaluator({ data: yourResponseData });
+console.log(result.scoreResults);
+```
+
+### Create Composite Weighted Evaluation
+
+A  weighted evaluator that incorporates various evaluation types:
+**Example**
+
+```typescript
+import { createEvaluator, createAccuracyEvaluator, createContextEvaluator, createWeightedEvaluator }  from "evalz"
+
+const oai = new OpenAI({
+  apiKey: process.env["OPENAI_API_KEY"],
+  organization: process.env["OPENAI_ORG_ID"]
+});
+
+
+const relevanceEval = () => createEvaluator({
+  client: oai,
+  model: "gpt-4-turbo",
+  evaluationDescription: "Please rate the relevance of the response from 0 (not at all relevant) to 1 (highly relevant), considering whether the AI stayed on topic and provided a reasonable answer."
+});
+
+const distanceEval = () => createAccuracyEvaluator({
+  weights: { factual: 0.5, semantic: 0.5 }
+});
+
+const semanticEval = () => createAccuracyEvaluator({
+  weights: { factual: 0.0, semantic: 1.0 }
+});
+
+const fluencyEval = () => createEvaluator({
+  client: oai,
+  model: "gpt-4-turbo",
+  evaluationDescription: "Please rate the completeness of the response from 0 (not at all complete) to 1 (completely answered), considering whether the AI addressed all parts of the prompt."
+});
+
+const completenessEval = () => createEvaluator({
+  client: oai,
+  model: "gpt-4-turbo",
+  evaluationDescription: "Please rate the completeness of the response from 0 (not at all complete) to 1 (completely answered), considering whether the AI addressed all parts of the prompt."
+});
+
+const contextEntitiesRecallEval = () => createContextEvaluator({ type: "entities-recall" });
+const contextPrecisionEval = () => createContextEvaluator({ type: "precision" });
+const contextRecallEval = () => createContextEvaluator({ type: "recall" });
+const contextRelevanceEval = () => createContextEvaluator({ type: "relevance" });
+
+
+const compositeWeightedEvaluator = createWeightedEvaluator({
+  evaluators: {
+    relevance: relevanceEval(),
+    fluency: fluencyEval(),
+    completeness: completenessEval(),
+    accuracy: createAccuracyEvaluator({ weights: { factual: 0.6, semantic: 0.4 } }),
+    contextPrecision: contextPrecisionEval()
+  },
+  weights: {
+    relevance: 0.2,
+    fluency: 0.2,
+    completeness: 0.2,
+    accuracy: 0.2,
+    contextPrecision: 0.2
+  }
+});
+
+
+const data = [
+  {
+    prompt: "When was the first super bowl?",
+    completion: "The first super bowl was held on January 15, 1967.",
+    expectedCompletion: "The first superbowl was held on January 15, 1967.",
+    contexts: ["The First AFL–NFL World Championship Game was an American football game played on January 15, 1967, at the Los Angeles Memorial Coliseum in Los Angeles."],
+    groundTruth: "The first superbowl was held on January 15, 1967."
+  }
+];
+
+
+const result = await compositeWeightedEvaluator({ data });
+console.log(result.scoreResults);
+```
+
+### createContextEvaluator
+
+Creates an evaluator that assesses context-based criteria such as relevance, precision, recall, and entities recall.
+
+**Parameters**
+
+- `type`: "entities-recall" | "precision" | "recall" | "relevance" - The type of context evaluation to perform.
+
+- `model` (optional): OpenAI.Embeddings.EmbeddingCreateParams["model"] - The OpenAI embedding model to use. Defaults to `"text-embedding-3-small"`.
+
+**Example**
+
+```typescript
+import { createContextEvaluator } from "evalz";
+
+
+const entitiesRecallEvaluator = createContextEvaluator({ type: "entities-recall" });
+
+
+const precisionEvaluator = createContextEvaluator({ type: "precision" });
+
+
+const recallEvaluator = createContextEvaluator({ type: "recall" });
+
+
+const relevanceEvaluator = createContextEvaluator({ type: "relevance" });
+
+
+const data = [
+  { 
+    prompt: "When was the first super bowl?", 
+    completion: "The first superbowl was held on January 15, 1967.", 
+    groundTruth: "The first superbowl was held on January 15, 1967.", 
+    contexts: [
+      "The First AFL–NFL World Championship Game was an American football game played on January 15, 1967 at the Los Angeles Memorial Coliseum in Los Angeles.",
+      "This first championship game is retroactively referred to as Super Bowl I."
+    ]
+  }
+];
+
+
+const result1 = await entitiesRecallEvaluator({ data });
+console.log(result1.scoreResults);
+
+
+const result2 = await precisionEvaluator({ data });
+console.log(result2.scoreResults);
+
+
+const result3 = await recallEvaluator({ data });
+console.log(result3.scoreResults);
+
+
+const result4 = await relevanceEvaluator({ data });
+console.log(result4.scoreResults);
+```
diff --git a/apps/www/src/content/docs/evalz/examples.mdx b/apps/www/src/content/docs/evalz/examples.mdx
new file mode 100644
index 0000000..3f8051f
--- /dev/null
+++ b/apps/www/src/content/docs/evalz/examples.mdx
@@ -0,0 +1,323 @@
+---
+title:   Examples
+---
+
+### RAG System Evaluation
+
+Evaluate RAG responses for relevance to source documents and factual accuracy.
+
+```typescript
+const ragEvaluator = createWeightedEvaluator({
+  evaluators: {
+    // Check if named entities (people, places, dates) are preserved
+    entities: createContextEvaluator({ 
+      type: "entities-recall" 
+    }),
+    // Verify factual correctness using embedding similarity
+    precision: createContextEvaluator({ 
+      type: "precision" 
+    }),
+    // Check if all relevant information is included
+    recall: createContextEvaluator({ 
+      type: "recall" 
+    }),
+    // Assess overall contextual relevance
+    relevance: createEvaluator({
+      client: oai,
+      model: "gpt-4-turbo",
+      evaluationDescription: "Rate how well the response uses the context"
+    })
+  },
+  weights: {
+    entities: 0.2,   // Lower weight as it's more supplementary
+    precision: 0.3,  // Higher weight for factual correctness
+    recall: 0.3,     // Higher weight for information coverage
+    relevance: 0.2   // Balance of overall relevance
+  }
+});
+
+const result = await ragEvaluator({
+  data: [{
+    prompt: "What are the key financial metrics?",
+    completion: "Revenue grew 25% to $10M in Q3 2023",
+    groundTruth: "Q3 2023 saw 25% revenue growth to $10M",
+    contexts: [
+      "In Q3 2023, company revenue increased 25% to $10M",
+      "Operating margins improved to 15%"
+    ]
+  }]
+});
+
+/* Example output:
+{
+  results: [{
+    score: 0.85,
+    scores: [
+      { score: 1.0, evaluator: "entities" },    // Perfect entity preservation
+      { score: 0.92, evaluator: "precision" },  // High factual accuracy
+      { score: 0.75, evaluator: "recall" },     // Missing margin information
+      { score: 0.78, evaluator: "relevance" }   // Good contextual relevance
+    ],
+    item: {
+      prompt: "What were the key financial metrics?",
+      completion: "Revenue grew 25% to $10M in Q3 2023",
+      groundTruth: "Q3 2023 saw 25% revenue growth to $10M",
+      contexts: [...]
+    }
+  }],
+  scoreResults: {
+    value: 0.85,
+    individual: {
+      entities: 1.0,
+      precision: 0.92,
+      recall: 0.75,
+      relevance: 0.78
+    }
+  }
+}
+*/
+```
+
+### Content Moderation Evaluation
+
+Binary evaluation for content policy compliance, useful for automated content filtering.
+
+```typescript
+const moderationEvaluator = createEvaluator({
+  client: oai,
+  model: "gpt-4-turbo",
+  resultsType: "binary",  // Changes output to true/false counts
+  evaluationDescription: "Score 1 if content follows all policies (safe, respectful, appropriate), 0 if any violation exists"
+});
+
+const moderationResult = await moderationEvaluator({
+  data: [
+    {
+      prompt: "Describe our product benefits",
+      completion: "Our product helps improve productivity",
+      expectedCompletion: "Professional product description"
+    },
+    {
+      prompt: "Respond to negative review",
+      completion: "Your complaint is totally wrong...",
+      expectedCompletion: "Professional response to feedback"
+    }
+  ]
+});
+
+/* Example output:
+{
+  results: [
+    { score: 1, item: { ... } },  // Meets content guidelines
+    { score: 0, item: { ... } }   // Violates professional tone policy
+  ],
+  binaryResults: {
+    trueCount: 1,
+    falseCount: 1
+  }
+}
+*/
+```
+
+### Student Answer Evaluation
+
+Demonstrates weighted evaluation combining exact matching, semantic understanding, and qualitative assessment.
+
+```typescript
+const gradingEvaluator = createWeightedEvaluator({
+  evaluators: {
+    // Check for presence of required terminology
+    keyTerms: createAccuracyEvaluator({
+      weights: { 
+        factual: 0.9,   // High weight on exact matches
+        semantic: 0.1    // Low weight on similar terms
+      }
+    }),
+    // Assess conceptual understanding
+    understanding: createAccuracyEvaluator({
+      weights: { 
+        factual: 0.2,   // Low weight on exact matches
+        semantic: 0.8    // High weight on meaning similarity
+      }
+    }),
+    // Evaluate answer quality like a human grader
+    quality: createEvaluator({
+      client: oai,
+      model: "gpt-4-turbo",
+      evaluationDescription: "Rate answer completeness and clarity 0-1"
+    })
+  },
+  weights: {
+    keyTerms: 0.3,      // Balance terminology requirements
+    understanding: 0.4,  // Emphasize conceptual grasp
+    quality: 0.3        // Consider overall presentation
+  }
+});
+
+const gradingResult = await gradingEvaluator({
+  data: [{
+    prompt: "Explain how photosynthesis works",
+    completion: "Plants convert sunlight into chemical energy through chlorophyll",
+    expectedCompletion: "Photosynthesis is the process where plants use chlorophyll to convert sunlight, water, and CO2 into glucose and oxygen"
+  }]
+});
+
+/* Example output:
+{
+  results: [{
+    score: 0.78,  // Overall grade (78%)
+    scores: [
+      { 
+        score: 0.65,           // Missing key terms (water, CO2, glucose)
+        evaluator: "keyTerms",
+        evaluatorType: "accuracy"
+      },
+      { 
+        score: 0.90,           // Shows good conceptual understanding
+        evaluator: "understanding",
+        evaluatorType: "accuracy"
+      },
+      { 
+        score: 0.75,           // Clear but not comprehensive
+        evaluator: "quality",
+        evaluatorType: "model-graded"
+      }
+    ],
+    item: { ... }
+  }],
+  scoreResults: {
+    value: 0.78,
+    individual: {
+      keyTerms: 0.65,
+      understanding: 0.90,
+      quality: 0.75
+    }
+  }
+}
+*/
+```
+
+### Chatbot Quality Assessment
+
+Monitor chatbot response quality across multiple dimensions.
+
+```typescript
+const chatbotEvaluator = createWeightedEvaluator({
+  evaluators: {
+    // Evaluate response appropriateness
+    relevance: createEvaluator({
+      client: oai,
+      model: "gpt-4-turbo",
+      evaluationDescription: "Rate how well the response addresses the user's query"
+    }),
+    // Check response tone
+    tone: createEvaluator({
+      client: oai,
+      model: "gpt-4-turbo",
+      evaluationDescription: "Rate the professionalism and friendliness of the response"
+    }),
+    // Verify against known good responses
+    accuracy: createAccuracyEvaluator({
+      weights: { semantic: 0.8, factual: 0.2 }
+    })
+  },
+  weights: {
+    relevance: 0.4,
+    tone: 0.3,
+    accuracy: 0.3
+  }
+});
+
+const result = await chatbotEvaluator({
+  data: [{
+    prompt: "How do I reset my password?",
+    completion: "You can reset your password by clicking the 'Forgot Password' link on the login page.",
+    expectedCompletion: "To reset your password, use the 'Forgot Password' option at login.",
+    contexts: ["Previous support interactions"]
+  }]
+});
+```
+
+### Content Generation Pipeline
+
+Evaluate generated content for quality and accuracy.
+
+```typescript
+const contentEvaluator = createWeightedEvaluator({
+  evaluators: {
+    // Check writing quality
+    quality: createEvaluator({
+      client: oai,
+      model: "gpt-4-turbo",
+      evaluationDescription: "Rate clarity, structure, and engagement"
+    }),
+    // Verify factual accuracy
+    factCheck: createAccuracyEvaluator({
+      weights: { factual: 1.0 }
+    }),
+    // Assess source usage
+    citations: createContextEvaluator({ 
+      type: "entities-recall" 
+    })
+  },
+  weights: {
+    quality: 0.4,
+    factCheck: 0.4,
+    citations: 0.2
+  }
+});
+
+const result = await contentEvaluator({
+  data: [{
+    prompt: "Write an article about renewable energy trends",
+    completion: "Solar and wind power installations increased by 30% in 2023...",
+    contexts: [
+      "Global renewable energy deployment grew by 30% year-over-year",
+      "Solar and wind remained the fastest-growing sectors"
+    ],
+    groundTruth: "Renewable energy saw significant growth, led by solar and wind"
+  }]
+});
+```
+
+### Document Processing System
+
+Evaluate document extraction and summarization quality.
+
+```typescript
+const documentEvaluator = createWeightedEvaluator({
+  evaluators: {
+    // Verify key information extraction
+    extraction: createContextEvaluator({
+      type: "recall"
+    }),
+    // Check summary quality
+    summary: createEvaluator({
+      client: oai,
+      model: "gpt-4-turbo",
+      evaluationDescription: "Rate conciseness and completeness"
+    }),
+    // Validate against reference summary
+    accuracy: createAccuracyEvaluator({
+      weights: { semantic: 0.6, factual: 0.4 }
+    })
+  },
+  weights: {
+    extraction: 0.4,
+    summary: 0.3,
+    accuracy: 0.3
+  }
+});
+
+const result = await documentEvaluator({
+  data: [{
+    prompt: "Summarize the quarterly report",
+    completion: "Q3 revenue grew 25% YoY, driven by new product launches...",
+    contexts: [
+      "Revenue increased 25% compared to Q3 2022",
+      "Growth primarily attributed to successful product launches"
+    ],
+    groundTruth: "Q3 saw 25% YoY revenue growth due to new products"
+  }]
+});
+```
diff --git a/apps/www/src/content/docs/evalz/getting-started.mdx b/apps/www/src/content/docs/evalz/getting-started.mdx
new file mode 100644
index 0000000..557a5fc
--- /dev/null
+++ b/apps/www/src/content/docs/evalz/getting-started.mdx
@@ -0,0 +1,173 @@
+---
+title:   Getting Started
+---
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+## Installation
+
+Install `evalz` using your preferred package manager:
+
+<Tabs items={['bun', 'npm', 'pnpm']} persist>
+  <Tab value="bun">
+    ```bash
+    bun add evalz openai zod @instructor-ai/instructor
+    ```
+  </Tab>
+  <Tab value="npm">
+    ```bash
+    npm install evalz openai zod @instructor-ai/instructor
+    ```
+  </Tab>
+  <Tab value="pnpm">
+    ```bash
+    pnpm add evalz openai zod @instructor-ai/instructor
+    ```
+  </Tab>
+</Tabs>
+
+## Evaluator Types and Data Requirements
+
+### Context Evaluator Types
+
+```typescript
+type ContextEvaluatorType = "entities-recall" | "precision" | "recall" | "relevance";
+```
+
+- **entities-recall**: Measures how well the completion captures named entities from the context
+- **precision**: Evaluates how accurate the completion is compared to the context
+- **recall**: Measures how much relevant information from the context is included
+- **relevance**: Assesses how well the completion relates to the context
+
+### Data Requirements by Evaluator Type
+
+#### Model-Graded Evaluator
+
+```typescript
+type ModelGradedData = {
+  prompt: string;
+  completion: string;
+  expectedCompletion?: string;  // Ignored for this evaluator type
+}
+
+const modelEval = createEvaluator({
+  client: oai,
+  model: "gpt-4-turbo",
+  evaluationDescription: "Rate the response"
+});
+
+
+await modelEval({
+  data: [{
+    prompt: "What is TypeScript?",
+    completion: "TypeScript is a typed superset of JavaScript"
+  }]
+});
+```
+
+#### Accuracy Evaluator
+
+```typescript
+type AccuracyData = {
+  completion: string;
+  expectedCompletion: string;  // Required for accuracy comparison
+}
+
+const accuracyEval = createAccuracyEvaluator({
+  weights: { factual: 0.5, semantic: 0.5 }
+});
+
+await accuracyEval({
+  data: [{
+    completion: "TypeScript adds types to JavaScript",
+    expectedCompletion: "TypeScript is JavaScript with type support"
+  }]
+});
+```
+
+#### Context Evaluator
+
+```typescript
+type ContextData = {
+  prompt: string;
+  completion: string;
+  groundTruth: string;   // Required for context evaluation
+  contexts: string[];    // Required for context evaluation
+}
+
+// Entities Recall - Checks named entities
+const entitiesEval = createContextEvaluator({ 
+  type: "entities-recall" 
+});
+
+// Precision - Checks accuracy against context
+const precisionEval = createContextEvaluator({ 
+  type: "precision" 
+});
+
+// Recall - Checks information coverage
+const recallEval = createContextEvaluator({ 
+  type: "recall" 
+});
+
+// Relevance - Checks contextual relevance
+const relevanceEval = createContextEvaluator({ 
+  type: "relevance" 
+});
+
+// Example usage
+const data = {
+  prompt: "What did the CEO say about Q3?",
+  completion: "CEO Jane Smith reported 15% growth in Q3 2023",
+  groundTruth: "The CEO announced strong Q3 performance",
+  contexts: [
+    "CEO Jane Smith presented Q3 results",
+    "Company saw 15% revenue growth in Q3 2023"
+  ]
+};
+
+await entitiesEval({ data: [data] });   // Focuses on "Jane Smith", "Q3", "2023"
+await precisionEval({ data: [data] });  // Checks factual accuracy
+await recallEval({ data: [data] });     // Checks information completeness
+await relevanceEval({ data: [data] });  // Checks contextual relevance
+```
+
+#### Composite Evaluation
+
+```typescript
+// Can combine different evaluator types
+const compositeEval = createWeightedEvaluator({
+  evaluators: {
+    entities: createContextEvaluator({ type: "entities-recall" }),
+    accuracy: createAccuracyEvaluator({
+      weights: { 
+        factual: 0.9,   // High weight on exact matches
+        semantic: 0.1    // Low weight on similar terms
+      }
+    }),
+    quality: createEvaluator({
+      client: oai,
+      model: "gpt-4-turbo",
+      evaluationDescription: "Rate quality"
+    })
+  },
+  weights: {
+    entities: 0.3,
+    accuracy: 0.4,
+    quality: 0.3
+  }
+});
+
+// Must provide all required fields for each evaluator type
+await compositeEval({
+  data: [{
+    prompt: "Summarize the earnings call",
+    completion: "CEO Jane Smith announced 15% growth",
+    expectedCompletion: "The CEO reported strong growth",
+    groundTruth: "CEO discussed Q3 performance",
+    contexts: [
+      "CEO Jane Smith presented Q3 results",
+      "Company saw 15% growth in Q3 2023"
+    ]
+  }]
+});
+```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/evalz/index.mdx b/apps/www/src/content/docs/evalz/index.mdx
new file mode 100644
index 0000000..6d83518
--- /dev/null
+++ b/apps/www/src/content/docs/evalz/index.mdx
@@ -0,0 +1,100 @@
+---
+title:   Evalz
+description: Structured evaluation toolkit for LLM outputs
+---
+
+`evalz` provides structured evaluation tools for assessing LLM outputs across multiple dimensions. Built with TypeScript and integrated with OpenAI and Instructor, it enables both automated evaluation and human-in-the-loop assessment workflows.
+
+
+### Key Capabilities
+
+- 🎯 **Model-Graded Evaluation**: Leverage LLMs to assess response quality
+- 📊 **Accuracy Measurement**: Compare outputs using semantic and lexical similarity
+- 🔍 **Context Validation**: Evaluate responses against source materials
+- ⚖️ **Composite Assessment**: Combine multiple evaluation types with custom weights
+
+
+
+## When to Use evalz
+
+### Model-Graded Evaluation
+
+Provides human-like judgment for subjective criteria that can't be measured through pure text comparison
+
+Use when you need qualitative assessment of responses:
+
+- Evaluating RAG system output quality
+- Assessing chatbot response appropriateness
+- Validating content generation
+- Measuring response coherence and fluency
+
+```typescript
+const relevanceEval = createEvaluator({
+  client: oai,
+  model: "gpt-4-turbo",
+  evaluationDescription: "Rate relevance and quality from 0-1"
+});
+```
+
+### Accuracy Evaluation
+
+Gives objective measurements for cases where exact or semantic matching is important
+
+Use for comparing outputs against known correct answers:
+
+- Question-answering system validation
+- Translation accuracy measurement
+- Fact-checking systems
+- Test case validation
+
+```typescript
+const accuracyEval = createAccuracyEvaluator({
+  weights: { 
+    factual: 0.6,  // Levenshtein distance weight
+    semantic: 0.4   // Embedding similarity weight
+  }
+});
+```
+
+### Context Evaluation
+
+Measures how well outputs utilize and stay faithful to provided context
+
+Use for assessing responses against source materials:
+
+- RAG system faithfulness
+- Document summarization accuracy
+- Knowledge extraction validation
+- Information retrieval quality
+
+```typescript
+const contextEval = createContextEvaluator({ 
+  type: "precision"  // or "recall", "relevance", "entities-recall" 
+});
+```
+
+### Composite Evaluation
+
+Provides balanced assessment across multiple dimensions of quality
+
+Use for comprehensive system assessment:
+
+- Production LLM monitoring
+- A/B testing prompts and models
+- Quality assurance pipelines
+- Multi-factor response validation
+
+```typescript
+const compositeEval = createWeightedEvaluator({
+  evaluators: {
+    relevance: relevanceEval(),
+    accuracy: accuracyEval(),
+    context: contextEval()
+  },
+  weights: {
+    relevance: 0.4,
+    accuracy: 0.4,
+    context: 0.2
+  }
+});
+```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/index.mdx b/apps/www/src/content/docs/index.mdx
new file mode 100644
index 0000000..30cd5ff
--- /dev/null
+++ b/apps/www/src/content/docs/index.mdx
@@ -0,0 +1,286 @@
+---
+title:   Island AI
+description: Island AI is a collection of low-level utilities and high-level tools for handling structured data streams from Large Language Models (LLMs). The packages range from basic JSON streaming parsers to complete LLM clients, giving you the flexibility to build custom solutions or use pre-built integrations.
+---
+
+
+## Core Packages
+
+### 1. schema-stream [⇨](/docs/schema-stream)
+
+A foundational streaming JSON parser that enables immediate data access through structured stubs.
+
+**Key Features:**
+
+- Streaming JSON parser with typed outputs
+- Default value support
+- Path completion tracking
+- Nested object and array support
+
+```typescript
+import { SchemaStream } from "schema-stream";
+import { z } from "zod";
+
+// Define complex nested schemas
+const schema = z.object({
+  layer1: z.object({
+    layer2: z.object({
+      value: z.string(),
+      layer3: z.object({
+        layer4: z.object({
+          layer5: z.string()
+        })
+      })
+    })
+  }),
+  someArray: z.array(z.object({
+    someString: z.string(),
+    someNumber: z.number()
+  }))
+});
+
+// Get a readable stream of json (from an api or otherwise)
+async function getSomeStreamOfJson(
+  jsonString: string
+): Promise<{ body: ReadableStream }> {
+  const stream = new ReadableStream({
+    start(controller) {
+      const encoder = new TextEncoder()
+      const jsonBytes = encoder.encode(jsonString)
+
+      for (let i = 0; i < jsonBytes.length; ) {
+        const chunkSize = Math.floor(Math.random() * 5) + 2
+        const chunk = jsonBytes.slice(i, i + chunkSize)
+        controller.enqueue(chunk)
+        i += chunkSize
+      }
+      controller.close()
+    },
+  })
+
+  return { body: stream }
+}
+
+
+// Create parser with completion tracking
+const parser = new SchemaStream(schema, {
+  onKeyComplete({ completedPaths }) {
+    console.log('Completed paths:', completedPaths);
+  }
+});
+
+// Get the readabale stream to parse
+const readableStream = await getSomeStreamOfJson(
+  `{"someString": "Hello schema-stream", "someNumber": 42000000}`
+)
+
+// Parse streaming data
+const stream = parser.parse();
+readableStream.pipeThrough(stream);
+
+// Get typed results
+const reader = stream.readable.getReader();
+const decoder = new TextDecoder()
+let result = {}
+let complete = false
+
+while (true) {
+  const { value, done } = await reader.read();
+  complete = done
+  
+  if (complete) break;
+  
+  result = JSON.parse(decoder.decode(value));
+  // result is fully typed based on schema
+}
+```
+
+### 2. zod-stream [⇨](/docs/zod-stream)
+
+Extends schema-stream with OpenAI integration and Zod-specific features.
+
+**Key Features:**
+
+- OpenAI completion streaming
+- Multiple response modes (TOOLS, FUNCTIONS, JSON, etc.)
+- Schema validation during streaming
+
+```typescript
+import { OAIStream } from "zod-stream";
+import { withResponseModel } from "zod-stream";
+import { z } from "zod";
+
+// Define extraction schema
+const ExtractionSchema = z.object({
+  users: z.array(z.object({
+    name: z.string(),
+    handle: z.string(),
+    twitter: z.string()
+  })).min(3),
+  location: z.string(),
+  budget: z.number()
+});
+
+// Configure OpenAI params with schema
+const params = withResponseModel({
+  response_model: { 
+    schema: ExtractionSchema, 
+    name: "Extract" 
+  },
+  params: {
+    messages: [{ role: "user", content: textBlock }],
+    model: "gpt-4"
+  },
+  mode: "TOOLS"
+});
+
+// Stream completions
+const stream = OAIStream({ 
+  res: await oai.chat.completions.create({
+    ...params,
+    stream: true
+  })
+});
+
+// Process results
+const client = new ZodStream();
+const extractionStream = await client.create({
+  completionPromise: () => stream,
+  response_model: { 
+    schema: ExtractionSchema, 
+    name: "Extract" 
+  }
+});
+
+for await (const data of extractionStream) {
+  console.log('Progressive update:', data);
+}
+```
+
+### 3. stream-hooks [⇨](/docs/stream-hooks)
+
+React hooks for consuming streaming JSON data with Zod schema validation.
+
+**Key Features:**
+
+- Ready-to-use React hooks
+- Automatic schema validation
+- Progress tracking
+- Error handling
+
+```typescript
+import { useJsonStream } from "stream-hooks";
+
+function DataViewer() {
+  const { loading, startStream, data, error } = useJsonStream({
+    schema: ExtractionSchema,
+    onReceive: (update) => {
+      console.log('Progressive update:', update);
+    },
+  });
+
+  return (
+    <div>
+      {loading && <div>Loading...</div>}
+      {error && <div>Error: {error.message}</div>}
+      {data && (
+        <pre>{JSON.stringify(data, null, 2)}</pre>
+      )}
+      <button onClick={() => startStream({
+        url: "/api/extract",
+        method: "POST",
+        body: { text: "..." }
+      })}>
+        Start Extraction
+      </button>
+    </div>
+  );
+}
+```
+
+### 4. evalz [⇨](/docs/evalz)
+
+Structured evaluation tools for assessing LLM outputs across multiple dimensions. Built with TypeScript and integrated with OpenAI and Instructor, it enables both automated evaluation and human-in-the-loop assessment workflows.
+
+**Key Features:**
+
+- 🎯 **Model-Graded Evaluation**: Leverage LLMs to assess response quality
+- 📊 **Accuracy Measurement**: Compare outputs using semantic and lexical similarity
+- 🔍 **Context Validation**: Evaluate responses against source materials
+- ⚖️ **Composite Assessment**: Combine multiple evaluation types with custom weights
+
+```typescript
+// Combine different evaluator types
+const compositeEval = createWeightedEvaluator({
+  evaluators: {
+    entities: createContextEvaluator({ type: "entities-recall" }),
+    accuracy: createAccuracyEvaluator({
+      weights: { 
+        factual: 0.9,   // High weight on exact matches
+        semantic: 0.1    // Low weight on similar terms
+      }
+    }),
+    quality: createEvaluator({
+      client: oai,
+      model: "gpt-4-turbo",
+      evaluationDescription: "Rate quality"
+    })
+  },
+  weights: {
+    entities: 0.3,
+    accuracy: 0.4,
+    quality: 0.3
+  }
+});
+
+// Must provide all required fields for each evaluator type
+await compositeEval({
+  data: [{
+    prompt: "Summarize the earnings call",
+    completion: "CEO Jane Smith announced 15% growth",
+    expectedCompletion: "The CEO reported strong growth",
+    groundTruth: "CEO discussed Q3 performance",
+    contexts: [
+      "CEO Jane Smith presented Q3 results",
+      "Company saw 15% growth in Q3 2023"
+    ]
+  }]
+});
+```
+
+### 5. llm-polyglot [⇨](/docs/llm-polyglot)
+
+A universal LLM client that extends the OpenAI SDK to provide consistent interfaces across different providers that may not follow the OpenAI API specification.
+
+**Key Features:**
+
+- OpenAI-compatible interface for non-OpenAI providers
+- Support for major providers:
+  - OpenAI (direct SDK proxy)
+  - Anthropic (Claude models)
+  - Google (Gemini models)
+  - Together
+  - Microsoft/Azure
+  - Anyscale
+- Streaming support across providers
+- Function/tool calling compatibility
+- Context caching for Gemini
+- Structured output support
+
+#### Basic OpenAI-Style Usage
+
+```typescript
+import { createLLMClient } from "llm-polyglot";
+
+// Create provider-specific client
+const anthropicClient = createLLMClient({
+  provider: "anthropic"
+});
+
+// Use consistent OpenAI-style API
+const completion = await anthropicClient.chat.completions.create({
+  model: "claude-3-opus-20240229",
+  max_tokens: 1000,
+  messages: [{ role: "user", content: "Extract data..." }]
+});
+```
diff --git a/apps/www/src/content/docs/instructor-js.mdx b/apps/www/src/content/docs/instructor-js.mdx
new file mode 100644
index 0000000..c5497e9
--- /dev/null
+++ b/apps/www/src/content/docs/instructor-js.mdx
@@ -0,0 +1,188 @@
+---
+title:   Instructor.js
+description: Instructor.js composes the core Island AI packages into a complete, ready-to-use solution for structured extraction.
+---
+
+## zod-stream/schema-stream vs Instructor
+
+The core Island AI packages provides more low-level utilities for building custom LLM clients and data handling pipelines (schema-stream, zod-stream, stream-hooks). For a complete, ready-to-use solution, check out [Instructor](https://github.com/instructor-ai/instructor-js), which composes some of these tools into a full-featured client.
+
+**When to use core packages:**
+
+- You need direct access to the HTTP stream for custom transport (e.g., not using SSE/WebSockets)
+- You want to build a custom LLM client
+- You need fine-grained control over streaming and parsing
+- You're implementing server-side streaming with client-side parsing
+- You need a structured evaluation tool
+- You want to use different LLM providers that don't support the OpenAI SDK format
+
+**When to use Instructor:**
+
+- You want a complete solution for structured extraction
+- You're using WebSocket-based streaming from server to client
+- Your requests are only on the server
+- You need the full async generator pattern for progressive object updates
+- You want OpenAI SDK compatibility out of the box
+
+## Transport Patterns
+
+### Direct HTTP Streaming
+For cases where you need direct control over the HTTP stream, you can use the core packages to build your own streaming endpoints:
+
+```typescript
+import { OAIStream } from "zod-stream";
+import { withResponseModel } from "zod-stream";
+import OpenAI from "openai";
+import { z } from "zod";
+
+const oai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+  organization: process.env.OPENAI_ORG_ID
+});
+
+// Define your schema
+const schema = z.object({
+  content: z.string(),
+  users: z.array(z.object({
+    name: z.string(),
+  })),
+});
+
+// API Route Example (Next.js)
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+
+  // Configure OpenAI parameters with schema
+  const params = withResponseModel({
+    response_model: { 
+      schema: schema, 
+      name: "Users extraction and message" 
+    },
+    params: {
+      messages,
+      model: "gpt-4",
+    },
+    mode: "TOOLS",
+  });
+
+  // Create streaming completion
+  const extractionStream = await oai.chat.completions.create({
+    ...params,
+    stream: true,
+  });
+
+  // Return streaming response
+  return new Response(
+    OAIStream({ res: extractionStream })
+  );
+}
+
+// Client-side consumption
+async function consumeStream() {
+  const response = await fetch('/api/extract', {
+    method: 'POST',
+    body: JSON.stringify({
+      messages: [{ role: 'user', content: 'Your prompt here' }]
+    })
+  });
+
+  const parser = new SchemaStream(schema);
+  const stream = parser.parse();
+
+  response.body
+    ?.pipeThrough(stream)
+    .pipeTo(new WritableStream({
+      write(chunk) {
+        const data = JSON.parse(new TextDecoder().decode(chunk));
+        // Use partial data as it arrives
+        console.log('Partial data:', data);
+      }
+    }));
+}
+```
+
+### Using Instructor
+
+  <a aria-label="NPM version" href="https://www.npmjs.com/package/@instructor-ai/instructor" target="_blank">
+    <img alt="schema-stream" src="https://img.shields.io/npm/v/@instructor-ai/instructor.svg?style=flat-square&logo=npm&labelColor=000000&label=@instructor-ai/instructor" />
+  </a>
+  <a aria-label="Github Repo" href="https://github.com/instructor-ai/instructor-js" target="_blank">
+    <img alt="instructor-js" src="https://img.shields.io/github/stars/instructor-ai/instructor-js?style=flat-square&logo=github&labelColor=000000&label=instructor-ai/instructor-js" />
+  </a>
+
+[Instructor](https://github.com/instructor-ai/instructor-js) provides a high-level client that composes Island AI's core packages into a complete solution for structured extraction. It extends the OpenAI client with streaming and schema validation capabilities.
+
+```typescript
+import Instructor from "@instructor-ai/instructor";
+import OpenAI from "openai";
+import { z } from "zod";
+
+// Define your extraction schema
+const ExtractionSchema = z.object({
+  users: z.array(
+    z.object({
+      name: z.string(),
+      handle: z.string(),
+      twitter: z.string()
+    })
+  ).min(3),
+  location: z.string(),
+  budget: z.number()
+});
+
+type Extraction = Partial<z.infer<typeof ExtractionSchema>>;
+
+// Initialize OpenAI client with Instructor
+const oai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+  organization: process.env.OPENAI_ORG_ID
+});
+
+const client = Instructor({
+  client: oai,
+  mode: "TOOLS"
+});
+
+// Stream completions with structured output
+const extractionStream = await client.chat.completions.create({
+  messages: [{ 
+    role: "user", 
+    content: "Your text content here..." 
+  }],
+  model: "gpt-4",
+  response_model: { 
+    schema: ExtractionSchema, 
+    name: "Extract" 
+  },
+  max_retries: 3,
+  stream: true,
+  stream_options: {
+    include_usage: true
+  }
+});
+
+// Process streaming results
+let extraction: Extraction = {};
+for await (const result of extractionStream) {
+  extraction = result;
+  console.log('Progressive update:', result);
+}
+
+console.log('Final extraction:', extraction);
+```
+
+## Key Differences
+
+1. **Instructor**
+   - Provides a complete solution built on top of the OpenAI SDK
+   - Handles retries, validation, and streaming automatically
+   - Returns an async generator for progressive updates
+   - Ideal for WebSocket-based streaming from server to client
+   - Simpler integration when you don't need low-level control
+
+2. **Direct HTTP Streaming**
+   - Gives you direct access to the HTTP stream
+   - Allows custom transport mechanisms
+   - Enables server-side streaming with client-side parsing
+   - More flexible for custom implementations
+   - Better for scenarios where you need to minimize server processing
diff --git a/apps/www/src/content/docs/llm-polyglot/anthropic.mdx b/apps/www/src/content/docs/llm-polyglot/anthropic.mdx
new file mode 100644
index 0000000..7a79ca2
--- /dev/null
+++ b/apps/www/src/content/docs/llm-polyglot/anthropic.mdx
@@ -0,0 +1,68 @@
+---
+title: Anthropic
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+We support Anthropic's API, including standard chat completions, streaming chat completions, and function calling. Both input paramaters and responses match exactly those of the OpenAI SDK - for more detailed documentation please see the OpenAI docs: [https://platform.openai.com/docs/api-reference](https://platform.openai.com/docs/api-reference)
+
+
+## Installation
+
+<Tabs items={['bun', 'npm', 'pnpm']} persist>
+  <Tab value="bun">
+    ```bash
+    bun add llm-polyglot openai @anthropic-ai/sdk
+    ```
+  </Tab>
+  <Tab value="npm">
+    ```bash
+    npm install llm-polyglot openai @anthropic-ai/sdk
+    ```
+  </Tab>
+  <Tab value="pnpm">
+    ```bash
+    pnpm add llm-polyglot openai @anthropic-ai/sdk
+    ```
+  </Tab>
+</Tabs>
+
+
+```typescript
+const client = createLLMClient({ provider: "anthropic" });
+
+// Standard completion
+const response = await client.chat.completions.create({
+  model: "claude-3-opus-20240229",
+  messages: [{ role: "user", content: "Hello!" }]
+});
+
+// Streaming
+const stream = await client.chat.completions.create({
+  model: "claude-3-opus-20240229",
+  messages: [{ role: "user", content: "Hello!" }],
+  stream: true
+});
+
+for await (const chunk of stream) {
+  process.stdout.write(chunk.choices[0]?.delta?.content ?? "");
+}
+
+// Tool/Function calling
+const result = await client.chat.completions.create({
+  model: "claude-3-opus-20240229",
+  messages: [{ role: "user", content: "Analyze this data" }],
+  tools: [{
+    type: "function",
+    function: {
+      name: "analyze",
+      parameters: {
+        type: "object",
+        properties: {
+          sentiment: { type: "string" }
+        }
+      }
+    }
+  }]
+});
+```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/llm-polyglot/google.mdx b/apps/www/src/content/docs/llm-polyglot/google.mdx
new file mode 100644
index 0000000..f9c3a22
--- /dev/null
+++ b/apps/www/src/content/docs/llm-polyglot/google.mdx
@@ -0,0 +1,107 @@
+---
+title: Google
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+We support  Google's Gemini API including:
+- standard chat completions
+- streaming chat completions
+- function calling
+- context caching support for better token optimization (must be a paid API key)
+
+## Installation
+
+<Tabs items={['bun', 'npm', 'pnpm']} persist>
+  <Tab value="bun">
+    ```bash
+    bun add llm-polyglot openai @google/generative-ai
+    ```
+  </Tab>
+  <Tab value="npm">
+    ```bash
+    npm install llm-polyglot openai @google/generative-ai
+    ```
+  </Tab>
+  <Tab value="pnpm">
+    ```bash
+    pnpm add llm-polyglot openai @google/generative-ai
+    ```
+  </Tab>
+</Tabs>
+
+
+#### Context Caching
+
+[Context Caching](https://ai.google.dev/gemini-api/docs/caching) is a feature specific to Gemini that helps cut down on duplicate token usage by allowing you to create a cache with a TTL with which you can provide context to the model that you've already obtained from elsewhere.
+
+To use Context Caching you need to create a cache before you call generate via `googleClient.cacheManager.create({})` like so:
+
+```typescript
+const cacheResponse = await googleClient.cacheManager.create({
+      model: "gemini-1.5-flash-8b",
+      messages: [
+        {
+          role: "user",
+          content: "What is the capital of Montana?"
+        }
+      ],
+      ttlSeconds: 3600, // Cache for 1 hour,
+      max_tokens: 1000
+    })
+
+    // Now use the cached content in a new completion
+    const completion = await googleClient.chat.completions.create({
+      model: "gemini-1.5-flash-8b",
+      messages: [
+        {
+          role: "user",
+          content: "What state is it in?"
+        }
+      ],
+      additionalProperties: {
+        cacheName: cacheResponse.name
+      },
+      max_tokens: 1000
+    })
+```
+
+Gemini does support [OpenAI compatibility](https://ai.google.dev/gemini-api/docs/openai#node.js) for it's Node client but given that it's in beta and it has some limitations around structured output and images we're not using it directly in this library.
+
+```typescript
+const googleClient = createLLMClient({
+  provider: "openai",
+  apiKey: "gemini_api_key",
+  baseURL: "https://generativelanguage.googleapis.com/v1beta/openai/"
+})
+
+
+const completion = await openai.chat.completions.create({
+  model: "gemini-1.5-flash",
+  max_tokens: 1000,
+  messages: [
+    { role: "user", content: "My name is Dimitri Kennedy." }
+  ]
+});
+```
+
+#### Standard Chat Completions
+
+```typescript
+const client = createLLMClient({ provider: "google" });
+
+// With context caching
+const cache = await client.cacheManager.create({
+  model: "gemini-1.5-flash-8b",
+  messages: [{ role: "user", content: "Context to cache" }],
+  ttlSeconds: 3600
+});
+
+const completion = await client.chat.completions.create({
+  model: "gemini-1.5-flash-8b",
+  messages: [{ role: "user", content: "Follow-up question" }],
+  additionalProperties: {
+    cacheName: cache.name
+  }
+});
+```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/llm-polyglot/index.mdx b/apps/www/src/content/docs/llm-polyglot/index.mdx
new file mode 100644
index 0000000..9532b55
--- /dev/null
+++ b/apps/www/src/content/docs/llm-polyglot/index.mdx
@@ -0,0 +1,68 @@
+---
+title:   LLM Polyglot
+description: Universal client for LLM providers with OpenAI-compatible interface
+---
+
+
+`llm-polyglot` extends the OpenAI SDK to provide a consistent interface across different LLM providers. Use the same familiar OpenAI-style API with Anthropic, Google, and others.
+
+## Provider Support
+
+**Native API Support Status:**
+
+| Provider API | Status | Chat | Basic Stream | Functions/Tool calling | Function streaming | Notes |
+|-------------|---------|------|--------------|---------------------|-----------------|--------|
+| OpenAI | ✅ | ✅ | ✅ | ✅ | ✅ | Direct SDK proxy |
+| Anthropic | ✅ | ✅ | ✅ | ❌ | ❌ | Claude models |
+| Google | ✅ | ✅ | ✅ | ✅ | ❌ | Gemini models + context caching |
+| Azure | 🚧 | ✅ | ✅ | ❌ | ❌ | OpenAI model hosting |
+| Cohere | ❌ | - | - | - | - | Not supported |
+| AI21 | ❌ | - | - | - | - | Not supported |
+
+Stream Types:
+
+- **Basic Stream**: Simple text streaming
+- **Partial JSON Stream**: Progressive JSON object construction during streaming
+- **Function Stream**: Streaming function/tool calls and their results
+
+<br />
+
+**OpenAI-Compatible Hosting Providers:**
+
+These providers use the OpenAI SDK format, so they work directly with the OpenAI client configuration:
+
+| Provider | How to Use | Available Models |
+|----------|------------|------------------|
+| Together | Use OpenAI client with Together base URL | Mixtral, Llama, OpenChat, Yi, others |
+| Anyscale | Use OpenAI client with Anyscale base URL | Mistral, Llama, others |
+| Perplexity | Use OpenAI client with Perplexity base URL | pplx-* models |
+| Replicate | Use OpenAI client with Replicate base URL | Various open models |
+
+
+## OpenAI-Compatible Providers
+
+These providers work directly with OpenAI client configuration:
+
+| Provider | Configuration | Available Models |
+|----------|--------------|------------------|
+| Together | `baseURL: "https://api.together.xyz/v1"` | Mixtral, Llama, OpenChat, Yi |
+| Anyscale | `baseURL: "https://api.endpoints.anyscale.com/v1"` | Mistral, Llama |
+| Perplexity | `baseURL: "https://api.perplexity.ai"` | pplx-* models |
+
+```typescript
+// Together.ai example
+const client = createLLMClient({
+  provider: "openai",
+  baseURL: "https://api.together.xyz/v1"
+});
+
+// Use any Together-hosted model
+const completion = await client.chat.completions.create({
+  model: "mistralai/Mixtral-8x7B-Instruct-v0.1",
+  messages: [{ role: "user", content: "Hello!" }]
+});
+```
+
+## OpenAI
+
+The llm-polyglot library also provides support for the OpenAI API, which is the default provider and will just proxy directly to the OpenAI sdk.
diff --git a/apps/www/src/content/docs/schema-stream/api-reference.mdx b/apps/www/src/content/docs/schema-stream/api-reference.mdx
new file mode 100644
index 0000000..3595084
--- /dev/null
+++ b/apps/www/src/content/docs/schema-stream/api-reference.mdx
@@ -0,0 +1,136 @@
+---
+title:   API Reference
+---
+
+
+### `SchemaStream`
+
+```typescript
+class SchemaStream<T extends ZodObject<any>> {
+  constructor(
+    schema: T,
+    options?: {
+      defaultData?: NestedObject;
+      typeDefaults?: {
+        string?: string | null | undefined;
+        number?: number | null | undefined;
+        boolean?: boolean | null | undefined;
+      };
+      onKeyComplete?: (info: {
+        activePath: (string | number | undefined)[];
+        completedPaths: (string | number | undefined)[][];
+      }) => void;
+    }
+  )
+
+  // Create a stub instance of the schema with defaults
+  getSchemaStub<T extends ZodRawShape>(
+    schema: SchemaType<T>, 
+    defaultData?: NestedObject
+  ): z.infer<typeof schema>;
+
+  // Parse streaming JSON data
+  parse(options?: {
+    stringBufferSize?: number;
+    handleUnescapedNewLines?: boolean;
+  }): TransformStream;
+}
+```
+
+### Constructor Options
+
+- `schema`: Zod schema defining the structure of your data
+- `options`:
+  - `defaultData`: Initial values for schema properties
+  - `typeDefaults`: Default values for primitive types
+  - `onKeyComplete`: Callback for tracking parsing progress
+
+## Working with Defaults
+
+There are two ways to provide default values in schema-stream:
+
+### 1. Via Zod Schema
+
+```typescript
+const schema = z.object({
+  // Default via schema
+  count: z.number().default(0),
+  status: z.string().default('pending'),
+  settings: z.object({
+    enabled: z.boolean().default(true)
+  }),
+  tags: z.array(z.string()).default(['default'])
+});
+
+const parser = new SchemaStream(schema);
+```
+
+### 2. Via Constructor Options
+
+```typescript
+// Global type defaults
+const parser = new SchemaStream(schema, {
+  typeDefaults: {
+    string: "",      // Default for all strings
+    number: 0,       // Default for all numbers
+    boolean: false   // Default for all booleans
+  }
+});
+
+// Specific property defaults
+const parser = new SchemaStream(schema, {
+  defaultData: {
+    count: 100,
+    status: 'ready',
+    settings: {
+      enabled: true
+    }
+  }
+});
+```
+
+Priority order:
+
+1. Explicit `defaultData` values
+2. Zod schema defaults
+3. Global `typeDefaults`
+4. `null` (if no other default is found)
+
+### Completion Tracking
+
+Track the progress of parsing with path information:
+
+```typescript
+const parser = new SchemaStream(schema, {
+  onKeyComplete({ activePath, completedPaths }) {
+    // activePath: Current path being processed
+    // completedPaths: Array of all completed paths
+    console.log('Currently parsing:', activePath);
+    console.log('Completed paths:', completedPaths);
+  }
+});
+```
+
+### Parse Options
+
+- `stringBufferSize`: Size of the buffer for string values (default: 0)
+- `handleUnescapedNewLines`: Handle unescaped newlines in JSON (default: true)
+
+### Schema Stub Utility
+
+Create a typed stub of your schema with defaults:
+
+```typescript
+const schema = z.object({
+  users: z.array(z.object({
+    name: z.string(),
+    age: z.number()
+  }))
+});
+
+const parser = new SchemaStream(schema);
+const stub = parser.getSchemaStub(schema, {
+  users: [{ name: "default", age: 0 }]
+});
+// stub is fully typed as z.infer<typeof schema>
+```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/schema-stream/getting-started.mdx b/apps/www/src/content/docs/schema-stream/getting-started.mdx
new file mode 100644
index 0000000..2224217
--- /dev/null
+++ b/apps/www/src/content/docs/schema-stream/getting-started.mdx
@@ -0,0 +1,201 @@
+---
+title:   Getting Started
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+## Installation
+
+<Tabs items={['bun', 'npm', 'pnpm']} persist>
+  <Tab value="bun">
+    ```bash
+    bun add schema-stream zod
+    ```
+  </Tab>
+  <Tab value="npm">
+    ```bash
+    npm install schema-stream zod
+    ```
+  </Tab>
+  <Tab value="pnpm">
+    ```bash
+    pnpm add schema-stream zod
+    ```
+  </Tab>
+</Tabs>
+
+## Basic Usage
+
+```typescript
+import { SchemaStream } from 'schema-stream';
+import { z } from 'zod';
+
+// Define your schema
+const schema = z.object({
+  users: z.array(z.object({
+    name: z.string(),
+    age: z.number()
+  })),
+  metadata: z.object({
+    total: z.number(),
+    page: z.number()
+  })
+});
+
+// Create parser with optional defaults
+const parser = new SchemaStream(schema, {
+  metadata: { total: 0, page: 1 }
+});
+
+// Track completion paths
+parser.onKeyComplete(({ completedPaths }) => {
+  console.log('Completed:', completedPaths);
+});
+
+// Parse streaming data
+const stream = parser.parse();
+response.body.pipeThrough(stream);
+
+// Read results with full type inference
+const reader = stream.readable.getReader();
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) break;
+  
+  const result = JSON.parse(decoder.decode(value));
+  // result is fully typed as z.infer<typeof schema>
+  console.log(result);
+}
+```
+
+
+## Validation and Error Handling
+
+`schema-stream` focuses solely on streaming JSON parsing with type stubs - it intentionally does not perform full Zod schema validation during parsing. This design choice enables:
+
+1. Faster parsing without validation overhead
+2. Immediate access to partial data
+3. Flexibility for downstream validation
+
+For full schema validation and error handling, consider using:
+
+- [`zod-stream`](https://www.npmjs.com/package/zod-stream): Adds validation, OpenAI integration, and structured error handling
+- [`instructor`](https://www.npmjs.com/package/@instructor-ai/instructor): Complete solution for validated LLM extraction
+
+Example of `schema-stream` being used by `zod-stream`:
+
+```typescript
+const streamParser = new SchemaStream(response_model.schema, {
+  typeDefaults: {
+    string: null,
+    number: null,
+    boolean: null
+  },
+  onKeyComplete: ({ activePath, completedPaths }) => {
+    _activePath = activePath;
+    _completedPaths = completedPaths;
+  }
+});
+
+// Create parser with validation stream
+const parser = streamParser.parse({
+  handleUnescapedNewLines: true
+});
+
+// Add validation in transform stream
+const validationStream = new TransformStream({
+  transform: async (chunk, controller) => {
+    try {
+      const parsedChunk = JSON.parse(decoder.decode(chunk));
+      const validation = await schema.safeParseAsync(parsedChunk);
+      
+      controller.enqueue(encoder.encode(JSON.stringify({
+        ...parsedChunk,
+        _meta: {
+          _isValid: validation.success,
+          _activePath,
+          _completedPaths
+        }
+      })));
+    } catch (e) {
+      controller.error(e);
+    }
+  }
+});
+
+// Chain streams
+stream
+  .pipeThrough(parser)
+  .pipeThrough(validationStream);
+```
+
+
+### Progressive UI Updates
+
+```typescript
+const schema = z.object({
+  analysis: z.object({
+    sentiment: z.string(),
+    keywords: z.array(z.string()),
+    summary: z.string()
+  }),
+  metadata: z.object({
+    processedAt: z.string(),
+    wordCount: z.number()
+  })
+});
+
+const parser = new SchemaStream(schema, {
+  // Show loading states initially
+  defaultData: {
+    analysis: {
+      sentiment: "analyzing...",
+      keywords: ["loading..."],
+      summary: "generating summary..."
+    }
+  },
+  onKeyComplete({ activePath, completedPaths }) {
+    // Update UI loading states based on completion
+    updateLoadingStates(activePath, completedPaths);
+  }
+});
+```
+
+### Nested Data Processing
+
+```typescript
+const schema = z.object({
+  users: z.array(z.object({
+    id: z.string(),
+    profile: z.object({
+      name: z.string(),
+      email: z.string(),
+      preferences: z.object({
+        theme: z.string(),
+        notifications: z.boolean()
+      })
+    }),
+    activity: z.array(z.object({
+      timestamp: z.string(),
+      action: z.string()
+    }))
+  }))
+});
+
+const parser = new SchemaStream(schema);
+
+// Track specific paths for business logic
+parser.onKeyComplete(({ activePath, completedPaths }) => {
+  const path = activePath.join('.');
+  
+  // Process user profiles as they complete
+  if (path.match(/users\.\d+\.profile$/)) {
+    processUserProfile(/* ... */);
+  }
+  
+  // Process activity logs in batches
+  if (path.match(/users\.\d+\.activity\.\d+$/)) {
+    batchActivityLog(/* ... */);
+  }
+});
+```
diff --git a/apps/www/src/content/docs/schema-stream/index.mdx b/apps/www/src/content/docs/schema-stream/index.mdx
new file mode 100644
index 0000000..36173df
--- /dev/null
+++ b/apps/www/src/content/docs/schema-stream/index.mdx
@@ -0,0 +1,48 @@
+---
+title:   Schema Stream
+description: Streaming partial JSON parser with type safety
+---
+
+
+`schema-stream` is a foundational streaming JSON parser that enables immediate data access through structured stubs. Built on Zod schema validation, it provides type-safe parsing and progressive data access for JSON streams.
+
+## Key Features
+
+- 🔄 Stream JSON data with immediate access to partial results
+- 🔑 Path completion tracking for complex objects
+- 📝 Default value support via schema or explicit defaults
+- 🌳 Deep nested object and array support
+- ⚡ Zero dependencies except Zod
+- 🔍 TypeScript types inferred from schema
+
+## Integration with Island AI
+
+`schema-stream` is designed as a foundational package that other tools build upon:
+
+- [`zod-stream`](https://www.npmjs.com/package/zod-stream): Adds validation and OpenAI integration
+
+  ```typescript
+  // Example of zod-stream using schema-stream
+  const zodStream = new ZodStream();
+  const extraction = await zodStream.create({
+    completionPromise: stream,
+    response_model: { 
+      schema: yourSchema,
+      name: "Extract" 
+    }
+  });
+  ```
+
+- [`instructor`](https://www.npmjs.com/package/@instructor-ai/instructor): High-level extraction
+
+  ```typescript
+  const client = Instructor({
+    client: oai,
+    mode: "TOOLS"
+  });
+  
+  const result = await client.chat.completions.create({
+    response_model: { schema: yourSchema }
+    // ...
+  });
+  ```
diff --git a/apps/www/src/content/docs/stream-hooks/api-reference.mdx b/apps/www/src/content/docs/stream-hooks/api-reference.mdx
new file mode 100644
index 0000000..3712bbf
--- /dev/null
+++ b/apps/www/src/content/docs/stream-hooks/api-reference.mdx
@@ -0,0 +1,30 @@
+---
+
+title: API Reference
+---
+
+## Hook Options
+
+```typescript
+interface UseJsonStreamOptions<T extends z.ZodType> {
+  schema: T;                    // Zod schema for validation
+  onReceive?: (data: any) => void;  // Progressive update handler
+  onComplete?: (data: any) => void; // Stream completion handler
+  onError?: (error: Error) => void; // Error handler
+  debug?: boolean;              // Enable debug logging
+}
+```
+
+
+## Return Values
+
+```typescript
+interface UseJsonStreamReturn<T> {
+  data: T | null;              // Current stream data
+  loading: boolean;            // Stream status
+  error: Error | null;         // Error state
+  startStream: (options: FetchOptions) => Promise<void>; // Start streaming
+  stopStream: () => void;      // Stop streaming
+  reset: () => void;           // Reset hook state
+}
+```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/stream-hooks/getting-started.mdx b/apps/www/src/content/docs/stream-hooks/getting-started.mdx
new file mode 100644
index 0000000..5dbf284
--- /dev/null
+++ b/apps/www/src/content/docs/stream-hooks/getting-started.mdx
@@ -0,0 +1,138 @@
+---
+
+title: Getting Started
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+## Installation
+
+<Tabs items={['bun', 'npm', 'pnpm']} persist>
+  <Tab value="bun">
+    ```bash
+    bun add stream-hooks zod zod-stream
+    ```
+  </Tab>
+  <Tab value="npm">
+    ```bash
+    npm install stream-hooks zod zod-stream
+    ```
+  </Tab>
+  <Tab value="pnpm">
+    ```bash
+    pnpm add stream-hooks zod zod-stream
+    ```
+  </Tab>
+</Tabs>
+
+## Quick Start
+
+```typescript
+import { useJsonStream } from "stream-hooks"
+import { z } from "zod"
+
+export function ChatComponent() {
+  const { loading, startStream, stopStream, data } = useJsonStream({
+    schema: z.object({
+      content: z.string()
+    }),
+    onReceive: data => {
+      console.log("incremental update to final response model", data)
+    }
+  })
+
+  const submit = async () => {
+    try {
+      await startStream({
+        url: "/api/ai/chat",
+        method: "POST",
+        body: {
+          messages: [
+            {
+              content: "yo",
+              role: "user"
+            }
+          ]
+        }
+      })
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  return (
+    <div>
+      {data?.content}
+
+      <button onClick={submit} disabled={loading}>
+        Start
+      </button>
+
+      <button onClick={stopStream}>
+        Stop
+      </button>
+    </div>
+  )
+}
+```
+
+## Progressive Updates
+
+The hook provides real-time updates as data streams in:
+
+```typescript
+const AnalysisComponent = () => {
+  const { data } = useJsonStream({
+    schema: z.object({
+      user: z.object({
+        preferences: z.object({
+          theme: z.string(),
+          language: z.string()
+        })
+      }),
+      content: z.object({
+        title: z.string(),
+        body: z.string()
+      })
+    }),
+    onReceive: (chunk) => {
+      // Start personalizing as soon as preferences are available
+      if (isPathComplete(['user', 'preferences'], chunk)) {
+        applyTheme(chunk.user.preferences.theme);
+      }
+
+      // Begin content rendering when title is ready
+      if (isPathComplete(['content', 'title'], chunk)) {
+        updateTitle(chunk.content.title);
+      }
+    }
+  });
+
+  return <div>{/* Your UI */}</div>;
+};
+```
+
+## Error Handling
+
+```typescript
+function StreamComponent() {
+  const { error, reset } = useJsonStream({
+    schema,
+    onError: (err) => {
+      console.error("Stream error:", err);
+    }
+  });
+
+  if (error) {
+    return (
+      <div>
+        <p>Error: {error.message}</p>
+        <button onClick={reset}>Retry</button>
+      </div>
+    );
+  }
+
+  return <div>{/* Your UI */}</div>;
+}
+```
+
diff --git a/apps/www/src/content/docs/stream-hooks/index.mdx b/apps/www/src/content/docs/stream-hooks/index.mdx
new file mode 100644
index 0000000..99b4f71
--- /dev/null
+++ b/apps/www/src/content/docs/stream-hooks/index.mdx
@@ -0,0 +1,71 @@
+---
+
+title: Stream Hooks
+description: React hooks for processing streaming JSON data from LLMs with progressive validation
+---
+
+
+Hooks for consuming streams in react - specifically json streams coming from LLMS - given a Zod Schema that represents the final output, you can start the stream and start to read the structured result immediately.
+
+
+`stream-hooks` provides React hooks for consuming streams - specifically JSON streams coming from LLMs. Given a Zod Schema that represents the final output, you can start processing structured results immediately as they stream in.
+
+
+## Key Features
+
+- 🔄 React hooks for streaming LLM responses
+- 🎯 Progressive validation and partial results
+- 📝 Built-in TypeScript support
+- ⚡ Seamless integration with zod-stream
+- 🌳 Path completion tracking
+- 🔍 Error handling and loading states
+
+## Integration with zod-stream
+
+`stream-hooks` was designed to work with `zod-stream` response modes:
+
+```typescript
+import { withResponseModel } from "zod-stream";
+
+// API Route
+export async function POST(req: Request) {
+  const params = withResponseModel({
+    response_model: {
+      schema,
+      name: "Analysis"
+    },
+    mode: "TOOLS",
+    params: {
+      messages: [{ role: "user", content: "..." }],
+      model: "gpt-4"
+    }
+  });
+
+  const completion = await openai.chat.completions.create({
+    ...params,
+    stream: true
+  });
+
+  return new Response(completion.body);
+}
+```
+
+## TypeScript Support
+
+The hook provides full type inference:
+
+```typescript
+const schema = z.object({
+  result: z.string(),
+  confidence: z.number()
+});
+
+// data is fully typed based on schema
+const { data } = useJsonStream({
+  schema,
+  onReceive: (data) => {
+    // TypeScript knows the shape of data
+    console.log(data.result, data.confidence);
+  }
+});
+```
diff --git a/apps/www/src/content/docs/zod-stream/examples.mdx b/apps/www/src/content/docs/zod-stream/examples.mdx
new file mode 100644
index 0000000..17182ee
--- /dev/null
+++ b/apps/www/src/content/docs/zod-stream/examples.mdx
@@ -0,0 +1,296 @@
+---
+title:   Examples
+---
+I'll break down each example into smaller, annotated snippets that are easier to understand and copy. I'll start with the first example:
+
+### 1. Progressive Data Analysis
+
+First, let's define the schema:
+
+```typescript
+// Define the structure of our market analysis data
+const analysisSchema = z.object({
+  marketData: z.object({
+    trends: z.array(z.object({
+      metric: z.string(),
+      value: z.number()
+    })),
+    summary: z.string()
+  }),
+  competitors: z.array(z.object({
+    name: z.string(),
+    strengths: z.array(z.string()),
+    weaknesses: z.array(z.string())
+  })),
+  recommendations: z.object({
+    immediate: z.array(z.string()),
+    longTerm: z.array(z.string()),
+    budget: z.number()
+  })
+});
+```
+
+Then, handle the streaming data processing:
+
+```typescript
+for await (const chunk of stream) {
+  // 1. Visualize market trends as soon as they're available
+  if (isPathComplete(['marketData', 'trends'], chunk)) {
+    initializeCharts(chunk.marketData.trends);
+  }
+
+  // 2. Process competitor data as each competitor entry completes
+  chunk._meta._completedPaths.forEach(path => {
+    if (path[0] === 'competitors' && path.length === 2) {
+      const competitor = chunk.competitors[path[1] as number];
+      fetchCompetitorData(competitor.name);
+    }
+  });
+
+  // 3. Handle budget planning when both requirements are met
+  if (isPathComplete(['recommendations', 'immediate'], chunk) && 
+      isPathComplete(['recommendations', 'budget'], chunk)) {
+    planBudgetAllocation({
+      actions: chunk.recommendations.immediate,
+      budget: chunk.recommendations.budget
+    });
+  }
+}
+```
+
+### 2. Document Processing Pipeline
+
+The schema:
+
+```typescript
+const documentSchema = z.object({
+  metadata: z.object({
+    title: z.string(),
+    author: z.string(),
+    topics: z.array(z.string())
+  }),
+  sections: z.array(z.object({
+    heading: z.string(),
+    content: z.string(),
+    annotations: z.array(z.object({
+      type: z.string(),
+      text: z.string(),
+      confidence: z.number()
+    }))
+  })),
+  summary: z.object({
+    abstract: z.string(),
+    keyPoints: z.array(z.string()),
+    readingTime: z.number()
+  })
+});
+```
+
+The processing logic:
+
+```typescript
+for await (const chunk of stream) {
+  // 1. Start document indexing when metadata arrives
+  if (isPathComplete(['metadata'], chunk)) {
+    indexDocument({
+      title: chunk.metadata.title,
+      topics: chunk.metadata.topics
+    });
+  }
+
+  // 2. Process section annotations as they complete
+  chunk._meta._completedPaths.forEach(path => {
+    if (path[0] === 'sections' && isPathComplete([...path, 'annotations'], chunk)) {
+      const sectionIndex = path[1] as number;
+      const section = chunk.sections[sectionIndex];
+      processAnnotations({
+        heading: section.heading,
+        annotations: section.annotations
+      });
+    }
+  });
+
+  // 3. Generate preview when required fields are available
+  if (isPathComplete(['summary', 'abstract'], chunk) && 
+      isPathComplete(['summary', 'readingTime'], chunk)) {
+    generatePreview({
+      abstract: chunk.summary.abstract,
+      readingTime: chunk.summary.readingTime
+    });
+  }
+}
+```
+
+### 3. E-commerce Product Enrichment
+
+The schema:
+
+```typescript
+const productSchema = z.object({
+  basic: z.object({
+    id: z.string(),
+    name: z.string(),
+    category: z.string()
+  }),
+  pricing: z.object({
+    base: z.number(),
+    discounts: z.array(z.object({
+      type: z.string(),
+      amount: z.number()
+    })),
+    final: z.number()
+  }),
+  inventory: z.object({
+    status: z.string(),
+    locations: z.array(z.object({
+      id: z.string(),
+      quantity: z.number()
+    }))
+  }),
+  enrichment: z.object({
+    seoDescription: z.string(),
+    searchKeywords: z.array(z.string()),
+    relatedProducts: z.array(z.string())
+  })
+});
+```
+
+The processing logic:
+
+```typescript
+for await (const chunk of stream) {
+  // 1. Initialize product display with basic info
+  if (isPathComplete(['basic'], chunk)) {
+    initializeProductCard(chunk.basic);
+  }
+
+  // 2. Handle pricing and inventory updates
+  if (isPathComplete(['pricing', 'final'], chunk)) {
+    updatePriceDisplay(chunk.pricing.final);
+    
+    if (isPathComplete(['inventory', 'status'], chunk)) {
+      updateBuyButton({
+        price: chunk.pricing.final,
+        status: chunk.inventory.status
+      });
+    }
+  }
+
+  // 3. Handle SEO optimization
+  if (isPathComplete(['enrichment', 'seoDescription'], chunk) &&
+      isPathComplete(['enrichment', 'searchKeywords'], chunk)) {
+    optimizeProductSEO({
+      description: chunk.enrichment.seoDescription,
+      keywords: chunk.enrichment.searchKeywords
+    });
+  }
+
+  // 4. Handle related products
+  if (isPathComplete(['enrichment', 'relatedProducts'], chunk)) {
+    prefetchRelatedProducts(chunk.enrichment.relatedProducts);
+  }
+}
+```
+
+### Next.js API Route Example
+
+The schema:
+
+```typescript
+// schemas/analysis.ts
+const schema = z.object({
+  summary: z.string(),
+  topics: z.array(z.string()),
+  sentiment: z.object({
+    score: z.number(),
+    label: z.string()
+  })
+});
+```
+
+The API route:
+
+```typescript
+// pages/api/extract.ts
+import { withResponseModel, OAIStream } from "zod-stream";
+import { z } from "zod";
+import { analysisSchema } from "@/schemas/analysis";
+
+// 2. Create the API handler
+export default async function handler(req, res) {
+  const { content } = await req.json();
+
+  // 3. Configure the response model
+  const params = withResponseModel({
+    response_model: { 
+      schema,
+      name: "ContentAnalysis"
+    },
+    mode: "TOOLS",
+    params: {
+      messages: [{ 
+        role: "user", 
+        content: `Analyze: ${content}` 
+      }],
+      model: "gpt-4"
+    }
+  });
+
+  // 4. Create and return the stream
+  const stream = await oai.chat.completions.create({
+    ...params,
+    stream: true
+  });
+
+  return new Response(OAIStream({ res: stream }));
+}
+```
+
+### React Component Example
+
+```typescript
+import { useJsonStream } from "stream-hooks";
+import { analysisSchema } from "@/schemas/analysis";
+import { z } from "zod";
+
+
+function AnalysisComponent() {
+  const [data, setData] = useState<z.infer<typeof schema>>();
+
+  
+  const { 
+    loading, 
+    error,
+    startStream 
+  } = useJsonStream({
+    schema,
+    onReceive: (data) => {
+      setData(data)
+    }
+  });
+
+  
+  return (
+    <div>
+      <button 
+        onClick={() => startStream({
+          url: "/api/extract",
+          method: "POST",
+          body: { content: "..." }
+        })}
+        disabled={loading}
+      >
+        Start Analysis
+      </button>
+
+      {loading && <LoadingState paths={data._meta._completedPaths} />}
+      {error && <ErrorDisplay error={error} />}
+      
+      <ProgressiveDisplay
+        data={data}
+        isComplete={data._meta._completedPaths.length > 0}
+      />
+    </div>
+  );
+}
+```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/zod-stream/getting-started.mdx b/apps/www/src/content/docs/zod-stream/getting-started.mdx
new file mode 100644
index 0000000..d01aa66
--- /dev/null
+++ b/apps/www/src/content/docs/zod-stream/getting-started.mdx
@@ -0,0 +1,452 @@
+---
+title:   Getting Started
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+## Installation
+
+<Tabs items={['bun', 'npm', 'pnpm']} persist>
+  <Tab value="bun">
+    ```bash
+    bun add zod-stream zod openai
+    ```
+  </Tab>
+  <Tab value="npm">
+    ```bash
+    npm install zod-stream zod openai
+    ```
+  </Tab>
+  <Tab value="pnpm">
+    ```bash
+    pnpm add zod-stream zod openai
+    ```
+  </Tab>
+</Tabs>
+
+
+
+## Core Concepts
+
+The `ZodStream` client provides real-time validation and metadata for streaming LLM responses:
+
+```typescript
+import ZodStream from "zod-stream";
+import { z } from "zod";
+
+const client = new ZodStream({
+  debug: true  // Enable debug logging
+});
+
+// Define your extraction schema
+const schema = z.object({
+  content: z.string(),
+  metadata: z.object({
+    confidence: z.number(),
+    category: z.string()
+  })
+});
+
+// Create streaming extraction
+const stream = await client.create({
+  completionPromise: async () => {
+    const response = await fetch("/api/extract", {
+      method: "POST",
+      body: JSON.stringify({ prompt: "..." })
+    });
+    return response.body;
+  },
+  response_model: {
+    schema,
+    name: "ContentExtraction"
+  }
+});
+
+// Process with validation metadata
+for await (const chunk of stream) {
+  console.log({
+    data: chunk,              // Partial extraction result
+    isValid: chunk._meta._isValid,    // Current validation state
+    activePath: chunk._meta._activePath,    // Currently processing path
+    completedPaths: chunk._meta._completedPaths  // Completed paths
+  });
+}
+```
+
+## Progressive Processing
+
+`zod-stream` enables processing dependent data as soon as relevant paths complete, without waiting for the full response:
+
+```typescript
+// Define schema for a complex analysis
+const schema = z.object({
+  user: z.object({
+    id: z.string(),
+    preferences: z.object({
+      theme: z.string(),
+      language: z.string()
+    })
+  }),
+  content: z.object({
+    title: z.string(),
+    body: z.string(),
+    metadata: z.object({
+      keywords: z.array(z.string()),
+      category: z.string()
+    })
+  }),
+  recommendations: z.array(z.object({
+    id: z.string(),
+    score: z.number(),
+    reason: z.string()
+  }))
+});
+
+// Process data as it becomes available
+for await (const chunk of stream) {
+  // Start personalizing UI as soon as user preferences are ready
+  if (isPathComplete(['user', 'preferences'], chunk)) {
+    applyUserTheme(chunk.user.preferences.theme);
+    setLanguage(chunk.user.preferences.language);
+  }
+
+  // Begin content indexing once we have title and keywords
+  if (isPathComplete(['content', 'metadata', 'keywords'], chunk) && 
+      isPathComplete(['content', 'title'], chunk)) {
+    indexContent({
+      title: chunk.content.title,
+      keywords: chunk.content.metadata.keywords
+    });
+  }
+
+  // Start fetching recommended content in parallel
+  chunk._meta._completedPaths.forEach(path => {
+    if (path[0] === 'recommendations' && path.length === 2) {
+      const index = path[1] as number;
+      const recommendation = chunk.recommendations[index];
+      
+      if (recommendation?.id) {
+        prefetchContent(recommendation.id);
+      }
+    }
+  });
+}
+```
+
+This approach enables:
+
+- Early UI updates based on user preferences
+- Parallel processing of independent data
+- Optimistic loading of related content
+- Better perceived performance
+- Resource optimization
+
+## Stream Metadata
+
+Every streamed chunk includes metadata about validation state:
+
+```typescript
+type CompletionMeta = {
+  _isValid: boolean;           // Schema validation status
+  _activePath: (string | number)[];     // Current parsing path
+  _completedPaths: (string | number)[][]; // All completed paths
+}
+
+// Example chunk
+{
+  content: "partial content...",
+  metadata: {
+    confidence: 0.95
+  },
+  _meta: {
+    _isValid: false,  // Not valid yet
+    _activePath: ["metadata", "category"],
+    _completedPaths: [
+      ["content"],
+      ["metadata", "confidence"]
+    ]
+  }
+}
+```
+
+## Schema Stubs
+
+Get typed stub objects for initialization:
+
+```typescript
+const schema = z.object({
+  users: z.array(z.object({
+    name: z.string(),
+    age: z.number()
+  }))
+});
+
+const client = new ZodStream();
+const stub = client.getSchemaStub({
+  schema,
+  defaultData: {
+    users: [{ name: "loading...", age: 0 }]
+  }
+});
+```
+
+## Debug Logging
+
+Enable detailed logging for debugging:
+
+```typescript
+const client = new ZodStream({ debug: true });
+
+// Logs will include:
+// - Stream initialization
+// - Validation results
+// - Path completion
+// - Errors with full context
+```
+
+### Using Response Models
+
+The `withResponseModel` helper configures OpenAI parameters based on your schema and chosen mode:
+
+```typescript
+import { withResponseModel } from "zod-stream";
+import { z } from "zod";
+
+const schema = z.object({
+  sentiment: z.string(),
+  keywords: z.array(z.string()),
+  confidence: z.number()
+});
+
+// Configure for OpenAI tools mode
+const params = withResponseModel({
+  response_model: {
+    schema,
+    name: "Analysis",
+    description: "Extract sentiment and keywords"
+  },
+  mode: "TOOLS",
+  params: {
+    messages: [{ role: "user", content: "Analyze this text..." }],
+    model: "gpt-4"
+  }
+});
+
+const completion = await oai.chat.completions.create({
+  ...params,
+  stream: true
+});
+```
+
+## Response Modes
+
+`zod-stream` supports multiple modes for structured LLM responses:
+
+```typescript
+import { MODE } from "zod-stream";
+
+const modes = {
+  FUNCTIONS: "FUNCTIONS",   // OpenAI function calling
+  TOOLS: "TOOLS",          // OpenAI tools API
+  JSON: "JSON",            // Direct JSON response
+  MD_JSON: "MD_JSON",      // JSON in markdown blocks
+  JSON_SCHEMA: "JSON_SCHEMA" // JSON with schema validation
+} as const;
+```
+
+
+### Mode-Specific Behaviors
+
+#### TOOLS Mode
+
+```typescript
+// Results in OpenAI tool configuration
+{
+  tool_choice: {
+    type: "function",
+    function: { name: "Analysis" }
+  },
+  tools: [{
+    type: "function",
+    function: {
+      name: "Analysis",
+      description: "Extract sentiment and keywords",
+      parameters: {/* Generated from schema */}
+    }
+  }],
+  // ... other existing params are preserved
+}
+```
+
+#### FUNCTIONS Mode (Legacy)
+
+```typescript
+// Results in OpenAI function configuration
+{
+  function_call: { name: "Analysis" },
+  functions: [{
+    name: "Analysis",
+    description: "Extract sentiment and keywords",
+    parameters: {/* Generated from schema */}
+  }],
+  // ... other existing params are preserved
+}
+```
+
+#### JSON Mode
+
+```typescript
+// Results in direct JSON response configuration
+{
+  response_format: { type: "json_object" },
+  messages: [
+    {
+      role: "system",
+      content: `
+        Given a user prompt, you will return fully valid JSON based on the following description and schema.
+        You will return no other prose. You will take into account any descriptions or required parameters within the schema
+        and return a valid and fully escaped JSON object that matches the schema and those instructions.
+
+        description: ${definition.description}
+        json schema: ${JSON.stringify(definition)}
+      `
+    },
+    // ... user messages are preserved
+  ]
+}
+```
+
+#### JSON_SCHEMA Mode
+
+```typescript
+// Results in JSON schema-based configuration
+{
+  response_format: {
+    type: "json_object",
+    schema: {/* Schema without name and description */}
+  },
+  messages: [
+    {
+      role: "system",
+      content: `
+        Given a user prompt, you will return fully valid JSON based on the following description.
+        You will return no other prose. You will take into account any descriptions or required parameters within the schema
+        and return a valid and fully escaped JSON object that matches the schema and those instructions.
+
+        description: ${definition.description}
+      `
+    },
+    // ... user messages are preserved
+  ]
+}
+```
+
+#### MESSAGE_BASED Mode
+
+```typescript
+// Similar to JSON mode but without response_format
+{
+  messages: [
+    {
+      role: "system",
+      content: `
+        Given a user prompt, you will return fully valid JSON based on the following description and schema.
+        You will return no other prose. You will take into account any descriptions or required parameters within the schema
+        and return a valid and fully escaped JSON object that matches the schema and those instructions.
+
+        description: ${definition.description}
+        json schema: ${JSON.stringify(definition)}
+      `
+    },
+    // ... user messages are preserved
+  ]
+}
+```
+
+### Response Parsing
+
+Built-in parsers handle different response formats:
+
+```typescript
+import { 
+  OAIResponseParser,
+  OAIResponseToolArgsParser,
+  OAIResponseFnArgsParser,
+  OAIResponseJSONParser
+} from "zod-stream";
+
+// Automatic format detection
+const result = OAIResponseParser(response);
+
+// Format-specific parsing
+const toolArgs = OAIResponseToolArgsParser(response);
+const fnArgs = OAIResponseFnArgsParser(response);
+const jsonContent = OAIResponseJSONParser(response);
+```
+
+### Streaming Utilities
+
+Handle streaming responses with built-in utilities:
+
+```typescript
+import { OAIStream, readableStreamToAsyncGenerator } from "zod-stream";
+
+// Create streaming response
+app.post("/api/stream", async (req, res) => {
+  const completion = await oai.chat.completions.create({
+    ...params,
+    stream: true
+  });
+
+  return new Response(
+    OAIStream({ res: completion })
+  );
+});
+
+// Convert stream to async generator
+const generator = readableStreamToAsyncGenerator(stream);
+for await (const chunk of generator) {
+  console.log(chunk);
+}
+```
+
+### Path Tracking Utilities
+
+Monitor completion status of specific paths:
+
+```typescript
+import { isPathComplete } from "zod-stream";
+
+const activePath = ["analysis", "sentiment"];
+const isComplete = isPathComplete(activePath, {
+  _meta: {
+    _completedPaths: [["analysis", "sentiment"]],
+    _activePath: ["analysis", "keywords"],
+    _isValid: false
+  }
+});
+```
+
+## Error Handling
+
+`zod-stream` provides error handling at multiple levels:
+
+```typescript
+const stream = await client.create({
+  completionPromise: async () => response.body,
+  response_model: { schema }
+});
+
+let finalResult
+
+// Path tracking for progressive updates
+for await (const chunk of stream) {
+  finalResult = chunk
+  // Check which paths are complete
+  console.log("Completed paths:", chunk._meta._completedPaths);
+  console.log("Current path:", chunk._meta._activePath);
+}
+
+// Final validation happens after stream completes
+const isValid = finalResult._meta._isValid
+```
diff --git a/apps/www/src/content/docs/zod-stream/index.mdx b/apps/www/src/content/docs/zod-stream/index.mdx
new file mode 100644
index 0000000..088d5aa
--- /dev/null
+++ b/apps/www/src/content/docs/zod-stream/index.mdx
@@ -0,0 +1,66 @@
+---
+title:   Zod Stream
+description:   Type-safe structured extraction from LLM streams with progressive validation
+---
+
+
+`zod-stream` adds structured output validation and streaming capabilities to LLM responses. Built on top of [`schema-stream`](/docs/schema-stream), it enables type-safe extraction with progressive validation.
+
+
+
+## Key Features
+
+- 🔄 Stream structured LLM outputs with validation
+- 🎯 Multiple response modes (TOOLS, FUNCTIONS, JSON, etc.)
+- 📝 OpenAI client integration
+- 🌳 Progressive validation with partial results
+- ⚡ Built on schema-stream
+- 🔍 Full TypeScript support
+
+## Why zod-stream?
+
+`zod-stream` solves key challenges in handling streaming LLM responses:
+
+- **Dependency Management**: Process data as soon as dependencies are met, rather than waiting for complete responses
+
+  ```typescript
+  if (isPathComplete(['user', 'preferences'], chunk)) {
+    // Start personalizing immediately, don't wait for content
+    initializeUserExperience(chunk.user.preferences);
+  }
+  ```
+
+- **Type-Safe LLM Integration**: Full TypeScript support for structured outputs from OpenAI and other providers
+
+  ```typescript
+  const params = withResponseModel({
+    response_model: { schema, name: "Extract" },
+    mode: "TOOLS"  // or "FUNCTIONS", "JSON", etc.
+  });
+  ```
+
+- **Progressive Processing**: Built on `schema-stream` for immediate access to partial results
+
+  ```typescript
+  for await (const chunk of stream) {
+    // Safely access partial data with full type inference
+    chunk._meta._completedPaths.forEach(path => {
+      processDependency(path, chunk);
+    });
+  }
+  ```
+
+- **Provider Flexibility**: Consistent interface across different LLM response formats
+
+  ```typescript
+  // Works with various response modes
+  const stream = OAIStream({ res: completion });  // OpenAI tools/functions
+  const stream = JSONStream({ res: completion }); // Direct JSON
+  ```
+
+Think of it as a type-safe pipeline for handling streaming LLM data where you need to:
+
+- Start processing before the full response arrives
+- Ensure type safety throughout the stream
+- Handle complex data dependencies
+- Work with multiple LLM response formats
diff --git a/apps/www/src/docs/concepts.mdx b/apps/www/src/docs/concepts.mdx
deleted file mode 100644
index e69de29..0000000
diff --git a/apps/www/src/docs/evalz.mdx b/apps/www/src/docs/evalz.mdx
deleted file mode 100644
index aff6372..0000000
--- a/apps/www/src/docs/evalz.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-# evalz
-
-## Introduction
-
-### Overview
-**evalz** is a TypeScript package designed to facilitate model-graded evaluations with a focus on structured output. Leveraging Zod schemas, **evalz** streamline s the evaluation of AI-generated responses. It provides a set of tools to assess the quality of responses based on custom criteria such as relevance, fluency, and completeness. The package leverages OpenAI's GPT models to perform evaluations, offering both simple and weighted evaluation mechanisms.
-
-### Key Features
-- **Structured Evaluation Models**: Define your evaluation logic using Zod schemas to ensure data integrity throughout your application.
-- **Flexible Evaluation Strategies**: Supports various evaluation strategies, including score-based and binary evaluations, with customizable evaluators.
-- **Easy Integration**: Designed to integrate seamlessly with existing TypeScript projects, enhancing AI and data processing workflows with minimal setup.
-- **Custom Evaluations**: Define evaluation criteria tailored to your specific requirements.
-- **Weighted Evaluations**: Combine multiple evaluations with custom weights to calculate a composite score.
diff --git a/apps/www/src/docs/overview-concepts-structured-responses.mdx b/apps/www/src/docs/overview-concepts-structured-responses.mdx
deleted file mode 100644
index ca910f6..0000000
--- a/apps/www/src/docs/overview-concepts-structured-responses.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-# Concepts: Structured Responses and Partial Streaming
-
-## Structured Responses in Island AI
-
-### What Are Structured Responses?
-- **Definition**: In Island AI, structured responses are JSON-formatted data outputs structured according to Zod schemas. These schemas define the expected format of the AI's output, making the data predictable and easy to integrate into various parts of the UI.
-
-- **Application**: Structured responses enable a range of functionalities, from responding to user queries to defining side effects for application execution. They allow for versatile use of the data, such as splitting the response to feed into different UI components.
-
-### Island AI's Approach
-- **Abstraction of Complexity**: Island AI abstracts the complexity of tools like OpenAI's functions and JSON mode. You focus on defining the Zod schema for the desired response model, which Island AI uses to handle the output from AI systems efficiently and safely.
diff --git a/apps/www/src/docs/overview-instructor.mdx b/apps/www/src/docs/overview-instructor.mdx
deleted file mode 100644
index 5afe225..0000000
--- a/apps/www/src/docs/overview-instructor.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-# Understanding Instructor
-
-
-## What is Island AI?
-Island AI is a suite of TypeScript packages focused on building dynamic, responsive UIs for AI applications. It's tailored to handle streaming JSON data efficiently, making it ideal for web applications that require real-time updates and interactions. The core of Island AI lies in:
-
-  - Streamlined data handling, particularly for streaming JSON
-  - Facilitating dynamic user interfaces in browser environments
-  - Providing tools like zod-stream and React hooks to manage and display data updates in real time
-
-## What is Instructor?
-Instructor, on the other hand, is a TypeScript library primarily designed for structured data extraction and validation in server environments. It stands out in scenarios that require robust validation, retries, and complex data manipulation, often backed by AI models like those from OpenAI. Key aspects of Instructor include:
-
-- Focused on server-side structured data extraction and validation
-- Utilizes schema-stream for handling JSON streams, similar to zod-stream
-- Offers a comprehensive approach to managing the entire streaming and validation process
-- Ideal for tasks that require intricate data parsing and manipulation, backed by a variety of - functionalities outlined in the Instructor cookbook
-
-
-## How Do They Complement Each Other?
-While Island AI and Instructor serve different purposes, they complement each other in the broader landscape of AI-driven application development:
-
-- Island AI excels in client-side dynamics, making it a go-to choice for developers looking to build interactive and responsive UIs that react in real time to streaming data.
-- Instructor is more suited for server-side operations where structured data extraction and validation are critical, especially when dealing with complex AI-driven responses.
-
-## Use Cases and Integration
-
-In scenarios where you need to process and display streaming data in real-time on the client side, Island AI's tools would be the preferred choice.
-
-For server-side applications that require intricate data handling, validation, and extraction, particularly when working with AI models like GPT-3, Instructor provides a robust solution.
-Developers can leverage both sets of tools in a single application, using Instructor for server-side data processing and Island AI for real-time client-side interactions.
-
-## Future Developments
-Plans to integrate aspects of Island AI into Instructor will further streamline the development process, offering a more cohesive toolkit for handling AI-driven data across both client and server environments.
-
-## Conclusion
-Both Island AI and Instructor play distinct roles in AI-driven development. Whether it's handling real-time data streams in the browser or performing complex data extraction on the server, these tools offer flexibility and power to build sophisticated, responsive, and user-centric applications. 
-
-By understanding the unique strengths and use cases of each tool, developers can make informed decisions on how best to integrate them into their AI-driven projects, maximizing efficiency and user engagement.
\ No newline at end of file
diff --git a/apps/www/src/docs/overview.mdx b/apps/www/src/docs/overview.mdx
deleted file mode 100644
index 0391045..0000000
--- a/apps/www/src/docs/overview.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-# Introduction to Island AI
-
-Island AI is a collection of TypeScript tools designed to enhance the way developers create user interfaces for AI applications. Moving beyond traditional chat interfaces, it offers more flexibility and power for handling AI-driven interactions.
-
-## Why Island AI?
-The idea for Island AI came from the limitations of regular chat interfaces in AI applications. While chat interfaces are familiar, they often limit how we can interact with AI. Island AI aims to change that by allowing more complex and interactive UIs, especially when dealing with real-time data and AI responses.
-
-## Key Features
-  - **Handles Complex Data**: Island AI makes it easier to work with structured data in real-time, which is often a challenge in AI applications.
-  - **For Modern Web Apps**: With a focus on React, Island AI integrates smoothly into modern web applications, providing tools that are easy to use for developers.
-  - **Improves User Experience**: By enabling more dynamic interactions, Island AI helps create interfaces that are more engaging and responsive.
-
-## What's Inside Island AI?
-**Island AI includes**:
-
-- Tools for managing structured data with Zod schemas.
-- A JSON streaming parser for handling real-time data.
-- React hooks for easy integration into web applications.
-
-## Learn More
-For more on the background and motivations behind Island AI, you can read my detailed article, ["Breaking free from the chat box" here](https://www.hack.dance/thoughts/break-free-from-chat-the-box).
-
-
----
-Island AI is about giving developers the tools to build better AI-driven interfaces. It's about making it easier to handle complex, real-time data and create more engaging user experiences.
\ No newline at end of file
diff --git a/apps/www/src/docs/stream-hooks-api.mdx b/apps/www/src/docs/stream-hooks-api.mdx
deleted file mode 100644
index b5a2a7d..0000000
--- a/apps/www/src/docs/stream-hooks-api.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
-## API Reference
-
-### `useStream`
-
-A custom React hook for managing and interacting with a data stream.
-
-#### Properties
-
-```typescript
-useStream({ onBeforeStart, onStop }: UseStreamProps)
-```
-
-| Property       | Type     | Required | Description                                     |
-|----------------|----------|----------|-------------------------------------------------|
-| onBeforeStart  | Function | No       | Callback function invoked before the stream starts. |
-| onStop         | Function | No       | Callback function invoked when the stream stops. |
-
-#### Returns
-
-| Property    | Type       | Description                                     |
-|-------------|------------|-------------------------------------------------|
-| startStream | Function   | Function to start the stream.                   |
-| stopStream  | Function   | Function to stop the stream.                    |
-
-### `useJsonStream`
-
-Extends `useStream` to handle JSON streaming, with parsing based on a provided Zod schema.
-
-#### Properties
-
-```typescript
-useJsonStream({ onReceive, onEnd, schema, onBeforeStart, onStop, defaultData }: UseJsonStreamProps<T>)
-```
-
-| Property       | Type           | Required | Description                                         |
-|----------------|----------------|----------|-----------------------------------------------------|
-| onReceive      | Function       | No       | Callback invoked with each piece of received data.  |
-| onEnd          | Function       | No       | Callback invoked when the stream ends.              |
-| schema         | z.AnyZodObject | Yes      | Zod schema for validating and parsing the JSON data.|
-| onBeforeStart  | Function       | No       | Callback function invoked before the stream starts. |
-| onStop         | Function       | No       | Callback function invoked when the stream stops.    |
-| defaultData    | Object         | No       | Default data to use before any stream data arrives. |
-
-#### Returns
-
-| Property    | Type       | Description                                       |
-|-------------|------------|---------------------------------------------------|
-| startStream | Function   | Function to start the stream.                     |
-| stopStream  | Function   | Function to stop the stream.                      |
-| data        | Object     | The latest piece of parsed data from the stream.  |
-| loading     | boolean    | Indicates whether the stream is currently active. |
diff --git a/apps/www/src/docs/stream-hooks-getting-started.mdx b/apps/www/src/docs/stream-hooks-getting-started.mdx
deleted file mode 100644
index 3ad604a..0000000
--- a/apps/www/src/docs/stream-hooks-getting-started.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-## Getting Started
-
-### Installation
-
-To start using `stream-hooks` in your React project, you can install it using your preferred package manager. Below are the commands for npm, pnpm, and yarn.
-
-#### With npm
-```bash
-npm install stream-hooks zod zod-stream
-```
-
-#### With pnpm
-```bash
-pnpm add stream-hooks zod zod-stream
-```
-
-#### With bun
-```bash
-bun add stream-hooks zod zod-stream
-```
-
-### Basic Setup
-
-Once `stream-hooks` is installed in your project, you can start using the hooks in your React components. Ensure you have React set up in your project as `stream-hooks` is designed to work within a React environment.
-
-#### Using `useStream`
-
-```typescript
-import React from 'react';
-import { useStream } from 'stream-hooks';
-
-const MyComponent = () => {
-  const { startStream, stopStream } = useStream({
-    onBeforeStart: () => console.log('Stream is about to start'),
-    onStop: () => console.log('Stream has stopped')
-  });
-
-  // Start and stop stream based on component lifecycle or user interactions
-  // ...
-
-  return (
-    <div>
-      <button onClick={() => startStream({ url: 'http://example.com/stream' })}>Start Stream</button>
-      <button onClick={stopStream}>Stop Stream</button>
-    </div>
-  );
-};
-
-export default MyComponent;
-```
-
-#### Using `useJsonStream`
-
-```typescript
-import React from 'react';
-import { useJsonStream } from 'stream-hooks';
-import { z } from 'zod';
-
-const MyJsonComponent = () => {
-  const schema = z.object({
-    message: z.string(),
-  });
-
-  const {
-    data,
-    startStream,
-    stopStream,
-    loading
-  } = useJsonStream({
-    schema,
-    onBeforeStart: () => console.log('JSON stream is about to start'),
-    onStop: () => console.log('JSON stream has stopped'),
-    onReceive: (json) => console.log('Received data:', json)
-  });
-
-  // Start and stop stream based on component lifecycle or user interactions
-  // ...
-
-  return (
-    <div>
-      <button onClick={() => startStream({ url: 'http://example.com/jsonstream' })}>Start JSON Stream</button>
-      <button onClick={stopStream}>Stop JSON Stream</button>
-      {loading && <p>Loading...</p>}
-      <pre>{JSON.stringify(data, null, 2)}</pre>
-    </div>
-  );
-};
-
-export default MyJsonComponent;
-```
diff --git a/apps/www/src/docs/stream-hooks.mdx b/apps/www/src/docs/stream-hooks.mdx
deleted file mode 100644
index a3a8d6a..0000000
--- a/apps/www/src/docs/stream-hooks.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-# stream-hooks
-
-## Introduction
-
-**stream-hooks** is a React hooks library designed to simplify the integration and management of streaming data in web applications. This package provides custom hooks that abstract the complexities of handling streaming data, making it easier for developers to focus on building responsive and dynamic UI.
-
-### Key Features
-
- - **Simplified Stream Management**: With useStream, manage the lifecycle of streaming data, including starting and stopping streams, with ease.
- - **JSON Streaming Made Easy**: useJsonStream extends useStream, adding the capability to parse streaming JSON data using Zod schemas.
- - **Seamless Integration with React**: Designed specifically for React, these hooks integrate smoothly into your React components.
- - **Real-time Data Handling**: Perfect for applications requiring real-time data updates, such as dashboards, live feeds, or interactive AI-driven UIs.
-
diff --git a/apps/www/src/docs/zod-stream-api.mdx b/apps/www/src/docs/zod-stream-api.mdx
deleted file mode 100644
index b38f225..0000000
--- a/apps/www/src/docs/zod-stream-api.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
-## API Reference
-
-`zod-stream` offers various classes and functions to handle structured JSON streaming. Below is the detailed API reference.
-
-### ZodStream
-
-```typescript
-import ZodStream from "zod-stream"
-
-const zodstream = new ZodStream(config)
-```
-
-#### Constructor
-
-```typescript
-constructor(config?: ClientConfig)
-```
-
-##### ClientConfig
-
-| Property | Type    | Description                                   | Default |
-|----------|---------|-----------------------------------------------|---------|
-| debug    | boolean | Enables debug mode for detailed logging.       | false   |
-
-#### Methods
-
-##### `chatCompletionStream`
-
-```typescript
-chatCompletionStream<T extends z.AnyZodObject>(params: StructredStreamCompletionParams<T>): Promise<AsyncGenerator<Partial<z.infer<T>>, void, unknown>>
-```
-
-##### StructredStreamCompletionParams
-
-| Property        | Type                  | Description                                         |
-|-----------------|-----------------------|-----------------------------------------------------|
-| completionPromise | Function             | A function that returns a promise resolving to a stream. |
-| data            | any                   | Data to be sent in the stream request.               |
-| response_model  | ResponseModel\<T>      | The Zod schema model for the stream response.        |
-
-##### ResponseModel
-
-| Property        | Type                  | Description                                         |
-|-----------------|-----------------------|-----------------------------------------------------|
-| name            | string                | Name of the response model.                         |
-| schema          | z.AnyZodObject        | The Zod schema for validation.                      |
-| description     | string                | A description of the response model.                |
-
-### OAIStream
-
-```typescript
-OAIStream({ res }: OaiStreamArgs): ReadableStream<Uint8Array>
-```
-
-##### OaiStreamArgs
-
-| Property        | Type                  | Description                                         |
-|-----------------|-----------------------|-----------------------------------------------------|
-| res             | Stream                | The stream of data from OpenAI or AnyScale.         |
diff --git a/apps/www/src/docs/zod-stream-examples-basic.mdx b/apps/www/src/docs/zod-stream-examples-basic.mdx
deleted file mode 100644
index e69de29..0000000
diff --git a/apps/www/src/docs/zod-stream-examples-next.mdx b/apps/www/src/docs/zod-stream-examples-next.mdx
deleted file mode 100644
index e69de29..0000000
diff --git a/apps/www/src/docs/zod-stream-getting-started.mdx b/apps/www/src/docs/zod-stream-getting-started.mdx
deleted file mode 100644
index 69809a8..0000000
--- a/apps/www/src/docs/zod-stream-getting-started.mdx
+++ /dev/null
@@ -1,117 +0,0 @@
-## Getting Started
-
-### Installation
-
-`zod-stream` can be easily installed using your preferred package manager. Below are the commands for pnpm, npm, and bun.
-
-#### With bun
-```bash
-$ bun add zod-stream zod openai
-```
-
-#### With pnpm
-```bash
-$ pnpm add zod-stream zod openai
-```
-
-#### With npm
-```bash
-$ npm install zod-stream zod openai
-```
-
-
-### Basic Setup
-
-To start using `zod-stream` in your project, follow these simple steps:
-
-1. **Define a response model**
-
-   Import and initialize the necessary modules from zod-stream, zod, and openai.
-
-   ```typescript
-      import { z } from "zod";
-
-      export const my_response_model = {
-        schema: z.object({
-          content: z.string()
-        }),
-        name: "bot response json"
-      }
-     ```
-2. **Create a structured LLM response using zod and zod-stream**
-
-   Ensure that your environment variables are properly configured, especially if you are interacting with external services like OpenAI.
-   ```typescript
-     process.env["OPENAI_API_KEY"] = "your-openai-api-key"; // Replace with your OpenAI API key
-     process.env["OPENAI_ORG_ID"] = "your-openai-org-id";   // Replace with your OpenAI Organization ID (if applicable)
-   ```
-
-   Import and initialize the necessary modules from zod-stream, zod, and openai, then pass your response model to the LLM provider using the `withResponseModel` utility.
-   ```typescript
-      import { withResponseModel } from "zod-stream";
-      import OpenAI from "openai";
-
-      import { my_response_model } from "./my_response_model"
-
-      const openAI = new OpenAI({
-        apiKey: process.env["OPENAI_API_KEY"],
-        organization: process.env["OPENAI_ORG_ID"]
-      });
-
-
-      // build completion params for the selected mode.
-      const params = withResponseModel({
-        response_model: my_response_model,
-        params: {
-          messages,
-          model: "gpt-4"
-        },
-        mode: "TOOLS"
-      })
-      
-      // make a completion call with your generated params
-      const extractionStream = await oai.chat.completions.create({
-        ...params,
-        stream: true
-      })
-
-      
-      // convert the default SSE response to a readable stream and then return as api response or pass elsewhere.
-      const my_stream = OAIStream({
-        res: extractionStream
-      })
-     ```     
-
-3. **Read the partial streaming response from the stream**
-
-   ```typescript
-      import ZodStreamfrom "zod-stream";
-      import OpenAI from "openai";
-
-      import { my_response_model } from "./my_response_model"
-
-      const zodstream = new ZodStream()
-
-      const stream = await zodstream.create({
-        completionPromise: async () => {
-          // a promise that returns the stream created in step 2. This could be a fetch call or a promise that resolves the same way.
-
-          const response = fetch("/api/get-stream", {
-            body: JSON.stringify({ messages: [] }),
-            method: "POST"
-          })
-
-          return response.body
-        },
-        // this schema should match the response model expected by the stream
-        response_model: my_response_model
-      })
-
-      for await (const chunk of stream) {
-        console.log(chunk) // safe to parse partial json
-      }
-    ```
-
-
-This setup will prepare your application to handle structured LLM response streams effectively using zod-stream.
-For more advanced configurations and detailed usage, refer to the Usage and API Reference sections.
\ No newline at end of file
diff --git a/apps/www/src/docs/zod-stream.mdx b/apps/www/src/docs/zod-stream.mdx
deleted file mode 100644
index f9a67e1..0000000
--- a/apps/www/src/docs/zod-stream.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
-# zod-stream
-
-## Introduction
-
-### Overview
-`zod-stream` is a powerful TypeScript toolkit designed for building dynamic, AI-generated UI. It provides a seamless interface for parsing structured, streaming JSON data from OpenAI or AnyScale, ensuring immediate safety and readability. Leveraging `Schema-Stream` for efficient parsing, `zod-stream` is ideal for real-time applications requiring structured LLM response streams.
-
-### Key Features
-  - **Efficient JSON Parsing**: Utilizes `Schema-Stream` for fast and efficient parsing of streaming JSON data.
-  - **Real-Time Data Validation**: Integrates with Zod for on-the-fly validation of data, ensuring that the streams are structured and conform to predefined schemas.
-  - **OpenAI Integration**: Seamlessly works with OpenAI, making it perfect for applications using AI-generated content.
-  - **AnyScale Compatibility**: Designed to be compatible with AnyScale, enhancing its versatility in various streaming contexts.
-  - **Dynamic AI-Generated UI**: Facilitates the creation of dynamic UI that are powered by AI, allowing for real-time updates and interactions.
-  - **TypeScript Support**: Built with TypeScript, offering strong typing and making it a natural fit for TypeScript-based projects.
-  - **Error Handling**: Robust error handling capabilities to ensure reliability and ease of debugging in production environments.
-  - **Customizable and Extendable**: Offers flexibility to be customized and extended to suit specific application needs.
-
-These features make `zod-stream` an ideal choice for developers looking to integrate structured, streaming JSON data from AI sources into their applications, especially those focusing on dynamic and interactive UIs.
\ No newline at end of file
diff --git a/apps/www/src/lib/metadata.ts b/apps/www/src/lib/metadata.ts
new file mode 100644
index 0000000..bc3c1ab
--- /dev/null
+++ b/apps/www/src/lib/metadata.ts
@@ -0,0 +1,8 @@
+import { createMetadataImage } from "fumadocs-core/server"
+
+import { source } from "@/lib/source"
+
+export const metadataImage = createMetadataImage({
+  imageRoute: "/docs-og",
+  source
+})
diff --git a/apps/www/src/lib/source.ts b/apps/www/src/lib/source.ts
new file mode 100644
index 0000000..2ef677d
--- /dev/null
+++ b/apps/www/src/lib/source.ts
@@ -0,0 +1,8 @@
+import { docs } from "@/../.source"
+import { loader } from "fumadocs-core/source"
+import { createMDXSource } from "fumadocs-mdx"
+
+export const source = loader({
+  baseUrl: "/docs",
+  source: createMDXSource(docs, [])
+})
diff --git a/apps/www/tailwind.config.ts b/apps/www/tailwind.config.ts
index e2903af..4949a51 100644
--- a/apps/www/tailwind.config.ts
+++ b/apps/www/tailwind.config.ts
@@ -1,13 +1,15 @@
 import sharedConfig from "@repo/tailwind-config/tailwind.config"
+import { createPreset } from "fumadocs-ui/tailwind-plugin"
 import type { Config } from "tailwindcss"
 
 const config: Pick<Config, "content" | "presets"> = {
   content: [
-    "../../packages/ui/dist/**/*.{mjs,js,ts,jsx,tsx}",
-    "./**/*.{js,ts,jsx,tsx}",
-    "./pages/**/*.{js,ts,jsx,tsx}"
+    "../../packages/ui/src/**/*.{mjs,js,ts,jsx,tsx}",
+    "../../node_modules/fumadocs-ui/dist/**/*.js",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./src/app/**/*.{js,ts,jsx,tsx}"
   ],
-  presets: [sharedConfig]
+  presets: [sharedConfig, createPreset()]
 }
 
 export default config
diff --git a/apps/www/tsconfig.json b/apps/www/tsconfig.json
index 5fc97e3..9e9daf9 100644
--- a/apps/www/tsconfig.json
+++ b/apps/www/tsconfig.json
@@ -7,7 +7,8 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@ui/*": ["../../packages/ui/src/*"]
     },
     "baseUrl": ".",
     "declaration": false,
@@ -20,10 +21,12 @@
   "include": [
     "next-env.d.ts",
     "next.config.js",
-    "**/*.ts",
-    "**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
     ".next/types/**/*.ts",
-    "postcss.config.js"
+    "postcss.config.js",
+    "tailwind.config.ts"
   ],
   "exclude": ["node_modules"]
 }
+  
\ No newline at end of file
diff --git a/apps/www/tsconfig.lint.json b/apps/www/tsconfig.lint.json
index 5fc97e3..026e0e1 100644
--- a/apps/www/tsconfig.lint.json
+++ b/apps/www/tsconfig.lint.json
@@ -7,7 +7,8 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@ui/*": ["../../packages/ui/src/*"]
     },
     "baseUrl": ".",
     "declaration": false,
@@ -20,10 +21,11 @@
   "include": [
     "next-env.d.ts",
     "next.config.js",
-    "**/*.ts",
-    "**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
     ".next/types/**/*.ts",
-    "postcss.config.js"
+    "postcss.config.js",
+    "tailwind.config.ts"
   ],
   "exclude": ["node_modules"]
 }
diff --git a/bun.lockb b/bun.lockb
index 80fdd9e..838b317 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 7eb6028..e2d08f9 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "scripts": {
     "build": "turbo run build --no-daemon --concurrency=11",
     "dev": "turbo dev --no-daemon --concurrency=11",
+    "docs": "turbo dev --filter=docs",
     "lint": "turbo lint --concurrency=11",
     "type-check": "turbo type-check --concurrency=11",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
@@ -11,7 +12,9 @@
     "start": "turbo next start",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "publish-packages": "turbo run build --filter='./public-packages/*' && changeset publish"
+    "publish-packages": "turbo run build --filter='./public-packages/*' && changeset publish",
+    "sync-ls": "syncpack list-mismatches",
+    "sync-up": "syncpack fix-mismatches"
   },
   "devDependencies": {
     "@changesets/changelog-github": "latest",
@@ -22,6 +25,7 @@
     "@types/bun": "^1.0.1",
     "husky": "^8.0.3",
     "prettier": "^3.1.1",
+    "syncpack": "^12.4.0",
     "turbo": "latest"
   },
   "engines": {
@@ -32,6 +36,5 @@
     "apps/*",
     "packages/*",
     "public-packages/*"
-  ],
-  "dependencies": {}
+  ]
 }
diff --git a/packages/constants/.eslintrc.js b/packages/constants/.eslintrc.js
deleted file mode 100644
index bce31ee..0000000
--- a/packages/constants/.eslintrc.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const { resolve } = require("node:path")
-
-const project = resolve(__dirname, "tsconfig.lint.json")
-
-/** @type {import("eslint").Linter.Config} */
-module.exports = {
-  root: true,
-  extends: ["@repo/eslint-config/react-internal.js"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project
-  },
-  overrides: [
-    {
-      extends: ["plugin:@typescript-eslint/disable-type-checked"],
-      files: ["./**/*.js", "*.js"]
-    }
-  ],
-  settings: {
-    tailwindcss: {
-      callees: ["cn"],
-      config: "tailwind.config.js"
-    }
-  }
-}
diff --git a/packages/constants/package.json b/packages/constants/package.json
deleted file mode 100644
index aefe7b0..0000000
--- a/packages/constants/package.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  "name": "@repo/constants",
-  "version": "0.0.1",
-  "private": true,
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "license": "MIT",
-  "exports": {
-    ".": "./dist/index.mjs",
-    "./types/api": "./dist/types/api.mjs"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint": "eslint src/",
-    "type-check": "tsc --noEmit",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
-  },
-  "devDependencies": {
-    "@repo/eslint-config": "workspace:*",
-    "@repo/tailwind-config": "workspace:*",
-    "@repo/typescript-config": "workspace:*",
-    "@turbo/gen": "^1.10.12",
-    "@types/node": "^20.5.2",
-    "@types/eslint": "^8.44.7",
-    "@types/react": "^18.2.18",
-    "@types/react-dom": "^18.2.18",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.53.0",
-    "typescript": "^5.2.2",
-    "ramda": "^0.29.0",
-    "zod":  "^3.23.3"
-  },
-  "peerDependencies": {},
-  "dependencies": {
-    "tsup": "^8.0.1"
-  }
-}
diff --git a/packages/constants/src/index.ts b/packages/constants/src/index.ts
deleted file mode 100644
index 32984dd..0000000
--- a/packages/constants/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const YO = "yo"
diff --git a/packages/constants/src/types/api.ts b/packages/constants/src/types/api.ts
deleted file mode 100644
index f2d0b5c..0000000
--- a/packages/constants/src/types/api.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const dude = "yo"
diff --git a/packages/constants/tsconfig.json b/packages/constants/tsconfig.json
deleted file mode 100644
index e01871f..0000000
--- a/packages/constants/tsconfig.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": "@repo/typescript-config/react-library.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "baseUrl": "."
-  },
-  "include": ["src", "turbo", "tsup.config.ts"],
-  "exclude": ["node_modules", "dist"]
-}
diff --git a/packages/constants/tsconfig.lint.json b/packages/constants/tsconfig.lint.json
deleted file mode 100644
index e01871f..0000000
--- a/packages/constants/tsconfig.lint.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": "@repo/typescript-config/react-library.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "baseUrl": "."
-  },
-  "include": ["src", "turbo", "tsup.config.ts"],
-  "exclude": ["node_modules", "dist"]
-}
diff --git a/packages/constants/tsup.config.ts b/packages/constants/tsup.config.ts
deleted file mode 100644
index 4efa68e..0000000
--- a/packages/constants/tsup.config.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { defineConfig } from "tsup"
-
-export default defineConfig(options => {
-  return {
-    splitting: true,
-    entry: ["src/**/*.{ts,tsx}"],
-    format: ["esm"],
-    dts: true,
-    minify: true,
-    clean: true,
-    ...options
-  }
-})
diff --git a/packages/constants/turbo.json b/packages/constants/turbo.json
deleted file mode 100644
index 59c7384..0000000
--- a/packages/constants/turbo.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "$schema": "https://turbo.build/schema.json",
-  "extends": ["//"],
-  "pipeline": {
-    "build": {
-      "outputs": ["dist/**"]
-    }
-  }
-}
diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
index 3ea7514..4debdf7 100644
--- a/packages/tailwind-config/package.json
+++ b/packages/tailwind-config/package.json
@@ -9,17 +9,17 @@
   "dependencies": {
     "@radix-ui/colors": "^1.0.1",
     "@tailwindcss/typography": "^0.5.9",
-    "tailwindcss-animate": "^1.0.5",
+    "tailwindcss-animate": "^1.0.6",
     "postcss-100vh-fix": "^1.0.2",
     "windy-radix-palette": "^0.6.1"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.16",
     "postcss": "^8.4.25",
-    "tailwindcss": "^3.3.2",
-    "typescript": "^5.2.2"
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.2.2"
+    "tailwindcss": "^3.3.5"
   }
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index f7145b6..b8ad3fb 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -2,106 +2,104 @@
   "name": "@repo/ui",
   "version": "0.0.1",
   "private": true,
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "type": "module",
   "license": "MIT",
   "exports": {
-    "./components/*": "./dist/components/*.mjs",
-    "./components/ui/*": "./dist/components/ui/*.mjs",
-    "./components/table": "./dist/components/table/index.mjs",
-    "./components/table/*": "./dist/components/table/*.mjs",
-    "./components/primitives/*": "./dist/components/primitives/*.mjs",
-    "./hooks/*": "./dist/hooks/*.mjs",
-    "./styles.css": "./dist/index.css"
+    "./components/*": "./src/components/*.tsx",
+    "./components/ui/*": "./src/components/ui/*.tsx",
+    "./components/table": "./src/components/table/index.tsx",
+    "./components/table/*": "./src/components/table/*.tsx",
+    "./components/primitives/*": "./src/components/primitives/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
   },
   "scripts": {
-    "build": "tailwindcss -i ./src/styles/globals.css -o dist/index.css && tsup",
-    "dev": "tailwindcss -i ./src/styles/globals.css -o ./dist/index.css --watch & tsup --watch",
-    "lint": "eslint src/",
+    "lint:check": "TIMING=1 eslint src --max-warnings=0",
+    "lint:fix": "eslint --fix src",
     "type-check": "tsc --noEmit",
     "generate:component": "turbo gen react-component",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
-    "@repo/tailwind-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@turbo/gen": "^1.11.3",
-    "@types/node": "^20.10.6",
-    "@types/eslint": "^8.56.1",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.53.0",
-    "react": "^18.2.0",
-    "typescript": "^5.2.2",
-    "tailwindcss": "^3.3.5",
-    "@hookform/resolvers": "^3.1.1",
-    "@mux/mux-player": "latest",
-    "@mux/mux-player-react": "^2.2.0",
-    "@qdrant/js-client-rest": "^1.6.0",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.0.4",
-    "@radix-ui/react-aspect-ratio": "^1.0.3",
-    "@radix-ui/react-avatar": "^1.0.3",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-context-menu": "^2.1.4",
-    "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
-    "@radix-ui/react-hover-card": "^1.0.6",
+    "@repo/tailwind-config": "workspace:*",
+    "autoprefixer": "^10.4.20",
+    "tailwindcss": "^3.4.14"
+  },
+  "peerDependencies": {
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "lucide-react": "*",
+    "next": "15.0.3"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.9.1",
+    "@mynaui/icons-react": "latest",
+    "@radix-ui/react-accessible-icon": "^1.1.0",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-context-menu": "^2.2.2",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-menubar": "^1.0.3",
-    "@radix-ui/react-navigation-menu": "^1.1.3",
-    "@radix-ui/react-popover": "^1.0.6",
-    "@radix-ui/react-progress": "^1.0.3",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.0.4",
-    "@radix-ui/react-select": "^1.2.2",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.4",
-    "@radix-ui/react-toggle": "^1.0.3",
-    "@radix-ui/react-tooltip": "^1.0.6",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.2",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.2",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
     "@tanstack/react-table": "^8.9.3",
-    "@types/three": "^0.155.0",
+    "@uiw/react-color": "^2.0.5",
     "avvvatars-react": "^0.4.2",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^1.2.1",
-    "cmdk": "^0.2.0",
-    "date-fns": "^2.30.0",
-    "framer-motion": "^10.12.18",
-    "ramda": "^0.29.0",
-    "react-day-picker": "^8.8.0",
-    "react-dom": "18.2.0",
+    "clsx": "^2.1.0",
+    "cmdk": "1.0.0",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.5.1",
+    "motion": "^12.0.0-alpha.2",
+    "input-otp": "^1.4.1",
+    "next-themes": "^0.4.3",
+    "ramda": "*",
+    "react-day-picker": "8.10.1",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-email": "latest",
-    "react-hook-form": "^7.45.2",
+    "react-hook-form": "^7.53.2",
     "react-intersection-observer": "^9.5.2",
     "react-markdown": "^8.0.7",
+    "react-resizable-panels": "^2.1.7",
     "reactflow": "^11.9.4",
+    "recharts": "^2.13.3",
     "rehype-highlight": "^6.0.0",
     "resend": "latest",
     "simplex-noise": "^4.0.1",
-    "sonner": "latest",
+    "sonner": "*",
     "svix": "^1.13.0",
-    "tailwind-merge": "^1.13.2",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss-animate": "^1.0.7",
     "tippy.js": "^6.3.7",
+    "tsup": "^8.0.1",
     "use-debounce": "^9.0.4",
-    "vaul": "^0.7.9",
-    "zod":  "^3.23.3"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "lucide-react": "latest"
+    "vaul": "*",
+    "zod": "^3.23.8"
   },
-  "dependencies": {
-    "@uiw/react-color": "^2.0.5",
-    "tsup": "^8.0.1"
+  "overrides": {
+    "react-is": "^19.0.0-rc-69d4b800-20241021"
   }
 }
diff --git a/packages/ui/src/components/animated-border-wrapper.tsx b/packages/ui/src/components/animated-border-wrapper.tsx
deleted file mode 100644
index be8d48e..0000000
--- a/packages/ui/src/components/animated-border-wrapper.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react"
-
-import { cn } from "@/lib/utils"
-
-export const AnimatedBorderWrapper = ({
-  children,
-  enabled,
-  strokeWidth = 3,
-  className
-}: {
-  children: React.ReactNode
-  enabled: boolean
-  strokeWidth?: number
-  className?: string
-}) => {
-  if (!enabled) return <>{children}</>
-
-  return (
-    <div
-      className={cn(
-        `min-w-full group shadow-xl relative overflow-hidden rounded-lg bg-white p-[2px] transition-all duration-300 ease-in-out bg-gradient-to-r from-fl-purple via-purple-500 to-fl-green`,
-        {
-          "className": !!className,
-          "p-[4px]": strokeWidth === 4,
-          "p-[3px]": strokeWidth === 3,
-          "p-[2px]": strokeWidth === 2,
-          "p-[1px]": strokeWidth === 1
-        }
-      )}
-    >
-      <div className="animate-spin-slow absolute -top-[1200%] -bottom-[1200%] left-[30%] right-[30%] bg-gradient-to-r from-transparent via-gray-100/80 to-transparent visible"></div>
-      <div className="bg-white rounded-md relative z-50 h-full w-full">{children}</div>
-    </div>
-  )
-}
diff --git a/packages/ui/src/components/message-loader.tsx b/packages/ui/src/components/message-loader.tsx
deleted file mode 100644
index 5b0815d..0000000
--- a/packages/ui/src/components/message-loader.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { motion } from "framer-motion"
-
-const loadingContainer = {
-  width: "1rem",
-  height: "1rem",
-  display: "flex",
-  justifyContent: "space-around"
-}
-
-const loadingCircle = {
-  display: "block",
-  width: "0.25rem",
-  height: "0.25rem",
-  backgroundColor: "hsl(var(--foreground))",
-  borderRadius: "0.25rem"
-}
-
-const loadingContainerVariants = {
-  start: {
-    transition: {
-      staggerChildren: 0.2
-    }
-  },
-  end: {
-    transition: {
-      staggerChildren: 0.2
-    }
-  }
-}
-
-const loadingCircleVariants = {
-  start: {
-    y: "50%"
-  },
-  end: {
-    y: "150%"
-  }
-}
-
-const loadingCircleTransition: {
-  duration: number
-  repeat: number
-  repeatType: "loop" | "reverse" | "mirror"
-  ease: string
-} = {
-  duration: 0.5,
-  repeat: Infinity,
-  repeatType: "reverse",
-  ease: "easeInOut"
-}
-
-export default function MessageLoader() {
-  return (
-    <motion.div
-      style={loadingContainer}
-      variants={loadingContainerVariants}
-      initial="start"
-      animate="end"
-    >
-      <motion.span
-        style={loadingCircle}
-        variants={loadingCircleVariants}
-        transition={loadingCircleTransition}
-      />
-      <motion.span
-        style={loadingCircle}
-        variants={loadingCircleVariants}
-        transition={loadingCircleTransition}
-      />
-      <motion.span
-        style={loadingCircle}
-        variants={loadingCircleVariants}
-        transition={loadingCircleTransition}
-      />
-    </motion.div>
-  )
-}
diff --git a/packages/ui/src/components/primitives/popover.tsx b/packages/ui/src/components/primitives/popover.tsx
index 238de30..d8bfee0 100644
--- a/packages/ui/src/components/primitives/popover.tsx
+++ b/packages/ui/src/components/primitives/popover.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Popover = PopoverPrimitive.Root
 
@@ -11,15 +11,18 @@ const PopoverTrigger = PopoverPrimitive.Trigger
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { blank?: boolean }
+>(({ className, blank = false, align = "center", sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 items-center rounded-md border border-stone-200 bg-white shadow-md animate-in fade-in-20 slide-in-from-top-1",
+        {
+          "animate-in fade-in-20 slide-in-from-top-1 z-50 items-center rounded-md border border-stone-200 bg-white shadow-md":
+            !blank
+        },
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/prompt-composer.tsx b/packages/ui/src/components/prompt-composer.tsx
deleted file mode 100644
index 0c3ae35..0000000
--- a/packages/ui/src/components/prompt-composer.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from "react"
-import { Forward, Loader2 } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input, InputProps } from "@/components/ui/input"
-
-import { AnimatedBorderWrapper } from "./animated-border-wrapper"
-
-export interface PromptComposerProps {
-  prompt: string
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void
-  onSubmit: (value: string) => void
-  loading: boolean
-  onCancel?: () => void
-  animatedLoading?: boolean
-  placeholder?: string
-  inputProps?: InputProps
-  jumbo?: boolean
-}
-
-/**
- * `PromptComposer` is a component that allows users to input prompts and submit them.
- *
- * @param {PromptComposerProps} props - The properties that define the component's behavior and display.
- *
- * @returns {React.ReactElement} The rendered `PromptComposer` component.
- */
-export function PromptComposer({
-  prompt = "",
-  placeholder,
-  onChange,
-  onKeyDown,
-  onSubmit,
-  onCancel,
-  loading = false,
-  animatedLoading = true,
-  inputProps = {},
-  jumbo = false
-}: PromptComposerProps) {
-  return (
-    <>
-      <AnimatedBorderWrapper enabled={animatedLoading && loading}>
-        <div className="flex h-auto flex-row items-center relative">
-          <div className="w-full">
-            <Input
-              {...inputProps}
-              disabled={loading}
-              autoFocus
-              onChange={onChange}
-              onKeyDown={onKeyDown}
-              placeholder={placeholder ?? "Ask me anything..."}
-              value={prompt}
-              className={cn(
-                "text-foreground focus:z-100 placeholder:text-foreground/50 relative flex h-11 w-full rounded-md bg-background py-3 pr-[52px] text-sm outline-none disabled:cursor-not-allowed disabled:opacity-[1] disabled:bg-muted disabled:placeholder-text-foreground/50 disabled:text-foreground/50",
-                {
-                  "text-lg placeholder:text-lg py-6 h-14": jumbo
-                }
-              )}
-            />
-          </div>
-          <div className="">
-            {loading ? (
-              <Loader2 className="ml-[-30px] h-4 w-4 shrink-0 animate-spin opacity-50" />
-            ) : (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => onSubmit(prompt)}
-                className="ml-[-46px] h-8"
-              >
-                <Forward className="h-4 w-4 shrink-0 cursor-pointer opacity-50" />
-              </Button>
-            )}
-          </div>
-        </div>
-        {loading && onCancel && (
-          <Button
-            variant="secondary"
-            size="sm"
-            onClick={onCancel}
-            className="absolute right-0 mt-2"
-          >
-            Stop Generating
-          </Button>
-        )}
-      </AnimatedBorderWrapper>
-    </>
-  )
-}
diff --git a/packages/ui/src/components/table/column-header.tsx b/packages/ui/src/components/table/column-header.tsx
index dfe25e1..f605d3f 100644
--- a/packages/ui/src/components/table/column-header.tsx
+++ b/packages/ui/src/components/table/column-header.tsx
@@ -1,15 +1,16 @@
 import { ArrowDownIcon, ArrowUpIcon, CaretSortIcon, EyeNoneIcon } from "@radix-ui/react-icons"
 import { Column } from "@tanstack/react-table"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { Button } from "@ui/components/ui/button"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from "@/components/ui/dropdown-menu"
+} from "@ui/components/ui/dropdown-menu"
+import { cn } from "@ui/lib/utils"
+
+import * as React from "react"
 
 interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>
@@ -31,29 +32,31 @@ export function DataTableColumnHeader<TData, TValue>({
     <div className={cn("flex items-center space-x-2", className)}>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm" className="-ml-3 h-8 data-[state=open]:bg-accent">
-            <span className={cn(titleClassName)}>{title}</span>
-            {column.getIsSorted() === "desc" ? (
-              <ArrowDownIcon className="ml-2 h-4 w-4" />
-            ) : column.getIsSorted() === "asc" ? (
-              <ArrowUpIcon className="ml-2 h-4 w-4" />
-            ) : (
-              <CaretSortIcon className="ml-2 h-4 w-4" />
-            )}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="hover:bg-muted hover:text-muted-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground -ml-1 h-7"
+          >
+            <span className={cn("truncate text-xs font-semibold", titleClassName)}>{title}</span>
+            {column.getIsSorted() === "desc" ?
+              <ArrowDownIcon className="ml-2 size-4" />
+            : column.getIsSorted() === "asc" ?
+              <ArrowUpIcon className="ml-2 size-4" />
+            : <CaretSortIcon className="ml-2 size-4" />}
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            <ArrowUpIcon className="text-muted-foreground/70 mr-2 size-3.5" />
             Asc
           </DropdownMenuItem>
           <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            <ArrowDownIcon className="text-muted-foreground/70 mr-2 size-3.5" />
             Desc
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            <EyeNoneIcon className="text-muted-foreground/70 mr-2 size-3.5" />
             Hide
           </DropdownMenuItem>
         </DropdownMenuContent>
diff --git a/packages/ui/src/components/table/column-toggle.tsx b/packages/ui/src/components/table/column-toggle.tsx
index f72b8c6..ff77403 100644
--- a/packages/ui/src/components/table/column-toggle.tsx
+++ b/packages/ui/src/components/table/column-toggle.tsx
@@ -3,15 +3,14 @@
 import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
 import { MixerHorizontalIcon } from "@radix-ui/react-icons"
 import { Table } from "@tanstack/react-table"
-
-import { Button } from "@/components/ui/button"
+import { Button } from "@ui/components/ui/button"
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuLabel,
   DropdownMenuSeparator
-} from "@/components/ui/dropdown-menu"
+} from "@ui/components/ui/dropdown-menu"
 
 interface DataTableViewOptionsProps<TData> {
   table: Table<TData>
@@ -21,11 +20,11 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
-          <MixerHorizontalIcon className="mr-2 h-4 w-4" />
-          View
+        <Button variant="outline" size="icon" className="ml-auto size-8">
+          <MixerHorizontalIcon className="size-4" />
         </Button>
       </DropdownMenuTrigger>
+
       <DropdownMenuContent align="end" className="w-[150px]">
         <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
         <DropdownMenuSeparator />
diff --git a/packages/ui/src/components/table/index.tsx b/packages/ui/src/components/table/index.tsx
index 54f60b4..786a5ed 100644
--- a/packages/ui/src/components/table/index.tsx
+++ b/packages/ui/src/components/table/index.tsx
@@ -1,7 +1,5 @@
 "use client"
 
-import { useEffect, useMemo, useState } from "react"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import {
   ColumnDef,
   ColumnFiltersState,
@@ -11,33 +9,70 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   PaginationState,
+  Renderable,
+  RowSelectionState,
+  Table as RTTAble,
   SortingState,
+  Updater,
   useReactTable,
   VisibilityState
 } from "@tanstack/react-table"
-
-import { Input } from "@/components/ui/input"
+import { Input } from "@ui/components/ui/input"
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
+  TableHeaderRow,
   TableRow
-} from "@/components/ui/table"
+} from "@ui/components/ui/table"
+import useLocalStorage from "@ui/hooks/use-local-storage"
+import { cn } from "@ui/lib/utils"
+import { SearchX } from "lucide-react"
+
+import { useEffect, useMemo, useState, type JSX } from "react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
 
+import { DataTableViewOptions } from "./column-toggle"
 import { DataTablePagination } from "./pagination"
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
+  actionColumn?: Renderable<{
+    row: TData
+    table: RTTAble<TData>
+    index: number
+    selected: boolean
+    isSelectedRow: boolean
+  }>
   data: TData[]
   rowCount: number
+  filterBy?: string
+  filterPlaceholderText?: string
+  name?: string
+  onRowClick?: (index?: number | undefined) => void
+  selectedRowClassname?: string
+  selectedRow?: number
+  rowSelection?: RowSelectionState
+  setRowSelection?: (rowSelection: RowSelectionState) => void
+  selectedRender?: ({ table }: { table: RTTAble<TData> }) => JSX.Element
 }
 
 export function DataTable<TData, TValue>({
   columns,
+  actionColumn,
   data,
-  rowCount
+  rowCount,
+  filterBy,
+  filterPlaceholderText,
+  name = "_ignore",
+  onRowClick,
+  selectedRow,
+  selectedRowClassname,
+  rowSelection,
+  setRowSelection,
+  selectedRender
 }: DataTableProps<TData, TValue>) {
   const router = useRouter()
   const pathname = usePathname()
@@ -45,14 +80,21 @@ export function DataTable<TData, TValue>({
 
   const [sorting, setSorting] = useState<SortingState>([])
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = useState({})
+  const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(
+    `${name}_data_table_cols`,
+    {}
+  )
+  const [_rowSelection, _setRowSelection] = useState({})
 
   const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
     pageIndex: Number(searchParams.get("skip") ?? 0) / Number(searchParams.get("take") ?? 10),
     pageSize: Number(searchParams.get("take") ?? 10)
   })
 
+  const handleColumnVisibilityChange = (updater: Updater<VisibilityState>) => {
+    setColumnVisibility(updater instanceof Function ? updater(columnVisibility) : updater)
+  }
+
   const pagination = useMemo(
     () => ({
       pageIndex,
@@ -69,16 +111,20 @@ export function DataTable<TData, TValue>({
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
-    onRowSelectionChange: setRowSelection,
+    onRowSelectionChange:
+      setRowSelection ?
+        updater =>
+          setRowSelection(updater instanceof Function ? updater(rowSelection ?? {}) : updater)
+      : _setRowSelection,
     onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
+    onColumnVisibilityChange: handleColumnVisibilityChange,
     onPaginationChange: setPagination,
     getFilteredRowModel: getFilteredRowModel(),
     manualPagination: true,
     state: {
       columnFilters,
       columnVisibility,
-      rowSelection,
+      rowSelection: rowSelection ?? _rowSelection,
       sorting,
       pagination
     }
@@ -88,70 +134,115 @@ export function DataTable<TData, TValue>({
     const newSkip = pageIndex * pageSize
     const newTake = pageSize ?? 10
 
-    const params = new URLSearchParams(Object.fromEntries(searchParams))
+    const paramsString = searchParams.toString()
+    const params = new URLSearchParams(paramsString)
 
     params.set("take", `${newTake}`)
     params.set("skip", `${newSkip}`)
 
     router.push(`${pathname}?${params.toString()}`)
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageIndex, pageSize])
 
   return (
     <>
-      <div className="flex items-center py-4">
-        <Input
-          placeholder="Filter conversations..."
-          value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
-          onChange={event => {
-            const target = event.target as HTMLInputElement
-            table.getColumn("name")?.setFilterValue(target?.value)
-          }}
-          className="max-w-sm"
-        />
-      </div>
-
-      <div className="rounded-md border">
+      {filterBy && (
+        <div className="flex items-center py-4">
+          <Input
+            placeholder={filterPlaceholderText}
+            value={filterBy ? (table.getColumn(filterBy)?.getFilterValue() as string) : ""}
+            onChange={event =>
+              filterBy && table.getColumn(filterBy)?.setFilterValue(event.target.value)
+            }
+            className="max-w-sm"
+          />
+        </div>
+      )}
+
+      <div className="p-2">
         <Table>
-          <TableHeader>
+          <TableHeader className="bg-none">
             {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id}>
+              <TableHeaderRow className="hover:bg-muted/0 bg-none" key={headerGroup.id}>
                 {headerGroup.headers.map(header => {
                   return (
                     <TableHead key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(header.column.columnDef.header, header.getContext())}
+                      {header.isPlaceholder ? null : (
+                        flexRender(header.column.columnDef.header, header.getContext())
+                      )}
                     </TableHead>
                   )
                 })}
-              </TableRow>
+                <TableHead className="w-12 px-0 pr-4">
+                  <div className="flex w-full flex-row-reverse">
+                    <DataTableViewOptions table={table} />
+                  </div>
+                </TableHead>
+              </TableHeaderRow>
             ))}
           </TableHeader>
+
           <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+            {table.getRowModel().rows?.length ?
+              table.getRowModel().rows.map((row, index) => (
+                <TableRow
+                  onClick={e => {
+                    if (
+                      e.target instanceof HTMLInputElement ||
+                      e.target instanceof HTMLButtonElement ||
+                      e.target instanceof HTMLAnchorElement ||
+                      e.target instanceof HTMLTextAreaElement ||
+                      e.target instanceof HTMLSelectElement ||
+                      e.target instanceof HTMLLabelElement
+                    ) {
+                      return
+                    }
+
+                    onRowClick && onRowClick(index === selectedRow ? undefined : index)
+                  }}
+                  className={cn({
+                    ...(selectedRowClassname ?
+                      {
+                        [selectedRowClassname]: selectedRow === index,
+                        "cursor-pointer": onRowClick
+                      }
+                    : {})
+                  })}
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
                   {row.getVisibleCells().map(cell => (
                     <TableCell key={cell.id}>
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}
+
+                  <TableCell key={"action"} className="pr-4">
+                    {actionColumn &&
+                      flexRender(actionColumn, {
+                        row: row.original,
+                        table,
+                        index,
+                        selected: row.getIsSelected(),
+                        isSelectedRow: selectedRow === index
+                      })}
+                  </TableCell>
                 </TableRow>
               ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
+            : null}
           </TableBody>
         </Table>
-      </div>
-      <div className="mt-8">
-        <DataTablePagination table={table} />
+
+        {!(table.getRowModel().rows?.length > 0) && (
+          <div className="flex min-h-24 w-full flex-col items-center justify-center gap-4 py-12">
+            <SearchX className="text-muted-foreground size-10" />
+            <h4 className="text-muted-foreground foreground w-full text-center text-sm font-bold uppercase tracking-wide">
+              No results.
+            </h4>
+          </div>
+        )}
+        <div className="mt-2">
+          <DataTablePagination table={table} selectedRender={selectedRender} />
+        </div>
       </div>
     </>
   )
diff --git a/packages/ui/src/components/table/pagination.tsx b/packages/ui/src/components/table/pagination.tsx
index dd3dc6f..f9a2979 100644
--- a/packages/ui/src/components/table/pagination.tsx
+++ b/packages/ui/src/components/table/pagination.tsx
@@ -5,39 +5,51 @@ import {
   DoubleArrowRightIcon
 } from "@radix-ui/react-icons"
 import { Table } from "@tanstack/react-table"
-
-import { Button } from "@/components/ui/button"
+import { Button } from "@ui/components/ui/button"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue
-} from "@/components/ui/select"
+} from "@ui/components/ui/select"
+
+import type { JSX } from "react";
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>
+  selectedRender?: ({ table }: { table: Table<TData> }) => JSX.Element
 }
 
-export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
+export function DataTablePagination<TData>({
+  table,
+  selectedRender
+}: DataTablePaginationProps<TData>) {
   return (
-    <div className="flex items-center justify-between px-2">
-      <div className="flex-1 text-sm text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
+    <div className="flex w-full items-center justify-between py-2">
+      {table.getFilteredSelectedRowModel().rows.length > 0 ?
+        selectedRender ?
+          selectedRender({ table })
+        : <div className="text-muted-foreground flex-1 text-xs">
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </div>
+
+      : <div />}
+
       <div className="flex items-center space-x-6 lg:space-x-8">
         <div className="flex items-center space-x-2">
-          <p className="text-sm font-medium">Rows per page</p>
+          <p className="text-xs font-medium">Rows per page</p>
           <Select
             value={`${table.getState().pagination.pageSize}`}
             onValueChange={value => {
               table.setPageSize(Number(value))
             }}
           >
-            <SelectTrigger className="h-8 w-[70px]">
+            <SelectTrigger className="h-6 w-[60px]">
               <SelectValue placeholder={table.getState().pagination.pageSize} />
             </SelectTrigger>
+
             <SelectContent side="top">
               {[10, 20, 30, 40, 50].map(pageSize => (
                 <SelectItem key={pageSize} value={`${pageSize}`}>
@@ -47,49 +59,52 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
             </SelectContent>
           </Select>
         </div>
-        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-        </div>
 
         {table.getPageCount() > 1 && (
-          <div className="flex items-center space-x-2">
-            <Button
-              variant="outline"
-              className="hidden h-8 w-8 p-0 lg:flex"
-              onClick={() => table.setPageIndex(0)}
-              disabled={!table.getCanPreviousPage()}
-            >
-              <span className="sr-only">Go to first page</span>
-              <DoubleArrowLeftIcon className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="outline"
-              className="h-8 w-8 p-0"
-              onClick={() => table.previousPage()}
-              disabled={!table.getCanPreviousPage()}
-            >
-              <span className="sr-only">Go to previous page</span>
-              <ChevronLeftIcon className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="outline"
-              className="h-8 w-8 p-0"
-              onClick={() => table.nextPage()}
-              disabled={!table.getCanNextPage()}
-            >
-              <span className="sr-only">Go to next page</span>
-              <ChevronRightIcon className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="outline"
-              className="hidden h-8 w-8 p-0 lg:flex"
-              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-              disabled={!table.getCanNextPage()}
-            >
-              <span className="sr-only">Go to last page</span>
-              <DoubleArrowRightIcon className="h-4 w-4" />
-            </Button>
-          </div>
+          <>
+            <div className="text-muted-foreground text-xs font-medium">
+              Page{"  "} <strong>{table.getState().pagination.pageIndex + 1}</strong> {` of `}
+              <strong>{table.getPageCount()}</strong>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Button
+                variant="outline"
+                className="hidden size-8 p-0 lg:flex"
+                onClick={() => table.setPageIndex(0)}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to first page</span>
+                <DoubleArrowLeftIcon className="size-4" />
+              </Button>
+              <Button
+                variant="outline"
+                className="size-8 p-0"
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to previous page</span>
+                <ChevronLeftIcon className="size-4" />
+              </Button>
+              <Button
+                variant="outline"
+                className="size-8 p-0"
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to next page</span>
+                <ChevronRightIcon className="size-4" />
+              </Button>
+              <Button
+                variant="outline"
+                className="hidden size-8 p-0 lg:flex"
+                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to last page</span>
+                <DoubleArrowRightIcon className="size-4" />
+              </Button>
+            </div>
+          </>
         )}
       </div>
     </div>
diff --git a/packages/ui/src/components/ui/accordion.tsx b/packages/ui/src/components/ui/accordion.tsx
index dd9455d..47244a2 100644
--- a/packages/ui/src/components/ui/accordion.tsx
+++ b/packages/ui/src/components/ui/accordion.tsx
@@ -1,10 +1,10 @@
 "use client"
 
-import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import { ChevronDownIcon } from "@radix-ui/react-icons"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Accordion = AccordionPrimitive.Root
 
@@ -24,13 +24,13 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDownIcon className="text-muted-foreground size-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
@@ -42,13 +42,10 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className={cn(
-      "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className
-    )}
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
     {...props}
   >
-    <div className="pb-4 pt-0">{children}</div>
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
   </AccordionPrimitive.Content>
 ))
 AccordionContent.displayName = AccordionPrimitive.Content.displayName
diff --git a/packages/ui/src/components/ui/alert-dialog.tsx b/packages/ui/src/components/ui/alert-dialog.tsx
index 6d969d5..7e1e712 100644
--- a/packages/ui/src/components/ui/alert-dialog.tsx
+++ b/packages/ui/src/components/ui/alert-dialog.tsx
@@ -1,19 +1,16 @@
 "use client"
 
-import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { buttonVariants } from "@ui/components/ui/button"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import * as React from "react"
 
 const AlertDialog = AlertDialogPrimitive.Root
 
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 
-const AlertDialogPortal = ({ ...props }: AlertDialogPrimitive.AlertDialogPortalProps) => (
-  <AlertDialogPrimitive.Portal {...props} />
-)
-AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName
+const AlertDialogPortal = AlertDialogPrimitive.Portal
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -21,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
       className
     )}
     {...props}
@@ -39,7 +36,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
         className
       )}
       {...props}
@@ -79,7 +76,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ))
@@ -107,6 +104,8 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 
 export {
   AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
   AlertDialogTrigger,
   AlertDialogContent,
   AlertDialogHeader,
diff --git a/packages/ui/src/components/ui/alert.tsx b/packages/ui/src/components/ui/alert.tsx
index 83ac18a..e26e784 100644
--- a/packages/ui/src/components/ui/alert.tsx
+++ b/packages/ui/src/components/ui/alert.tsx
@@ -1,10 +1,10 @@
-import * as React from "react"
+import { cn } from "@ui/lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "[&>svg]:text-foreground relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
   {
     variants: {
       variant: {
diff --git a/packages/ui/src/components/ui/avatar.tsx b/packages/ui/src/components/ui/avatar.tsx
index 3a28add..466e5d1 100644
--- a/packages/ui/src/components/ui/avatar.tsx
+++ b/packages/ui/src/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -11,7 +11,7 @@ const Avatar = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    className={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
     {...props}
   />
 ))
@@ -23,7 +23,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn("aspect-square size-full", className)}
     {...props}
   />
 ))
@@ -35,10 +35,7 @@ const AvatarFallback = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    )}
+    className={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
     {...props}
   />
 ))
diff --git a/packages/ui/src/components/ui/badge.tsx b/packages/ui/src/components/ui/badge.tsx
index 88d11e7..7f8cf73 100644
--- a/packages/ui/src/components/ui/badge.tsx
+++ b/packages/ui/src/components/ui/badge.tsx
@@ -1,18 +1,18 @@
-import * as React from "react"
+import { cn } from "@ui/lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
         outline: "text-foreground"
       }
     },
diff --git a/packages/ui/src/components/ui/breadcrumb.tsx b/packages/ui/src/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..cb2e6cb
--- /dev/null
+++ b/packages/ui/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,101 @@
+import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
+import { Slot } from "@radix-ui/react-slot"
+import { cn } from "@ui/lib/utils"
+
+import * as React from "react"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  )
+)
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+)
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRightIcon />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex size-9 items-center justify-center", className)}
+    {...props}
+  >
+    <DotsHorizontalIcon className="size-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis
+}
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
index 22d4631..ff10e56 100644
--- a/packages/ui/src/components/ui/button.tsx
+++ b/packages/ui/src/components/ui/button.tsx
@@ -1,19 +1,19 @@
-import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
+import { cn } from "@ui/lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+          "border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
       },
diff --git a/packages/ui/src/components/ui/calendar.tsx b/packages/ui/src/components/ui/calendar.tsx
index 96bf1c3..b5f05fa 100644
--- a/packages/ui/src/components/ui/calendar.tsx
+++ b/packages/ui/src/components/ui/calendar.tsx
@@ -1,11 +1,11 @@
 "use client"
 
-import * as React from "react"
 import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
+import { buttonVariants } from "@ui/components/ui/button"
+import { cn } from "@ui/lib/utils"
 import { DayPicker } from "react-day-picker"
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import * as React from "react"
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
@@ -22,7 +22,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
@@ -30,23 +30,31 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         head_row: "flex",
         head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
-        cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        cell: cn(
+          "[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range" ?
+            "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+          : "[&:has([aria-selected])]:rounded-md"
+        ),
         day: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+          "size-8 p-0 font-normal aria-selected:opacity-100"
         ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
         day_selected:
           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
         day_today: "bg-accent text-accent-foreground",
-        day_outside: "text-muted-foreground opacity-50",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
         day_disabled: "text-muted-foreground opacity-50",
         day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
         day_hidden: "invisible",
         ...classNames
       }}
       components={{
-        IconLeft: () => <ChevronLeftIcon className="h-4 w-4" />,
-        IconRight: () => <ChevronRightIcon className="h-4 w-4" />
+        IconLeft: () => <ChevronLeftIcon className="size-4" />,
+        IconRight: () => <ChevronRightIcon className="size-4" />
       }}
       {...props}
     />
diff --git a/packages/ui/src/components/ui/card.tsx b/packages/ui/src/components/ui/card.tsx
index 64b5696..8deeed8 100644
--- a/packages/ui/src/components/ui/card.tsx
+++ b/packages/ui/src/components/ui/card.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
+      className={cn("bg-card text-card-foreground rounded-xl border shadow", className)}
       {...props}
     />
   )
@@ -20,9 +20,9 @@ const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
 )
 CardHeader.displayName = "CardHeader"
 
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <h3
+    <div
       ref={ref}
       className={cn("font-semibold leading-none tracking-tight", className)}
       {...props}
@@ -31,12 +31,11 @@ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
 )
 CardTitle.displayName = "CardTitle"
 
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-))
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+  )
+)
 CardDescription.displayName = "CardDescription"
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
@@ -48,7 +47,7 @@ CardContent.displayName = "CardContent"
 
 const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn(" flex items-center p-6 pt-0", className)} {...props} />
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
   )
 )
 CardFooter.displayName = "CardFooter"
diff --git a/packages/ui/src/components/ui/carousel.tsx b/packages/ui/src/components/ui/carousel.tsx
new file mode 100644
index 0000000..bba85ba
--- /dev/null
+++ b/packages/ui/src/components/ui/carousel.tsx
@@ -0,0 +1,235 @@
+"use client"
+
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
+import { Button } from "@ui/components/ui/button"
+import { cn } from "@ui/lib/utils"
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react"
+
+import * as React from "react"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) {
+      return
+    }
+
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) {
+      return
+    }
+
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) {
+      return
+    }
+
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext
+      }}
+    >
+      <div
+        ref={ref}
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+})
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel()
+
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn(
+            "flex",
+            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+            className
+          )}
+          {...props}
+        />
+      </div>
+    )
+  }
+)
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel()
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn(
+          "min-w-0 shrink-0 grow-0 basis-full",
+          orientation === "horizontal" ? "pl-4" : "pt-4",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute size-8 rounded-full",
+          orientation === "horizontal" ?
+            "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeftIcon className="size-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    )
+  }
+)
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute size-8 rounded-full",
+          orientation === "horizontal" ?
+            "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRightIcon className="size-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    )
+  }
+)
+CarouselNext.displayName = "CarouselNext"
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }
diff --git a/packages/ui/src/components/ui/chart.tsx b/packages/ui/src/components/ui/chart.tsx
new file mode 100644
index 0000000..14946c5
--- /dev/null
+++ b/packages/ui/src/components/ui/chart.tsx
@@ -0,0 +1,324 @@
+"use client"
+
+import { cn } from "@ui/lib/utils"
+import * as RechartsPrimitive from "recharts"
+
+import * as React from "react"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color)
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n")
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string" ?
+          config[label as keyof typeof config]?.label || label
+        : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ?
+                  formatter(item.value, item.name, item, index, item.payload)
+                : <>
+                    {itemConfig?.icon ?
+                      <itemConfig.icon />
+                    : !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed"
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    }
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="text-foreground font-mono font-medium tabular-nums">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                }
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload.map(item => {
+        const key = `${nameKey || item.dataKey || "value"}`
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+        return (
+          <div
+            key={item.value}
+            className={cn("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3")}
+          >
+            {itemConfig?.icon && !hideIcon ?
+              <itemConfig.icon />
+            : <div
+                className="size-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color
+                }}
+              />
+            }
+            {itemConfig?.label}
+          </div>
+        )
+      })}
+    </div>
+  )
+})
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ?
+      payload.payload
+    : undefined
+
+  let configLabelKey: string = key
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle
+}
diff --git a/packages/ui/src/components/ui/checkbox.tsx b/packages/ui/src/components/ui/checkbox.tsx
index be0d7c9..3860430 100644
--- a/packages/ui/src/components/ui/checkbox.tsx
+++ b/packages/ui/src/components/ui/checkbox.tsx
@@ -1,10 +1,10 @@
 "use client"
 
-import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { CheckIcon } from "@radix-ui/react-icons"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -13,13 +13,13 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      <CheckIcon className="h-4 w-4" />
+      <CheckIcon className="size-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))
diff --git a/packages/ui/src/components/ui/color-picker.tsx b/packages/ui/src/components/ui/color-picker.tsx
deleted file mode 100644
index aa89e31..0000000
--- a/packages/ui/src/components/ui/color-picker.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-"use client"
-
-import { Sketch } from "@uiw/react-color"
-import { Paintbrush } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-
-export function ColorPicker({
-  background,
-  setBackground,
-  className
-}: {
-  background: string
-  setBackground: (background: string) => void
-  className?: string
-}) {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={"outline"}
-          size={"sm"}
-          className={cn(
-            "justify-start text-left",
-            !background && "text-muted-foreground",
-            className
-          )}
-        >
-          <div className="w-full flex items-center gap-2">
-            {background ? (
-              <div
-                className="h-4 w-4 rounded !bg-center !bg-cover transition-all"
-                style={{ background }}
-              ></div>
-            ) : (
-              <Paintbrush className="h-4 w-4" />
-            )}
-            <div className="truncate flex-1">{background ? background : "Pick a color"}</div>
-          </div>
-        </Button>
-      </PopoverTrigger>
-
-      <PopoverContent className="bg-transparent border-none shadow-none p-0">
-        <div className="w-full">
-          <Sketch
-            className="shadow-2xl"
-            color={background}
-            onChange={color => {
-              setBackground(
-                Object.values(color.hsl)
-                  .map((value, index) => {
-                    if (index === 0) {
-                      return value.toFixed(0)
-                    }
-
-                    return `${value.toFixed(2)}%`
-                  })
-                  .join(" ")
-              )
-            }}
-          />
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/packages/ui/src/components/ui/command.tsx b/packages/ui/src/components/ui/command.tsx
index 389e50b..e945e19 100644
--- a/packages/ui/src/components/ui/command.tsx
+++ b/packages/ui/src/components/ui/command.tsx
@@ -1,12 +1,12 @@
 "use client"
 
-import * as React from "react"
-import { DialogProps } from "@radix-ui/react-dialog"
+import { type DialogProps } from "@radix-ui/react-dialog"
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
+import { Dialog, DialogContent } from "@ui/components/ui/dialog"
+import { cn } from "@ui/lib/utils"
 import { Command as CommandPrimitive } from "cmdk"
 
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import * as React from "react"
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -15,7 +15,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      "bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md",
       className
     )}
     {...props}
@@ -23,13 +23,11 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName
 
-type CommandDialogProps = DialogProps
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
           {children}
         </Command>
       </DialogContent>
@@ -41,13 +39,12 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  // eslint-disable-next-line
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <MagnifyingGlassIcon className="mr-2 size-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -86,7 +83,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
       className
     )}
     {...props}
@@ -101,7 +98,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
+    className={cn("bg-border -mx-1 h-px", className)}
     {...props}
   />
 ))
@@ -114,7 +111,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}
@@ -126,7 +123,7 @@ CommandItem.displayName = CommandPrimitive.Item.displayName
 const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
   )
diff --git a/packages/ui/src/components/ui/context-menu.tsx b/packages/ui/src/components/ui/context-menu.tsx
index efe3ab6..0fdf993 100644
--- a/packages/ui/src/components/ui/context-menu.tsx
+++ b/packages/ui/src/components/ui/context-menu.tsx
@@ -1,10 +1,10 @@
 "use client"
 
-import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
 import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const ContextMenu = ContextMenuPrimitive.Root
 
@@ -27,14 +27,14 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
       inset && "pl-8",
       className
     )}
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRightIcon className="ml-auto size-4" />
   </ContextMenuPrimitive.SubTrigger>
 ))
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
@@ -46,7 +46,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
       className
     )}
     {...props}
@@ -62,7 +62,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -96,15 +96,15 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <CheckIcon className="size-4" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -119,14 +119,14 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <DotFilledIcon className="size-4 fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -142,7 +142,7 @@ const ContextMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
     ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
+    className={cn("text-foreground px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
     {...props}
   />
 ))
@@ -154,7 +154,7 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    className={cn("bg-border -mx-1 my-1 h-px", className)}
     {...props}
   />
 ))
@@ -163,7 +163,7 @@ ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
 const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
   )
diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
index f28562a..20dceef 100644
--- a/packages/ui/src/components/ui/dialog.tsx
+++ b/packages/ui/src/components/ui/dialog.tsx
@@ -1,19 +1,18 @@
 "use client"
 
-import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { Cross2Icon } from "@radix-ui/react-icons"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Dialog = DialogPrimitive.Root
 
 const DialogTrigger = DialogPrimitive.Trigger
 
-const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal {...props} />
-)
-DialogPortal.displayName = DialogPrimitive.Portal.displayName
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -22,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
       className
     )}
     {...props}
@@ -39,14 +38,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "max-h-[100dvh] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <Cross2Icon className="h-4 w-4" />
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <Cross2Icon className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
@@ -85,7 +84,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ))
@@ -93,7 +92,10 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
   Dialog,
+  DialogPortal,
+  DialogOverlay,
   DialogTrigger,
+  DialogClose,
   DialogContent,
   DialogHeader,
   DialogFooter,
diff --git a/packages/ui/src/components/ui/drawer.tsx b/packages/ui/src/components/ui/drawer.tsx
index 5567bcf..96bb87d 100644
--- a/packages/ui/src/components/ui/drawer.tsx
+++ b/packages/ui/src/components/ui/drawer.tsx
@@ -1,48 +1,100 @@
 "use client"
 
-import React from "react"
-import { Cross2Icon } from "@radix-ui/react-icons"
-import { Drawer as Vaul } from "vaul"
+import { cn } from "@ui/lib/utils"
+import { Drawer as DrawerPrimitive } from "vaul"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
-export const Drawer = ({
+const Drawer = ({
   shouldScaleBackground = true,
   ...props
-}: React.ComponentProps<typeof Vaul.Root>) => (
-  <Vaul.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
 )
-
 Drawer.displayName = "Drawer"
 
-export const DrawerTrigger = Vaul.Trigger
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
 
-export const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof Vaul.Content>,
-  React.ComponentPropsWithoutRef<typeof Vaul.Content>
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <Vaul.Portal>
-    <Vaul.Overlay className="fixed inset-0 bg-foreground/40" />
-    <Vaul.Content
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "flex flex-col rounded-t-[10px] h-[96%] mt-24 fixed bottom-0 left-0 right-0 bg-background z-50",
+        "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
         className
       )}
       {...props}
     >
-      <div className="mx-auto w-12 md:w-24 h-1.5 flex-shrink-0 rounded-full bg-foreground/70 my-8" />
+      <div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
       {children}
-      <Vaul.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <Cross2Icon className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </Vaul.Close>
-    </Vaul.Content>
-  </Vaul.Portal>
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
 ))
+DrawerContent.displayName = "DrawerContent"
 
-DrawerContent.displayName = Vaul.Content.displayName
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
+)
+DrawerHeader.displayName = "DrawerHeader"
 
-export const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
 )
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription
+}
diff --git a/packages/ui/src/components/ui/dropdown-menu.tsx b/packages/ui/src/components/ui/dropdown-menu.tsx
index acf867c..dfafcc2 100644
--- a/packages/ui/src/components/ui/dropdown-menu.tsx
+++ b/packages/ui/src/components/ui/dropdown-menu.tsx
@@ -1,10 +1,10 @@
 "use client"
 
-import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon } from "@radix-ui/react-icons"
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -27,14 +27,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRightIcon className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
@@ -46,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
       className
     )}
     {...props}
@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
@@ -82,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -98,15 +98,15 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <CheckIcon className="size-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -121,14 +121,14 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4 fill-current" />
+        <DotFilledIcon className="size-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -156,7 +156,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("bg-muted -mx-1 my-1 h-px", className)}
     {...props}
   />
 ))
diff --git a/packages/ui/src/components/ui/form.tsx b/packages/ui/src/components/ui/form.tsx
index 7a98ec5..76bda6d 100644
--- a/packages/ui/src/components/ui/form.tsx
+++ b/packages/ui/src/components/ui/form.tsx
@@ -1,6 +1,9 @@
-import * as React from "react"
+"use client"
+
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { Slot } from "@radix-ui/react-slot"
+import { Label } from "@ui/components/ui/label"
+import { cn } from "@ui/lib/utils"
 import {
   Controller,
   ControllerProps,
@@ -10,8 +13,7 @@ import {
   useFormContext
 } from "react-hook-form"
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import * as React from "react"
 
 const Form = FormProvider
 
@@ -124,7 +126,7 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      className={cn("text-muted-foreground text-[0.8rem]", className)}
       {...props}
     />
   )
@@ -146,7 +148,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      className={cn("text-destructive text-[0.8rem] font-medium", className)}
       {...props}
     >
       {body}
diff --git a/packages/ui/src/components/ui/hover-card.tsx b/packages/ui/src/components/ui/hover-card.tsx
index e54d91c..b3d79ea 100644
--- a/packages/ui/src/components/ui/hover-card.tsx
+++ b/packages/ui/src/components/ui/hover-card.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import * as React from "react"
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const HoverCard = HoverCardPrimitive.Root
 
@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none",
       className
     )}
     {...props}
diff --git a/packages/ui/src/components/ui/input-otp.tsx b/packages/ui/src/components/ui/input-otp.tsx
new file mode 100644
index 0000000..6e5f694
--- /dev/null
+++ b/packages/ui/src/components/ui/input-otp.tsx
@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { cn } from "@ui/lib/utils"
+import { MinusIcon } from "@radix-ui/react-icons"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <MinusIcon />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/packages/ui/src/components/ui/input.tsx b/packages/ui/src/components/ui/input.tsx
index 7ce676e..106ced3 100644
--- a/packages/ui/src/components/ui/input.tsx
+++ b/packages/ui/src/components/ui/input.tsx
@@ -1,21 +1,16 @@
-import * as React from "react"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-          {
-            "file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 pt-1.5 pl-1.5":
-              type === "file"
-          }
+          "border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
         )}
         ref={ref}
         {...props}
diff --git a/packages/ui/src/components/ui/label.tsx b/packages/ui/src/components/ui/label.tsx
index e462202..4c5d75f 100644
--- a/packages/ui/src/components/ui/label.tsx
+++ b/packages/ui/src/components/ui/label.tsx
@@ -1,10 +1,10 @@
 "use client"
 
-import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
+import { cn } from "@ui/lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
diff --git a/packages/ui/src/components/ui/menubar.tsx b/packages/ui/src/components/ui/menubar.tsx
index 7f3a88d..e74e3c9 100644
--- a/packages/ui/src/components/ui/menubar.tsx
+++ b/packages/ui/src/components/ui/menubar.tsx
@@ -1,10 +1,10 @@
 "use client"
 
-import * as React from "react"
 import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const MenubarMenu = MenubarPrimitive.Menu
 
@@ -23,7 +23,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+      "bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-sm",
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none",
       className
     )}
     {...props}
@@ -55,14 +55,14 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
       inset && "pl-8",
       className
     )}
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRightIcon className="ml-auto size-4" />
   </MenubarPrimitive.SubTrigger>
 ))
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
@@ -74,7 +74,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
       className
     )}
     {...props}
@@ -93,7 +93,7 @@ const MenubarContent = React.forwardRef<
       alignOffset={alignOffset}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] overflow-hidden rounded-md border p-1 shadow-md",
         className
       )}
       {...props}
@@ -111,7 +111,7 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -127,15 +127,15 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <CheckIcon className="size-4" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
@@ -150,14 +150,14 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <DotFilledIcon className="size-4 fill-current" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
@@ -185,7 +185,7 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("bg-muted -mx-1 my-1 h-px", className)}
     {...props}
   />
 ))
@@ -194,7 +194,7 @@ MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
 const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
   )
diff --git a/packages/ui/src/components/ui/navigation-menu.tsx b/packages/ui/src/components/ui/navigation-menu.tsx
index f41ef35..4972c0a 100644
--- a/packages/ui/src/components/ui/navigation-menu.tsx
+++ b/packages/ui/src/components/ui/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
 import { ChevronDownIcon } from "@radix-ui/react-icons"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cn } from "@ui/lib/utils"
 import { cva } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
@@ -35,7 +35,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+  "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[active]:bg-accent/50 data-[state=open]:bg-accent/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50"
 )
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -49,7 +49,7 @@ const NavigationMenuTrigger = React.forwardRef<
   >
     {children}{" "}
     <ChevronDownIcon
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
@@ -63,7 +63,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "right-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto",
       className
     )}
     {...props}
@@ -77,10 +77,10 @@ const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div className={cn("absolute right-0 top-full flex justify-center")}>
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
         className
       )}
       ref={ref}
@@ -97,12 +97,12 @@ const NavigationMenuIndicator = React.forwardRef<
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
       className
     )}
     {...props}
   >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div className="bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ))
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName
diff --git a/packages/ui/src/components/ui/pagination.tsx b/packages/ui/src/components/ui/pagination.tsx
new file mode 100644
index 0000000..ac1f59b
--- /dev/null
+++ b/packages/ui/src/components/ui/pagination.tsx
@@ -0,0 +1,94 @@
+import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
+import { ButtonProps, buttonVariants } from "@ui/components/ui/button"
+import { cn } from "@ui/lib/utils"
+
+import * as React from "react"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+  )
+)
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+  ({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />
+)
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeftIcon className="size-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRightIcon className="size-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span aria-hidden className={cn("flex size-9 items-center justify-center", className)} {...props}>
+    <DotsHorizontalIcon className="size-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis
+}
diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx
index a0ec48b..6e52199 100644
--- a/packages/ui/src/components/ui/popover.tsx
+++ b/packages/ui/src/components/ui/popover.tsx
@@ -1,14 +1,16 @@
 "use client"
 
-import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Popover = PopoverPrimitive.Root
 
 const PopoverTrigger = PopoverPrimitive.Trigger
 
+const PopoverAnchor = PopoverPrimitive.Anchor
+
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -19,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
         className
       )}
       {...props}
@@ -28,4 +30,4 @@ const PopoverContent = React.forwardRef<
 ))
 PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/packages/ui/src/components/ui/progress.tsx b/packages/ui/src/components/ui/progress.tsx
index 95c1902..e8b1656 100644
--- a/packages/ui/src/components/ui/progress.tsx
+++ b/packages/ui/src/components/ui/progress.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import * as React from "react"
 import * as ProgressPrimitive from "@radix-ui/react-progress"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -11,11 +11,11 @@ const Progress = React.forwardRef<
 >(({ className, value, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
-    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
+    className={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="bg-primary size-full flex-1 transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
diff --git a/packages/ui/src/components/ui/radio-group.tsx b/packages/ui/src/components/ui/radio-group.tsx
index 00166d1..7f82819 100644
--- a/packages/ui/src/components/ui/radio-group.tsx
+++ b/packages/ui/src/components/ui/radio-group.tsx
@@ -1,10 +1,10 @@
 "use client"
 
-import * as React from "react"
-import { CheckIcon } from "@radix-ui/react-icons"
+import { DotFilledIcon } from "@radix-ui/react-icons"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -22,13 +22,13 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "border-primary text-primary focus-visible:ring-ring aspect-square size-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="h-3.5 w-3.5 fill-primary" />
+        <DotFilledIcon className="fill-primary size-3.5" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )
diff --git a/packages/ui/src/components/ui/resizable.tsx b/packages/ui/src/components/ui/resizable.tsx
new file mode 100644
index 0000000..955b2b9
--- /dev/null
+++ b/packages/ui/src/components/ui/resizable.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import { DragHandleDots2Icon } from "@radix-ui/react-icons"
+import { cn } from "@ui/lib/utils"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn("flex size-full data-[panel-group-direction=vertical]:flex-col", className)}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
+        <DragHandleDots2Icon className="size-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/packages/ui/src/components/ui/scroll-area.tsx b/packages/ui/src/components/ui/scroll-area.tsx
index 38500af..5ae3186 100644
--- a/packages/ui/src/components/ui/scroll-area.tsx
+++ b/packages/ui/src/components/ui/scroll-area.tsx
@@ -1,16 +1,20 @@
 "use client"
 
-import * as React from "react"
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root className={cn("relative overflow-hidden", className)} {...props}>
-    <ScrollAreaPrimitive.Viewport ref={ref} className="h-full w-full rounded-[inherit]">
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
@@ -29,12 +33,12 @@ const ScrollBar = React.forwardRef<
     className={cn(
       "flex touch-none select-none transition-colors",
       orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 border-t border-t-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
index 1d1b307..ef01125 100644
--- a/packages/ui/src/components/ui/select.tsx
+++ b/packages/ui/src/components/ui/select.tsx
@@ -1,10 +1,10 @@
 "use client"
 
-import * as React from "react"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons"
 import * as SelectPrimitive from "@radix-ui/react-select"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Select = SelectPrimitive.Root
 
@@ -19,19 +19,47 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      "border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="h-4 w-4 opacity-50" />
+      <ChevronDownIcon className="size-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronUpIcon className="size-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronDownIcon className="size-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
@@ -40,7 +68,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -48,6 +76,7 @@ const SelectContent = React.forwardRef<
       position={position}
       {...props}
     >
+      <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
           "p-1",
@@ -57,6 +86,7 @@ const SelectContent = React.forwardRef<
       >
         {children}
       </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
 ))
@@ -81,14 +111,14 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute right-2 flex size-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <CheckIcon className="size-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
@@ -102,7 +132,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("bg-muted -mx-1 my-1 h-px", className)}
     {...props}
   />
 ))
@@ -116,5 +146,7 @@ export {
   SelectContent,
   SelectLabel,
   SelectItem,
-  SelectSeparator
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton
 }
diff --git a/packages/ui/src/components/ui/separator.tsx b/packages/ui/src/components/ui/separator.tsx
index 7d7717f..92e0bac 100644
--- a/packages/ui/src/components/ui/separator.tsx
+++ b/packages/ui/src/components/ui/separator.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -14,7 +14,7 @@ const Separator = React.forwardRef<
     decorative={decorative}
     orientation={orientation}
     className={cn(
-      "shrink-0 bg-border",
+      "bg-border shrink-0",
       orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
       className
     )}
diff --git a/packages/ui/src/components/ui/sheet.tsx b/packages/ui/src/components/ui/sheet.tsx
index e3383d3..6e42510 100644
--- a/packages/ui/src/components/ui/sheet.tsx
+++ b/packages/ui/src/components/ui/sheet.tsx
@@ -1,11 +1,11 @@
 "use client"
 
-import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { Cross2Icon } from "@radix-ui/react-icons"
+import { cn } from "@ui/lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Sheet = SheetPrimitive.Root
 
@@ -13,19 +13,15 @@ const SheetTrigger = SheetPrimitive.Trigger
 
 const SheetClose = SheetPrimitive.Close
 
-const SheetPortal = ({ ...props }: SheetPrimitive.DialogPortalProps) => (
-  <SheetPrimitive.Portal {...props} />
-)
-SheetPortal.displayName = SheetPrimitive.Portal.displayName
+const SheetPortal = SheetPrimitive.Portal
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & { inContainer?: boolean }
->(({ className, inContainer, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      { absolute: inContainer },
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
       className
     )}
     {...props}
@@ -35,16 +31,16 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
         bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
+        left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
         right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+          "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
       }
     },
     defaultVariants: {
@@ -59,24 +55,16 @@ interface SheetContentProps
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps & { container?: HTMLElement; hideClose?: boolean }
->(({ side = "right", className, children, container, hideClose = false, ...props }, ref) => (
-  <SheetPortal container={container}>
-    <SheetOverlay inContainer={!!container} />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className, {
-        absolute: !!container
-      })}
-      {...props}
-    >
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <Cross2Icon className="size-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
       {children}
-      {!hideClose && (
-        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-          <Cross2Icon className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      )}
     </SheetPrimitive.Content>
   </SheetPortal>
 ))
@@ -101,7 +89,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
+    className={cn("text-foreground text-lg font-semibold", className)}
     {...props}
   />
 ))
@@ -113,7 +101,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ))
@@ -121,6 +109,8 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName
 
 export {
   Sheet,
+  SheetPortal,
+  SheetOverlay,
   SheetTrigger,
   SheetClose,
   SheetContent,
diff --git a/packages/ui/src/components/ui/sidebar.tsx b/packages/ui/src/components/ui/sidebar.tsx
new file mode 100644
index 0000000..a679b17
--- /dev/null
+++ b/packages/ui/src/components/ui/sidebar.tsx
@@ -0,0 +1,736 @@
+"use client"
+
+import { ViewVerticalIcon } from "@radix-ui/react-icons"
+import { Slot } from "@radix-ui/react-slot"
+import { Button } from "@ui/components/ui/button"
+import { Input } from "@ui/components/ui/input"
+import { Separator } from "@ui/components/ui/separator"
+import { Sheet, SheetContent } from "@ui/components/ui/sheet"
+import { Skeleton } from "@ui/components/ui/skeleton"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@ui/components/ui/tooltip"
+import { useIsMobile } from "@ui/hooks/use-mobile"
+import { cn } from "@ui/lib/utils"
+import { cva, VariantProps } from "class-variance-authority"
+
+import * as React from "react"
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "4rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContext = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContext | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value
+        if (setOpenProp) {
+          setOpenProp(openState)
+        } else {
+          _setOpen(openState)
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed"
+
+    const contextValue = React.useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full",
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right"
+    variant?: "sidebar" | "floating" | "inset"
+    collapsible?: "offcanvas" | "icon" | "none"
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex size-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="text-sidebar-foreground group peer hidden md:block"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset" ?
+              "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={cn(
+            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            side === "left" ?
+              "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset" ?
+              "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={event => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <ViewVerticalIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button">>(
+  ({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar()
+
+    return (
+      <button
+        ref={ref}
+        data-sidebar="rail"
+        aria-label="Toggle Sidebar"
+        tabIndex={-1}
+        onClick={toggleSidebar}
+        title="Toggle Sidebar"
+        className={cn(
+          "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+          "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+          "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+          "group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+          "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+          "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <main
+        ref={ref}
+        className={cn(
+          "bg-background relative flex min-h-svh flex-1 flex-col",
+          "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInput.displayName = "SidebarInput"
+
+const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="header"
+        className={cn("flex flex-col gap-2 p-2", className)}
+        {...props}
+      />
+    )
+  }
+)
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="footer"
+        className={cn("flex flex-col gap-2 p-2", className)}
+        {...props}
+      />
+    )
+  }
+)
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+})
+SidebarSeparator.displayName = "SidebarSeparator"
+
+const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="content"
+        className={cn(
+          "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="group"
+        className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+        {...props}
+      />
+    )
+  }
+)
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupAction.displayName = "SidebarGroupAction"
+
+const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+)
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+)
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+  ({ className, ...props }, ref) => (
+    <li
+      ref={ref}
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+)
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 px-4 text-left text-sm outline-none transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+)
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    const { isMobile, state } = useSidebar()
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+
+    if (!tooltip) {
+      return button
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip
+      }
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    )
+  }
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    showOnHover?: boolean
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuAction.displayName = "SidebarMenuAction"
+
+const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+SidebarMenuSub.displayName = "SidebarMenuSub"
+
+const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+  ({ ...props }, ref) => <li ref={ref} {...props} />
+)
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean
+    size?: "sm" | "md"
+    isActive?: boolean
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar
+}
diff --git a/packages/ui/src/components/ui/skeleton.tsx b/packages/ui/src/components/ui/skeleton.tsx
index 12615ac..5ab6295 100644
--- a/packages/ui/src/components/ui/skeleton.tsx
+++ b/packages/ui/src/components/ui/skeleton.tsx
@@ -1,9 +1,7 @@
-import React from "react"
-
-import { cn } from "@/lib/utils"
+import { cn } from "@ui/lib/utils"
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />
+  return <div className={cn("bg-primary/10 animate-pulse rounded-md", className)} {...props} />
 }
 
 export { Skeleton }
diff --git a/packages/ui/src/components/ui/slider.tsx b/packages/ui/src/components/ui/slider.tsx
index bc22772..7076f0d 100644
--- a/packages/ui/src/components/ui/slider.tsx
+++ b/packages/ui/src/components/ui/slider.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import * as React from "react"
 import * as SliderPrimitive from "@radix-ui/react-slider"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
@@ -14,10 +14,10 @@ const Slider = React.forwardRef<
     className={cn("relative flex w-full touch-none select-none items-center", className)}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    <SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
+      <SliderPrimitive.Range className="bg-primary absolute h-full" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName
diff --git a/packages/ui/src/components/ui/sonner.tsx b/packages/ui/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..1b6ff41
--- /dev/null
+++ b/packages/ui/src/components/ui/sonner.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+        }
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/packages/ui/src/components/ui/switch.tsx b/packages/ui/src/components/ui/switch.tsx
index 3362b47..e35b248 100644
--- a/packages/ui/src/components/ui/switch.tsx
+++ b/packages/ui/src/components/ui/switch.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import * as React from "react"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     {...props}
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        "bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/packages/ui/src/components/ui/table.tsx b/packages/ui/src/components/ui/table.tsx
index 67f1cfc..986022b 100644
--- a/packages/ui/src/components/ui/table.tsx
+++ b/packages/ui/src/components/ui/table.tsx
@@ -1,11 +1,13 @@
-import * as React from "react"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
-    <div className="w-full overflow-auto">
-      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    <div className="relative w-full overflow-auto">
+      <div className="border-y-muted overflow-auto rounded-t-lg border-y-2">
+        <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+      </div>
     </div>
   )
 )
@@ -15,15 +17,24 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead
+    ref={ref}
+    className={cn("bg-muted/40 border-x-muted border-x-2 [&_tr]:border-b", className)}
+    {...props}
+  />
 ))
+
 TableHeader.displayName = "TableHeader"
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+  <tbody
+    ref={ref}
+    className={cn("border-b-muted/80 [&_tr:last-child]:border-b-0", className)}
+    {...props}
+  />
 ))
 TableBody.displayName = "TableBody"
 
@@ -33,18 +44,27 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("bg-primary font-medium text-primary-foreground", className)}
+    className={cn("bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
     {...props}
   />
 ))
 TableFooter.displayName = "TableFooter"
 
+const TableHeaderRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr ref={ref} className={cn("border-b px-2 transition-colors", className)} {...props} />
+))
+
+TableHeaderRow.displayName = "TableHeaderRow"
+
 const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
   ({ className, ...props }, ref) => (
     <tr
       ref={ref}
       className={cn(
-        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        "border-b-muted/80 hover:bg-accent/10 data-[state=selected]:bg-accent/10 border-x-muted data-[state=selected]:border-l-accent border-x-2 border-b border-l-transparent px-2 transition-colors",
         className
       )}
       {...props}
@@ -60,7 +80,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "text-muted-foreground h-12 px-2 text-left align-middle text-sm font-semibold [&:has([role=checkbox])]:px-4",
       className
     )}
     {...props}
@@ -75,7 +95,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "text-muted-foreground p-2 pl-4 align-middle [&:has([role=checkbox])]:px-4",
       className
     )}
     {...props}
@@ -87,8 +107,18 @@ const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  <caption ref={ref} className={cn("text-muted-foreground mt-4 text-sm", className)} {...props} />
 ))
 TableCaption.displayName = "TableCaption"
 
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
+export {
+  Table,
+  TableHeader,
+  TableHeaderRow,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption
+}
diff --git a/packages/ui/src/components/ui/tabs.tsx b/packages/ui/src/components/ui/tabs.tsx
index 0f4caeb..b059033 100644
--- a/packages/ui/src/components/ui/tabs.tsx
+++ b/packages/ui/src/components/ui/tabs.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const Tabs = TabsPrimitive.Root
 
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      "bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1",
       className
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow",
       className
     )}
     {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
       className
     )}
     {...props}
diff --git a/packages/ui/src/components/ui/textarea.tsx b/packages/ui/src/components/ui/textarea.tsx
index 51e4e41..b586c63 100644
--- a/packages/ui/src/components/ui/textarea.tsx
+++ b/packages/ui/src/components/ui/textarea.tsx
@@ -1,15 +1,13 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
+import { cn } from "@ui/lib/utils"
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+import * as React from "react"
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
         className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}
diff --git a/packages/ui/src/components/ui/toast.tsx b/packages/ui/src/components/ui/toast.tsx
index 035f881..e905a47 100644
--- a/packages/ui/src/components/ui/toast.tsx
+++ b/packages/ui/src/components/ui/toast.tsx
@@ -1,9 +1,11 @@
-import * as React from "react"
+"use client"
+
 import { Cross2Icon } from "@radix-ui/react-icons"
 import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cn } from "@ui/lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const ToastProvider = ToastPrimitives.Provider
 
@@ -23,13 +25,13 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
   {
     variants: {
       variant: {
-        default: "border bg-background",
+        default: "bg-background text-foreground border",
         destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground"
+          "destructive border-destructive bg-destructive text-destructive-foreground group"
       }
     },
     defaultVariants: {
@@ -59,7 +61,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-1 disabled:pointer-events-none disabled:opacity-50",
       className
     )}
     {...props}
@@ -74,13 +76,13 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "text-foreground/50 hover:text-foreground absolute right-1 top-1 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className
     )}
     toast-close=""
     {...props}
   >
-    <Cross2Icon className="h-4 w-4" />
+    <Cross2Icon className="size-4" />
   </ToastPrimitives.Close>
 ))
 ToastClose.displayName = ToastPrimitives.Close.displayName
diff --git a/packages/ui/src/components/ui/toaster.tsx b/packages/ui/src/components/ui/toaster.tsx
index 9f9a0f0..fab495a 100644
--- a/packages/ui/src/components/ui/toaster.tsx
+++ b/packages/ui/src/components/ui/toaster.tsx
@@ -1,30 +1,33 @@
 "use client"
 
-import React from "react"
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport
+} from "@ui/components/ui/toast"
+import { useToast } from "@ui/hooks/use-toast"
 
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+export function Toaster() {
+  const { toasts } = useToast()
 
   return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
-        }
-      }}
-      {...props}
-    />
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && <ToastDescription>{description}</ToastDescription>}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
   )
 }
-
-export { Toaster }
diff --git a/packages/ui/src/components/ui/toggle-group.tsx b/packages/ui/src/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..1d83ed6
--- /dev/null
+++ b/packages/ui/src/components/ui/toggle-group.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { toggleVariants } from "@ui/components/ui/toggle"
+import { cn } from "@ui/lib/utils"
+import { type VariantProps } from "class-variance-authority"
+
+import * as React from "react"
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: "default",
+  variant: "default"
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/packages/ui/src/components/ui/toggle.tsx b/packages/ui/src/components/ui/toggle.tsx
index 83de065..4691edd 100644
--- a/packages/ui/src/components/ui/toggle.tsx
+++ b/packages/ui/src/components/ui/toggle.tsx
@@ -1,24 +1,24 @@
 "use client"
 
-import * as React from "react"
 import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cn } from "@ui/lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  "hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"
+          "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm"
       },
       size: {
-        default: "h-9 px-3",
-        sm: "h-8 px-2",
-        lg: "h-10 px-3"
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5"
       }
     },
     defaultVariants: {
diff --git a/packages/ui/src/components/ui/tooltip.tsx b/packages/ui/src/components/ui/tooltip.tsx
index 9e74821..fdc9e56 100644
--- a/packages/ui/src/components/ui/tooltip.tsx
+++ b/packages/ui/src/components/ui/tooltip.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cn } from "@ui/lib/utils"
 
-import { cn } from "@/lib/utils"
+import * as React from "react"
 
 const TooltipProvider = TooltipPrimitive.Provider
 
@@ -15,15 +15,17 @@ const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
diff --git a/packages/ui/src/hooks/use-local-storage.ts b/packages/ui/src/hooks/use-local-storage.ts
new file mode 100644
index 0000000..7f108ed
--- /dev/null
+++ b/packages/ui/src/hooks/use-local-storage.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react"
+
+function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
+  const [storedValue, setStoredValue] = useState(initialValue)
+
+  useEffect(() => {
+    const item = window.localStorage.getItem(key)
+
+    if (item) {
+      setStoredValue(JSON.parse(item)?.value ?? initialValue)
+    }
+  }, [key])
+
+  const setValue = (value: T, specificKey: string = key) => {
+    setStoredValue(value)
+
+    window.localStorage.setItem(specificKey, JSON.stringify({ value }))
+  }
+
+  return [storedValue, setValue]
+}
+
+export default useLocalStorage
diff --git a/packages/ui/src/hooks/use-mobile.tsx b/packages/ui/src/hooks/use-mobile.tsx
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/packages/ui/src/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/packages/ui/src/hooks/use-toast.ts b/packages/ui/src/hooks/use-toast.ts
index b12d267..aa96c09 100644
--- a/packages/ui/src/hooks/use-toast.ts
+++ b/packages/ui/src/hooks/use-toast.ts
@@ -1,10 +1,15 @@
+"use client"
+
 // Inspired by react-hot-toast library
 import * as React from "react"
 
-import type { ToastActionElement, ToastProps } from "@/components/ui/toast"
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@ui/components/ui/toast"
 
-const TOAST_LIMIT = 3
-const TOAST_REMOVE_DELAY = 100000
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
 
 type ToasterToast = ToastProps & {
   id: string
@@ -17,13 +22,13 @@ const actionTypes = {
   ADD_TOAST: "ADD_TOAST",
   UPDATE_TOAST: "UPDATE_TOAST",
   DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST"
+  REMOVE_TOAST: "REMOVE_TOAST",
 } as const
 
 let count = 0
 
 function genId() {
-  count = (count + 1) % Number.MAX_VALUE
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
   return count.toString()
 }
 
@@ -62,7 +67,7 @@ const addToRemoveQueue = (toastId: string) => {
     toastTimeouts.delete(toastId)
     dispatch({
       type: "REMOVE_TOAST",
-      toastId: toastId
+      toastId: toastId,
     })
   }, TOAST_REMOVE_DELAY)
 
@@ -74,13 +79,15 @@ export const reducer = (state: State, action: Action): State => {
     case "ADD_TOAST":
       return {
         ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
       }
 
     case "UPDATE_TOAST":
       return {
         ...state,
-        toasts: state.toasts.map(t => (t.id === action.toast.id ? { ...t, ...action.toast } : t))
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
       }
 
     case "DISMISS_TOAST": {
@@ -91,33 +98,33 @@ export const reducer = (state: State, action: Action): State => {
       if (toastId) {
         addToRemoveQueue(toastId)
       } else {
-        state.toasts.forEach(toast => {
+        state.toasts.forEach((toast) => {
           addToRemoveQueue(toast.id)
         })
       }
 
       return {
         ...state,
-        toasts: state.toasts.map(t =>
+        toasts: state.toasts.map((t) =>
           t.id === toastId || toastId === undefined
             ? {
                 ...t,
-                open: false
+                open: false,
               }
             : t
-        )
+        ),
       }
     }
     case "REMOVE_TOAST":
       if (action.toastId === undefined) {
         return {
           ...state,
-          toasts: []
+          toasts: [],
         }
       }
       return {
         ...state,
-        toasts: state.toasts.filter(t => t.id !== action.toastId)
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
       }
   }
 }
@@ -128,7 +135,7 @@ let memoryState: State = { toasts: [] }
 
 function dispatch(action: Action) {
   memoryState = reducer(memoryState, action)
-  listeners.forEach(listener => {
+  listeners.forEach((listener) => {
     listener(memoryState)
   })
 }
@@ -141,7 +148,7 @@ function toast({ ...props }: Toast) {
   const update = (props: ToasterToast) =>
     dispatch({
       type: "UPDATE_TOAST",
-      toast: { ...props, id }
+      toast: { ...props, id },
     })
   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
 
@@ -151,16 +158,16 @@ function toast({ ...props }: Toast) {
       ...props,
       id,
       open: true,
-      onOpenChange: open => {
+      onOpenChange: (open) => {
         if (!open) dismiss()
-      }
-    }
+      },
+    },
   })
 
   return {
     id: id,
     dismiss,
-    update
+    update,
   }
 }
 
@@ -180,7 +187,7 @@ function useToast() {
   return {
     ...state,
     toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId })
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
   }
 }
 
diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts
index 6889963..bd0c391 100644
--- a/packages/ui/src/lib/utils.ts
+++ b/packages/ui/src/lib/utils.ts
@@ -4,11 +4,3 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-
-export function generateBrowserUUID(): string {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
-    const r = (Math.random() * 16) | 0
-    const v = c === "x" ? r : (r & 0x3) | 0x8
-    return v.toString(16)
-  })
-}
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
deleted file mode 100644
index 8d3fda3..0000000
--- a/packages/ui/src/styles/globals.css
+++ /dev/null
@@ -1,61 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 256 31% 88%;
-    --primary-foreground: 222.2 84% 4.9%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 0 0% 93.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 256 31% 88%;
-    --primary-foreground: 222.2 84% 4.9%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-  }
-}
-
-@layer base {
-  .texture {
-    background-image: radial-gradient(hsl(var(--muted) / 0.6) 1px, transparent 0),
-      radial-gradient(hsl(var(--muted) / 0.6) 1px, transparent 0);
-    background-size: 10px 10px;
-    background-position:
-      0 0,
-      5px 5px;
-  }
-}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index f4ce330..5ff02dc 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "dist",
     "paths": {
-      "@/*": ["./src/*"]
+      "@ui/*": ["src/*"]
     },
     "baseUrl": "."
   },
diff --git a/public-packages/evalz/README.md b/public-packages/evalz/README.md
index 945be5f..30448f4 100644
--- a/public-packages/evalz/README.md
+++ b/public-packages/evalz/README.md
@@ -829,164 +829,6 @@ const result4 = await relevanceEvaluator({ data });
 console.log(result4.scoreResults);
 ```
 
-## Real-World Examples
-
-### Chatbot Evaluation
-
-#### Scenario
-
-A company wants to evaluate the performance of their AI-powered customer support chatbot to ensure it provides relevant and accurate responses to user queries.
-
-#### Approach
-
-1. **Model-Graded Evaluators**: Use relevance, fluency, and completeness evaluators to assess the overall quality of chatbot responses.
-2. **Accuracy Evaluators**: Measure the accuracy of responses by comparing them to a predefined set of expected answers.
-3. **Context Evaluators**: Assess the relevance of responses within the context of previous user interactions.
-
-#### Example Code
-
-```typescript
-import { createEvaluator, createAccuracyEvaluator, createContextEvaluator, createWeightedEvaluator } from "evalz";
-
-
-const oai = new OpenAI({
-  apiKey: process.env["OPENAI_API_KEY"]
-});
-
-
-const relevanceEval = () => createEvaluator({
-  client: oai,
-  model: "gpt-4-turbo",
-  evaluationDescription: "Please rate the relevance of the response from 0 (not at all relevant) to 1 (highly relevant), considering whether the AI stayed on topic and provided a reasonable answer."
-});
-
-const distanceEval = () => createAccuracyEvaluator({
-  weights: { factual: 0.5, semantic: 0.5 }
-});
-
-const fluencyEval = () => createEvaluator({
-  client: oai,
-  model: "gpt-4-turbo",
-  evaluationDescription: "Please rate the fluency of the response from 0 (not fluent) to 1 (very fluent), considering the grammatical correctness and natural flow."
-});
-
-const completenessEval = () => createEvaluator({
-  client: oai,
-  model: "gpt-4-turbo",
-  evaluationDescription: "Please rate the completeness of the response from 0 (not at all complete) to 1 (completely answered), considering whether the AI addressed all parts of the prompt."
-});
-
-const contextRelevanceEval = () => createContextEvaluator({ type: "relevance" });
-const compositeEvaluator = createWeightedEvaluator({
-  evaluators: {
-    relevance: relevanceEval(),
-    fluency: fluencyEval(),
-    completeness: completenessEval(),
-    accuracy: distanceEval(),
-    contextRelevance: contextRelevanceEval()
-  },
-  weights: {
-    relevance: 0.2,
-    fluency: 0.2,
-    completeness: 0.2,
-    accuracy: 0.2,
-    contextRelevance: 0.2
-  }
-});
-
-
-const data = [
-  {
-    prompt: "How can I reset my password?",
-    completion: "You can reset your password by clicking on the 'Forgot Password' link on the login page.",
-    expectedCompletion: "To reset your password, click on the 'Forgot Password' link on the login page.",
-    contexts: ["User asked, 'How can I reset my password?'", "Support response: 'You can reset your password by clicking on the 'Forgot Password' link on the login page.'"],
-    groundTruth: "Please guide the user on resetting their password."
-  }
-];
-
-
-const result = await compositeEvaluator({ data });
-console.log(result.scoreResults);
-```
-
-### Document Retrieval System
-
-#### Scenario
-
-A rag wants to evaluate the relevance and precision of its document retrieval system to ensure it retrieves the most relevant documents for user queries.
-
-#### Approach
-
-1. **Model-Graded Evaluators**: Use relevance and coverage evaluators to assess the relevance and completeness of retrieved documents.
-2. **Accuracy Evaluators**: Measure the accuracy of document summaries by comparing them to reference summaries.
-3. **Context Evaluators**: Assess the precision and recall of retrieved documents within the context of user queries.
-
-#### Example Code
-
-```typescript
-import { createEvaluator, createAccuracyEvaluator, createContextEvaluator, createWeightedEvaluator } from "evalz";
-
-
-const oai = new OpenAI({
-  apiKey: process.env["OPENAI_API_KEY"],
-  organization: process.env["OPENAI_ORG_ID"]
-});
-
-
-const relevanceEval = () => createEvaluator({
-  client: oai,
-  model: "gpt-4-turbo",
-  evaluationDescription: "Please rate the relevance of the document from 0 (not relevant) to 1 (highly relevant), considering how well the document addresses the query."
-});
-
-const distanceEval = () => createAccuracyEvaluator({
-  weights: { factual: 0.5, semantic: 0.5 }
-});
-
-const coverageEval = () => createEvaluator({
-  client: oai,
-  model: "gpt-4-turbo",
-  evaluationDescription: "Please rate the coverage of the document from 0 (incomplete) to 1 (complete), considering whether the document addresses all parts of the query."
-});
-
-const contextPrecisionEval = () => createContextEvaluator({ type: "precision" });
-const contextRecallEval = () => createContextEvaluator({ type: "recall" });
-
-
-const compositeEvaluator = createWeightedEvaluator({
-  evaluators: {
-    relevance: relevanceEval(),
-    coverage: coverageEval(),
-    accuracy: distanceEval(),
-    contextPrecision: contextPrecisionEval(),
-    contextRecall: contextRecallEval()
-  },
-  weights: {
-    relevance: 0.25,
-    coverage: 0.25,
-    accuracy: 0.25,
-    contextPrecision: 0.125,
-    contextRecall: 0.125
-  }
-});
-
-
-const data = [
-  {
-    prompt: "What are the symptoms of COVID-19?",
-    completion: "The most common symptoms of COVID-19 are fever, dry cough, and tiredness.",
-    expectedCompletion: "Symptoms of COVID-19 include fever, dry cough, and tiredness among others.",
-    contexts: ["User query: 'What are the symptoms of COVID-19?'", "Retrieved document: 'The most common symptoms of COVID-19 are fever, dry cough, and tiredness.'"],
-    groundTruth: "The retrieval system should return documents that list the symptoms of COVID-19."
-  }
-];
-
-
-const result = await compositeEvaluator({ data });
-console.log(result.scoreResults);
-```
-
 ## Integration with Island AI
 
 Part of the Island AI toolkit:
diff --git a/public-packages/evalz/package.json b/public-packages/evalz/package.json
index c5a4fc4..b53e4b5 100644
--- a/public-packages/evalz/package.json
+++ b/public-packages/evalz/package.json
@@ -46,20 +46,20 @@
   "homepage": "https://island.hack.dance",
   "peerDependencies": {
     "@instructor-ai/instructor": "latest",
-    "openai": ">=4.28.0",
+    "openai": "4.47.1",
     "zod": "^3.23.3"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@instructor-ai/instructor": "1.3.0",
+    "@instructor-ai/instructor": "*",
     "openai": "4.47.1",
-    "@turbo/gen": "^1.10.12",
-    "@types/node": "^20.5.2",
-    "@types/eslint": "^8.44.7",
+    "@turbo/gen": "^1.11.3",
+    "@types/node": "^20.10.6",
+    "@types/eslint": "^8.56.1",
     "eslint": "^8.53.0",
     "tsup": "^8.0.1",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "ramda": "^0.29.0",
     "zod": "^3.23.3"
   },
diff --git a/public-packages/hooks/README.md b/public-packages/hooks/README.md
index f8c5c0e..94702d8 100644
--- a/public-packages/hooks/README.md
+++ b/public-packages/hooks/README.md
@@ -15,44 +15,36 @@
   </a>
 </div>
 
-<p align="center">
-Hooks for consuming streams in react - specifically json streams coming from LLMS - given a Zod Schema that represents the final output, you can start the stream and start to read the structured result immediately.
-</p>
+`stream-hooks` provides React hooks for consuming streams - specifically JSON streams coming from LLMs. Given a Zod Schema that represents the final output, you can start processing structured results immediately as they stream in.
 
 ## Installation
 
-with pnpm
-
 ```bash
+# pnpm
 pnpm add stream-hooks zod zod-stream
-```
 
-with npm
-
-```bash
+# npm
 npm install stream-hooks zod zod-stream
-```
-
-with bun
 
-```bash
+# bun
 bun add stream-hooks zod zod-stream
 ```
 
-## useJsonStream
+## Quick Start
 
 ```typescript
-  import { useJsonStream } from "stream-hooks"
-
-  export function Test() {
-    const { loading, startStream, stopStream, data } = useJsonStream({
-      schema: z.object({
-        content: z.string()
-      }),
-      onReceive: data => {
-        console.log("incremental update to final response model", data)
-      }
-    })
+import { useJsonStream } from "stream-hooks"
+import { z } from "zod"
+
+export function ChatComponent() {
+  const { loading, startStream, stopStream, data } = useJsonStream({
+    schema: z.object({
+      content: z.string()
+    }),
+    onReceive: data => {
+      console.log("incremental update to final response model", data)
+    }
+  })
 
   const submit = async () => {
     try {
@@ -73,18 +65,164 @@ bun add stream-hooks zod zod-stream
     }
   }
 
+  return (
+    <div>
+      {data?.content}
+
+      <button onClick={submit} disabled={loading}>
+        Start
+      </button>
+
+      <button onClick={stopStream}>
+        Stop
+      </button>
+    </div>
+  )
+}
+```
+
+## Key Features
+
+- 🔄 React hooks for streaming LLM responses
+- 🎯 Progressive validation and partial results
+- 📝 Built-in TypeScript support
+- ⚡ Seamless integration with zod-stream
+- 🌳 Path completion tracking
+- 🔍 Error handling and loading states
+
+## Hook Options
+
+```typescript
+interface UseJsonStreamOptions<T extends z.ZodType> {
+  schema: T;                    // Zod schema for validation
+  onReceive?: (data: any) => void;  // Progressive update handler
+  onComplete?: (data: any) => void; // Stream completion handler
+  onError?: (error: Error) => void; // Error handler
+  debug?: boolean;              // Enable debug logging
+}
+```
+
+## Progressive Updates
+
+The hook provides real-time updates as data streams in:
+
+```typescript
+const AnalysisComponent = () => {
+  const { data } = useJsonStream({
+    schema: z.object({
+      user: z.object({
+        preferences: z.object({
+          theme: z.string(),
+          language: z.string()
+        })
+      }),
+      content: z.object({
+        title: z.string(),
+        body: z.string()
+      })
+    }),
+    onReceive: (chunk) => {
+      // Start personalizing as soon as preferences are available
+      if (isPathComplete(['user', 'preferences'], chunk)) {
+        applyTheme(chunk.user.preferences.theme);
+      }
+
+      // Begin content rendering when title is ready
+      if (isPathComplete(['content', 'title'], chunk)) {
+        updateTitle(chunk.content.title);
+      }
+    }
+  });
+
+  return <div>{/* Your UI */}</div>;
+};
+```
+
+## Error Handling
+
+```typescript
+function StreamComponent() {
+  const { error, reset } = useJsonStream({
+    schema,
+    onError: (err) => {
+      console.error("Stream error:", err);
+    }
+  });
+
+  if (error) {
     return (
       <div>
-        {data.content}
+        <p>Error: {error.message}</p>
+        <button onClick={reset}>Retry</button>
+      </div>
+    );
+  }
 
-        <button onClick={submit}>
-          start
-        </button>
+  return <div>{/* Your UI */}</div>;
+}
+```
 
-        <button onClick={stopStream}>
-          stop
-        </button>
-      </div>
-    )
+## Integration with zod-stream
+
+`stream-hooks` works seamlessly with `zod-stream` response modes:
+
+```typescript
+import { withResponseModel } from "zod-stream";
+
+// API Route
+export async function POST(req: Request) {
+  const params = withResponseModel({
+    response_model: {
+      schema,
+      name: "Analysis"
+    },
+    mode: "TOOLS",
+    params: {
+      messages: [{ role: "user", content: "..." }],
+      model: "gpt-4"
+    }
+  });
+
+  const completion = await openai.chat.completions.create({
+    ...params,
+    stream: true
+  });
+
+  return new Response(completion.body);
+}
+```
+
+## TypeScript Support
+
+The hook provides full type inference:
+
+```typescript
+const schema = z.object({
+  result: z.string(),
+  confidence: z.number()
+});
+
+// data is fully typed based on schema
+const { data } = useJsonStream({
+  schema,
+  onReceive: (data) => {
+    // TypeScript knows the shape of data
+    console.log(data.result, data.confidence);
   }
+});
 ```
+
+## Return Values
+
+```typescript
+interface UseJsonStreamReturn<T> {
+  data: T | null;              // Current stream data
+  loading: boolean;            // Stream status
+  error: Error | null;         // Error state
+  startStream: (options: FetchOptions) => Promise<void>; // Start streaming
+  stopStream: () => void;      // Stop streaming
+  reset: () => void;           // Reset hook state
+}
+```
+
+For more details on the underlying streaming capabilities, check out the [zod-stream documentation](/docs/zod-stream).
diff --git a/public-packages/hooks/package.json b/public-packages/hooks/package.json
index 7f79acd..d09834e 100644
--- a/public-packages/hooks/package.json
+++ b/public-packages/hooks/package.json
@@ -41,13 +41,13 @@
     "@turbo/gen": "^1.11.3",
     "@types/node": "^20.10.6",
     "@types/eslint": "^8.56.1",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
     "eslint": "^8.53.0",
     "ramda": "^0.29.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.2.2",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "typescript": "^5.3.3",
     "tsup": "^8.0.1"
   },
   "peerDependencies": {
@@ -55,6 +55,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "zod": "^3.23.3"
-  },
-  "dependencies": {}
+  }
 }
diff --git a/public-packages/llm-client/package.json b/public-packages/llm-client/package.json
index c3321cf..a400ab0 100644
--- a/public-packages/llm-client/package.json
+++ b/public-packages/llm-client/package.json
@@ -52,20 +52,20 @@
   "peerDependencies": {
     "@anthropic-ai/sdk": "^0.22.0",
     "@google/generative-ai": "^0.21.0",
-    "openai": ">=4.28.0"
+    "openai": "4.47.1"
   },
   "devDependencies": {
     "@anthropic-ai/sdk": "^0.22.0",
     "@google/generative-ai": "^0.21.0",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@turbo/gen": "^1.10.12",
-    "@types/eslint": "^8.44.7",
-    "@types/node": "^20.5.2",
+    "@turbo/gen": "^1.11.3",
+    "@types/eslint": "^8.56.1",
+    "@types/node": "^20.10.6",
     "eslint": "^8.53.0",
     "ramda": "^0.29.0",
     "tsup": "^8.0.1",
-    "typescript": "^5.2.2",
-    "zod": "^3.22.4"
+    "typescript": "^5.3.3",
+    "zod": "^3.23.3"
   }
 }
diff --git a/public-packages/schemaStream/package.json b/public-packages/schemaStream/package.json
index affc671..8d407e2 100644
--- a/public-packages/schemaStream/package.json
+++ b/public-packages/schemaStream/package.json
@@ -28,13 +28,13 @@
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
-    "@types/eslint": "^8.44.7",
+    "@types/eslint": "^8.56.1",
     "@repo/typescript-config": "workspace:*",
     "@types/ramda": "^0.29.9",
     "bun-types": "^1.0.15",
     "eslint": "^8.53.0",
     "tsup": "^8.0.1",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "zod": "^3.23.3"
   },
   "peerDependencies": {
diff --git a/public-packages/zod-stream/package.json b/public-packages/zod-stream/package.json
index 27ed6b7..55705b0 100644
--- a/public-packages/zod-stream/package.json
+++ b/public-packages/zod-stream/package.json
@@ -48,18 +48,18 @@
     "zod-to-json-schema": "^3.23.1"
   },
   "peerDependencies": {
-    "openai": ">=4.24.1",
+    "openai": "4.47.1",
     "zod": "^3.23.3"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@turbo/gen": "^1.10.12",
-    "@types/node": "^20.5.2",
-    "@types/eslint": "^8.44.7",
+    "@turbo/gen": "^1.11.3",
+    "@types/node": "^20.10.6",
+    "@types/eslint": "^8.56.1",
     "eslint": "^8.53.0",
     "tsup": "^8.0.1",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "ramda": "^0.29.0",
     "zod": "^3.23.3"
   }