Fix client boundaries for installed interactive components

content/solid/status-glyph.mdx

@@ -43,6 +43,8 @@ There are five kinds of work, and a way of moving for each. The points are alway
 
 A state that lasts minutes is not minutes of one motion: an activity takes several figures in turn, holding each for a few seconds and then turning into the next. `STATUS_FIGURES` lists every figure on its own, and the `figure` prop plays just one.
 
+In a React Server Components project, the default glyph can be rendered from a server page. A `figure` is a function, so choose from `STATUS_FIGURES` or define a custom figure inside a `"use client"` component, then pass it to `StatusGlyph` there. The same applies to the `figure` prop on `TurnStatus`.
+
 <ComponentPreview name="status-glyph-figures" previewClassName="h-96" />
 
 ## Inline

src/blocks/agent-workspace.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import {
   ChevronRightIcon,

src/components/ui/ask-card.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { cn } from "@/lib/utils"
 
 /**

src/components/ui/composer.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { ArrowUp, ChevronDown, Square } from "lucide-react"
 

src/components/ui/context-ring.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { ChevronDown } from "lucide-react"
 

src/components/ui/status-glyph.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 
 import { cn } from "@/lib/utils"

src/components/ui/tool-steps.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { ChevronRight } from "lucide-react"
 

src/components/ui/turn-status.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { ChevronRight } from "lucide-react"
 

src/site/component-preview.tsx

@@ -42,9 +42,6 @@ function useSource(load: (() => Promise<string>) | undefined) {
   return text
 }
 
-/** As it would be written in a project: the site's own paths become the ones shadcn installs to. */
-const asInstalled = (code: string) => code.replace(/^"use client"\n\n?/, "")
-
 /**
  * A component shown live over its code, as on ui.shadcn.com: the preview on top, and under it the
  * first lines of the source, fading out, with a button that shows the rest.
@@ -67,7 +64,7 @@ export function ComponentPreview({
   const Example = exampleOf(name)
   const source = useSource(sources[`/src/examples/${name}.tsx`])
   const [open, setOpen] = React.useState(false)
-  const code = source ? asInstalled(source) : ""
+  const code = source ?? ""
 
   return (
     <div data-slot="component-preview" className={cn("group relative mt-4 mb-12 flex flex-col overflow-hidden rounded-2xl border", wrapperClassName)}>