feat(docs-app,ui-buttons): extend prop playground to all components

Auto-inject the PropEditor playground on every component doc page from
`Document`, using the react-docgen metadata it already has (no runtime fetch).
Simple standalone components get a single-element form; compound components get
a curated composition playground that edits the parent and a representative
child together, driven by a registry.

- Generalize PropEditor to N sections plus a JSX template with `{{id}}`
  attribute placeholders; simple mode is one section with the default
  serializer.
- Add a registry of custom composition playgrounds (Menu, Tabs, Table, Modal,
  Select, Flex, Grid, ... 17 total) plus a force-simple set for prop-driven
  components whose subcomponents are internal (Rating, Pagination, Calendar).
- Gate: real compound components (dotted subcomponent ids) fall back to their
  README examples unless a custom entry exists; components whose only children
  are internal facades (Checkbox, FormField) still get the simple form.
- Stabilize config identity and key the seed effect on a structural signature
  so composition edits are not wiped on every render.
- Drop the now-redundant manual PropEditor embed from the Button v2 README.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: balzss

packages/__docs__/src/Document/index.tsx

@@ -42,6 +42,14 @@ import { Returns } from '../Returns'
 import { ComponentTheme } from '../ComponentTheme'
 import { TableOfContents } from '../TableOfContents'
 import { Heading } from '../Heading'
+import { PropEditor } from '../PropEditor'
+import type { PropEditorSection, ReactDocgenProps } from '../PropEditor/props'
+import {
+  shouldAutoInject,
+  getAutoInjectConfig,
+  getCustomPlayground,
+  isForceSimple
+} from '../PropEditor/registry'
 
 import { AppContext } from '../appContext'
 import { navigateTo } from '../navigationUtils'
@@ -154,6 +162,84 @@ class Document extends Component<DocumentProps, DocumentState> {
     ) : null
   }
 
+  renderPlayground(doc: DocDataType) {
+    const editor = this.getPlaygroundEditor(doc)
+    if (!editor) return null
+
+    return (
+      <View margin="x-large 0" display="block">
+        <Heading
+          level="h2"
+          as="h3"
+          id={`${doc.id}Playground`}
+          margin="0 0 small 0"
+        >
+          Playground
+        </Heading>
+        {editor}
+      </View>
+    )
+  }
+
+  // Which playground (if any) a component gets:
+  //  - a curated composition, when a custom playground is registered;
+  //  - the auto single-element form, for simple standalone components;
+  //  - none, for compound components without a custom entry (they lean on
+  //    their README examples) and anything the gate rejects.
+  getPlaygroundEditor(doc: DocDataType) {
+    const custom = getCustomPlayground(doc.id)
+
+    if (custom) {
+      const sections = custom.sections
+        .map<PropEditorSection | null>((section) => {
+          const sectionProps =
+            section.id === doc.id
+              ? doc.props
+              : doc.children?.find((child) => child.id === section.id)?.props
+          return sectionProps
+            ? {
+                id: section.id,
+                label: section.label,
+                props: sectionProps as ReactDocgenProps,
+                config: section.config
+              }
+            : null
+        })
+        .filter((section): section is PropEditorSection => section !== null)
+
+      // Bail if any section's metadata is missing rather than render a partial,
+      // broken composition.
+      if (sections.length !== custom.sections.length) return null
+
+      return (
+        <PropEditor
+          componentId={doc.id}
+          sections={sections}
+          template={custom.template}
+        />
+      )
+    }
+
+    // Real compound components (whose children are composable subcomponents
+    // with dotted ids like `Menu.Item`) fall back to examples when they have no
+    // custom playground. Components whose only "children" are internal facades
+    // (non-dotted ids, e.g. Checkbox's `CheckboxFacade`) are not composed by
+    // consumers, so they still get the simple single-element form.
+    const hasSubcomponents = doc.children?.some((child) =>
+      child.id?.includes('.')
+    )
+    if (hasSubcomponents && !isForceSimple(doc.id)) return null
+    if (!shouldAutoInject(doc)) return null
+
+    return (
+      <PropEditor
+        componentId={doc.id}
+        props={doc.props as ReactDocgenProps}
+        config={getAutoInjectConfig(doc.id)}
+      />
+    )
+  }
+
   renderTheme(doc: DocDataType) {
     const { themeVariables } = this.props
     const { componentTheme } = this.state
@@ -467,6 +553,9 @@ import { ${importName} } from '${versionedPackageName}'`
         {pageRef && <TableOfContents doc={doc} pageElement={pageRef} />}
         {['.js', '.ts', '.tsx'].includes(doc.extension) && this.renderUsage()}
         {this.renderDescription(doc, this.props.description)}
+        {/* Playground sits above the per-subcomponent details tabs so it always
+            applies to the whole component, not the selected tab. */}
+        {this.renderPlayground(doc)}
         {details}
         {this.renderEditOnGithub()}
         {repository && layout !== 'small' && (