Isolate docs bundles and route-specific styles

docs/app/(home)/layout.tsx

@@ -1,12 +1,11 @@
-import { WebsiteThemeProvider } from "@/components/website-theme-provider";
 import "./globals.css";
 import { Navbar } from "./sections/Navbar/Navbar";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <WebsiteThemeProvider>
+    <>
       <Navbar />
       <div className="homeTheme">{children}</div>
-    </WebsiteThemeProvider>
+    </>
   );
 }

docs/app/blog/fumadocs.css

@@ -0,0 +1,2 @@
+@reference "../global.css";
+@import "fumadocs-ui/css/preset.css";

docs/app/blog/layout.tsx

@@ -1,7 +1,8 @@
-import "../(home)/globals.css";
 import { WebsiteThemeProvider } from "@/components/website-theme-provider";
 import type { Metadata } from "next";
+import "../(home)/globals.css";
 import { BlogNavbar } from "./components/BlogNavbar";
+import "./fumadocs.css";
 
 export const metadata: Metadata = {
   alternates: {

docs/app/chat/_components/agent-surfaces/cloud-agent-surface.tsx

@@ -4,7 +4,7 @@ import { createCloudChatLLM } from "@/lib/openui-cloud/chat-llm";
 import { DEFAULT_MODEL } from "@/lib/openui-cloud/models";
 import { CLOUD_USER_ID_HEADER, getOrCreateCloudUserId } from "@/lib/openui-cloud/user-id";
 import { defineArtifactCategories } from "@openuidev/react-headless";
-import { AgentInterface } from "@openuidev/react-ui";
+import { AgentInterface } from "@openuidev/react-ui/AgentInterface";
 import {
   chatLibrary,
   presentationArtifactRenderer,

docs/app/chat/_components/agent-surfaces/cloud-model-switcher.tsx

@@ -8,7 +8,7 @@ import {
   SelectItem,
   SelectLabel,
   SelectTrigger,
-} from "@openuidev/react-ui";
+} from "@openuidev/react-ui/Select";
 import { useMemo } from "react";
 import styles from "../../chat-page.module.css";
 

docs/app/chat/_components/agent-surfaces/oss-agent-surface.tsx

@@ -1,12 +1,8 @@
 "use client";
 
 import { isDemoCreditsErrorPayload } from "@/lib/demo-credits";
-import {
-  AgentInterface,
-  openAIAdapter,
-  openAIMessageFormat,
-  type ChatLLM,
-} from "@openuidev/react-ui";
+import { openAIAdapter, openAIMessageFormat, type ChatLLM } from "@openuidev/react-headless";
+import { AgentInterface } from "@openuidev/react-ui/AgentInterface";
 import { openuiChatLibrary } from "@openuidev/react-ui/genui-lib";
 import { useMemo } from "react";
 

docs/app/chat/_components/chat-page-client.tsx

@@ -5,10 +5,17 @@ import { OPENUI_CLOUD_UNAVAILABLE_MESSAGE } from "@/lib/openui-cloud/errors";
 import dynamic from "next/dynamic";
 import { Component, useCallback, useState, type ReactNode } from "react";
 import styles from "../chat-page.module.css";
-import { OssAgentSurface } from "./agent-surfaces/oss-agent-surface";
 import { ChatPageHeader } from "./chat-page-header";
 import type { ChatMode } from "./chat-types";
 
+const OssAgentSurface = dynamic(
+  () => import("./agent-surfaces/oss-agent-surface").then((module) => module.OssAgentSurface),
+  {
+    ssr: false,
+    loading: () => <ChatLoadingState label="Loading OpenUI OSS…" />,
+  },
+);
+
 const CloudAgentSurface = dynamic(
   () => import("./agent-surfaces/cloud-agent-surface").then((module) => module.CloudAgentSurface),
   {

docs/app/chat/layout.tsx

@@ -1,4 +1,6 @@
 import { WebsiteThemeProvider } from "@/components/website-theme-provider";
+import "@openuidev/react-ui/styles/index.css";
+import "@openuidev/thesys/styles.css";
 import type { ReactNode } from "react";
 
 export default function ChatLayout({ children }: { children: ReactNode }) {

docs/app/compare/_components/agent-surfaces/cloud-agent-surface.tsx

@@ -2,7 +2,7 @@
 
 import { createCloudChatLLM } from "@/lib/openui-cloud/chat-llm";
 import { CLOUD_USER_ID_HEADER, getOrCreateCloudUserId } from "@/lib/openui-cloud/user-id";
-import { AgentInterface } from "@openuidev/react-ui";
+import { AgentInterface } from "@openuidev/react-ui/AgentInterface";
 import { artifactRenderers, chatLibrary, useOpenuiCloudStorage } from "@openuidev/thesys";
 import { useMemo, useState } from "react";
 import type { ComparisonControllerRegistry } from "../comparison-mode-controller";

docs/app/compare/_components/agent-surfaces/markdown-agent-surface.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AgentInterface } from "@openuidev/react-ui";
+import { AgentInterface } from "@openuidev/react-ui/AgentInterface";
 import type { ComparisonControllerRegistry } from "../comparison-mode-controller";
 import { ComparisonModeControllerBridge } from "../comparison-mode-controller";
 import { ComparisonSurfaceWelcome } from "./comparison-surface-welcome";

docs/app/compare/_components/agent-surfaces/oss-agent-surface.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AgentInterface } from "@openuidev/react-ui";
+import { AgentInterface } from "@openuidev/react-ui/AgentInterface";
 import { openuiChatLibrary } from "@openuidev/react-ui/genui-lib";
 import type { ComparisonControllerRegistry } from "../comparison-mode-controller";
 import { ComparisonModeControllerBridge } from "../comparison-mode-controller";

docs/app/compare/_components/agent-surfaces/use-comparison-chat-llm.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { isDemoCreditsErrorPayload } from "@/lib/demo-credits";
-import { openAIAdapter, openAIMessageFormat, type ChatLLM } from "@openuidev/react-ui";
+import { openAIAdapter, openAIMessageFormat, type ChatLLM } from "@openuidev/react-headless";
 import { useMemo } from "react";
 
 type ComparisonResponseMode = "markdown" | "openui";

docs/app/compare/_components/compare-page-client.tsx

@@ -14,7 +14,6 @@ import {
 } from "react";
 import styles from "../chat-page.module.css";
 import { MarkdownAgentSurface } from "./agent-surfaces/markdown-agent-surface";
-import { OssAgentSurface } from "./agent-surfaces/oss-agent-surface";
 import { ChatPageHeader } from "./chat-page-header";
 import {
   COMPARISON_MODE_LABELS,
@@ -36,6 +35,14 @@ import {
 
 const ALL_MODES = ["markdown", "oss", "cloud"] as const;
 
+const OssAgentSurface = dynamic(
+  () => import("./agent-surfaces/oss-agent-surface").then((module) => module.OssAgentSurface),
+  {
+    ssr: false,
+    loading: () => <ChatLoadingState label="Loading OpenUI OSS…" />,
+  },
+);
+
 const CloudAgentSurface = dynamic(
   () => import("./agent-surfaces/cloud-agent-surface").then((module) => module.CloudAgentSurface),
   {

docs/app/compare/layout.tsx

@@ -1,4 +1,6 @@
 import { WebsiteThemeProvider } from "@/components/website-theme-provider";
+import "@openuidev/react-ui/styles/index.css";
+import "@openuidev/thesys/styles.css";
 import type { ReactNode } from "react";
 
 export default function CompareLayout({ children }: { children: ReactNode }) {

docs/app/components/blocks/accordion/page.tsx

@@ -6,12 +6,14 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
+} from "@openuidev/react-ui/Accordion";
+import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@openuidev/react-ui";
+} from "@openuidev/react-ui/Select";
 import { useState } from "react";
 import styles from "./page.module.css";
 

docs/app/components/blocks/button-group/page.tsx

@@ -6,16 +6,16 @@ import {
   PreviewSection,
   SegmentedToggle,
 } from "@components/components/preview";
+import { Button } from "@openuidev/react-ui/Button";
+import { Buttons } from "@openuidev/react-ui/Buttons";
+import { IconButton } from "@openuidev/react-ui/IconButton";
 import {
-  Button,
-  Buttons,
-  IconButton,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@openuidev/react-ui";
+} from "@openuidev/react-ui/Select";
 import { useState } from "react";
 import styles from "./page.module.css";
 

docs/app/components/blocks/callout/page.tsx

@@ -7,8 +7,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  TextCallout,
-} from "@openuidev/react-ui";
+} from "@openuidev/react-ui/Select";
+import { TextCallout } from "@openuidev/react-ui/TextCallout";
 import { useState } from "react";
 
 type CalloutVariant = "neutral" | "info" | "warning" | "success" | "danger";

docs/app/components/blocks/charts/area/page.tsx

@@ -2,7 +2,16 @@
 
 import ClientOnly from "@components/blocks/_components/ClientOnly";
 import { BlockVariantPreview, PreviewPage, PreviewSection } from "@components/components/preview";
-import { AreaChart, AreaChartCondensed } from "@openuidev/react-ui";
+import dynamic from "next/dynamic";
+
+const AreaChart = dynamic(
+  () => import("@openuidev/react-ui/Charts").then((module) => module.AreaChart),
+  { ssr: false },
+);
+const AreaChartCondensed = dynamic(
+  () => import("@openuidev/react-ui/Charts").then((module) => module.AreaChartCondensed),
+  { ssr: false },
+);
 
 const areaData = [
   { month: "Jan", desktop: 150, mobile: 90 },

docs/app/components/blocks/charts/bar/page.tsx

@@ -2,7 +2,16 @@
 
 import ClientOnly from "@components/blocks/_components/ClientOnly";
 import { BlockVariantPreview, PreviewPage, PreviewSection } from "@components/components/preview";
-import { BarChart, BarChartCondensed } from "@openuidev/react-ui";
+import dynamic from "next/dynamic";
+
+const BarChart = dynamic(
+  () => import("@openuidev/react-ui/Charts").then((module) => module.BarChart),
+  { ssr: false },
+);
+const BarChartCondensed = dynamic(
+  () => import("@openuidev/react-ui/Charts").then((module) => module.BarChartCondensed),
+  { ssr: false },
+);
 
 const barData = [
   { month: "Jan", desktop: 150, mobile: 90 },

docs/app/components/blocks/charts/donut/page.tsx

@@ -2,7 +2,12 @@
 
 import BlocksDocPage from "@components/blocks/_components/BlocksDocPage";
 import ClientOnly from "@components/blocks/_components/ClientOnly";
-import { PieChart } from "@openuidev/react-ui";
+import dynamic from "next/dynamic";
+
+const PieChart = dynamic(
+  () => import("@openuidev/react-ui/Charts").then((module) => module.PieChart),
+  { ssr: false },
+);
 
 const donutData = [
   { category: "January", value: 1250 },

docs/app/components/blocks/charts/line/page.tsx

@@ -2,7 +2,16 @@
 
 import ClientOnly from "@components/blocks/_components/ClientOnly";
 import { BlockVariantPreview, PreviewPage, PreviewSection } from "@components/components/preview";
-import { LineChart, LineChartCondensed } from "@openuidev/react-ui";
+import dynamic from "next/dynamic";
+
+const LineChart = dynamic(
+  () => import("@openuidev/react-ui/Charts").then((module) => module.LineChart),
+  { ssr: false },
+);
+const LineChartCondensed = dynamic(
+  () => import("@openuidev/react-ui/Charts").then((module) => module.LineChartCondensed),
+  { ssr: false },
+);
 
 const lineData = [
   { month: "Jan", desktop: 150, mobile: 90 },

docs/app/components/blocks/charts/pie/page.tsx

@@ -2,7 +2,12 @@
 
 import BlocksDocPage from "@components/blocks/_components/BlocksDocPage";
 import ClientOnly from "@components/blocks/_components/ClientOnly";
-import { PieChart } from "@openuidev/react-ui";
+import dynamic from "next/dynamic";
+
+const PieChart = dynamic(
+  () => import("@openuidev/react-ui/Charts").then((module) => module.PieChart),
+  { ssr: false },
+);
 
 const pieData = [
   { category: "January", value: 1250 },

docs/app/components/blocks/charts/radial/page.tsx

@@ -2,7 +2,12 @@
 
 import BlocksDocPage from "@components/blocks/_components/BlocksDocPage";
 import ClientOnly from "@components/blocks/_components/ClientOnly";
-import { RadialChart } from "@openuidev/react-ui";
+import dynamic from "next/dynamic";
+
+const RadialChart = dynamic(
+  () => import("@openuidev/react-ui/Charts").then((module) => module.RadialChart),
+  { ssr: false },
+);
 
 const radialData = [
   { month: "January", value: 1250 },

docs/app/components/blocks/charts/scatter/page.tsx

@@ -2,7 +2,12 @@
 
 import BlocksDocPage from "@components/blocks/_components/BlocksDocPage";
 import ClientOnly from "@components/blocks/_components/ClientOnly";
-import { ScatterChart } from "@openuidev/react-ui";
+import dynamic from "next/dynamic";
+
+const ScatterChart = dynamic(
+  () => import("@openuidev/react-ui/Charts").then((module) => module.ScatterChart),
+  { ssr: false },
+);
 
 const scatterData = [
   {

docs/app/components/blocks/checkbox-group/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import BlocksDocPage from "@components/blocks/_components/BlocksDocPage";
-import { CheckBoxGroup, CheckBoxItem } from "@openuidev/react-ui";
+import { CheckBoxGroup } from "@openuidev/react-ui/CheckBoxGroup";
+import { CheckBoxItem } from "@openuidev/react-ui/CheckBoxItem";
 
 function CheckboxGroupPreview() {
   return (

docs/app/components/blocks/date-picker/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import BlocksDocPage from "@components/blocks/_components/BlocksDocPage";
-import { DatePicker } from "@openuidev/react-ui";
+import { DatePicker } from "@openuidev/react-ui/DatePicker";
 
 function DatePickerPreview() {
   return <DatePicker mode="single" style={{ width: "360px" }} />;

docs/app/components/blocks/image-items/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { BlockVariantPreview, PreviewPage, PreviewSection } from "@components/components/preview";
-import { ImageBlock } from "@openuidev/react-ui";
+import { ImageBlock } from "@openuidev/react-ui/ImageBlock";
 import styles from "./page.module.css";
 
 const DEFAULT_IMAGE =

docs/app/components/blocks/input-field/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import BlocksDocPage from "@components/blocks/_components/BlocksDocPage";
-import { Input } from "@openuidev/react-ui";
+import { Input } from "@openuidev/react-ui/Input";
 
 function InputFieldPreview() {
   return <Input size="medium" placeholder="Enter text..." />;

docs/app/components/blocks/lists/page.tsx

@@ -6,7 +6,8 @@ import {
   PreviewSection,
   SegmentedToggle,
 } from "@components/components/preview";
-import { ListBlock, ListItem } from "@openuidev/react-ui";
+import { ListBlock } from "@openuidev/react-ui/ListBlock";
+import { ListItem } from "@openuidev/react-ui/ListItem";
 import { ChevronRight, FileText, Globe, LayoutPanelTop } from "lucide-react";
 import { useMemo, useState } from "react";
 import styles from "./page.module.css";

docs/app/components/blocks/radio-button-group/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import BlocksDocPage from "@components/blocks/_components/BlocksDocPage";
-import { RadioGroup, RadioItem } from "@openuidev/react-ui";
+import { RadioGroup } from "@openuidev/react-ui/RadioGroup";
+import { RadioItem } from "@openuidev/react-ui/RadioItem";
 
 function RadioButtonGroupPreview() {
   return (

docs/app/components/blocks/select/page.tsx

@@ -10,7 +10,7 @@ import {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-} from "@openuidev/react-ui";
+} from "@openuidev/react-ui/Select";
 
 function SelectPreview() {
   return (

docs/app/components/blocks/tables/page.tsx

@@ -8,8 +8,8 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  Tag,
-} from "@openuidev/react-ui";
+} from "@openuidev/react-ui/Table";
+import { Tag } from "@openuidev/react-ui/Tag";
 
 function TablePreview() {
   return (

docs/app/components/blocks/tabs/page.tsx

@@ -6,7 +6,7 @@ import {
   PreviewSection,
   SegmentedToggle,
 } from "@components/components/preview";
-import { Tabs, TabsList, TabsTrigger } from "@openuidev/react-ui";
+import { Tabs, TabsList, TabsTrigger } from "@openuidev/react-ui/Tabs";
 import { useState } from "react";
 import styles from "./page.module.css";