[Copilot]

Summary

Migrate every Bootstrap-dependent wrapper in source/ to Bootstrap 6 (6.0.0-alpha.1), replace monolithic components with composable sub-components, and turn the ViNext workspace into a complete, statically exported documentation site. react-bootstrap and the legacy preview/ workspace are gone, and the library now runs on React 19 with explicit client boundaries so ViNext can prerender class components.

Component library

• Reworked existing wrappers to Bootstrap 6 class names, markup, and color modes: Avatar, Badge, Button, Countdown, Menu, MonthCalendar, NativeDialog, Navbar, OverlayBox, PageNav, Select, ShareBox, SpinnerButton, TableSpinner, Time, Timeline, Toast, UserRank, ZodiacBar, and the marquees.
• New wrappers: ButtonGroup/ButtonToolbar, Card (+ CardHeader, CardBody, CardFooter, CardTitle, CardText), Grid (Container/Row/Col), Image, Table, ListGroup/ListGroupItem, Spinner, CloseButton, ToggleButton, Drawer (+ DrawerHeader, DrawerTitle, DrawerBody, DrawerFooter), DialogHeader/DialogTitle/DialogBody/DialogFooter, Nav/NavItem/NavLink, Popover, and Tooltip.
• Atomic APIs replace hand-written Bootstrap class strings:
  • Row accepts cols plus sm/md/lg/xl/2xl breakpoints; Col accepts span and the same breakpoints (true for equal-width columns).
  • ListGroup supports flush, numbered, and horizontal (boolean or breakpoint); ListGroupItem supports theme, action, active, and disabled.
  • Card, Drawer, and NativeDialog expose header/title/body/footer parts, so guides never inline structural class names.
• Expanded Menu (MenuPanel, MenuHeader, MenuDivider, MenuSubmenu, MenuItemContent, MenuItemDescription, MenuText) and Navbar (NavbarBrand, NavbarNav, NavbarText, NavbarToggler).
• Added ToastContainer, ToastItem, ToastHeader, and ToastBody; split TextTruncate/TypeEcho into folders and added ScrollNavScroller.
• CodeBlock highlights JavaScript, JSX, TypeScript, and TSX with Shiki, using paired light/dark themes and inline colors for zero client-side highlighting; React element children are serialized to JSX source.
• Overlay fixes: Popover/Tooltip arrows are absolutely positioned per placement, and OverlayBox derives its distance from the popover/tooltip type instead of a fixed offset.
• React 19 prerender fix: every class component (UserRankView, NativeDialog, Countdown, Menu, MonthCalendar, OverlayBox, PageNav, ScrollNav.Scroller, TextTruncate/TypeEcho content, Editor, ShareBox, ClickBoundary) starts with 'use client'. ViNext prerenders through React's react-server export, which does not provide Component/PureComponent, so a missing directive failed the build with Class extends value undefined.

Behavior and API

• Toast.open() messages use theme instead of the old variant field.
• NativeDialog keeps its native open state in sync with the prop and supports theme, modal, keyboard, and backdrop.
• OverlayBox gains overlayClassName for scoped popover/tooltip theming, opens on hover/focus/click, and closes on outside pointer interaction or Esc; Popover and Tooltip share OverlayTriggerProps from Overlay.ts.
• Nav remains server-renderable: disabled links use disabled pe-none with aria-disabled="true" and tabindex="-1" instead of a click interceptor; PageNav reuses Nav/NavLink through NavProps.
• Navbar supports theme="dark" and responsive expand breakpoints with drawer-based mobile navigation; Drawer supports all placements plus optional footer content.
• Menu exposes autoClose (true | 'inside' | 'outside' | false), logical align, submenus, and keyboard navigation with focus restoration.
• Select props follow the Bootstrap 6 attribute names, and MonthCalendar/ShareBox compose Badge/Image instead of duplicating markup.
• MobX usage follows the documented conventions: instance arrow actions are wrapped with action(() => …) rather than @action field decorators, and state updates after await go through their own actions.

Documentation site

• 43 component guides: 17 Bootstrap 6 wrapper guides (Avatar, Badge, Button, Button group, Card, Close button, Dialog, Drawer, Grid, Image, Menu, Nav, Navbar, Popover & tooltip, Spinner, Table, Toasts) and 26 extension guides, plus the Bootstrap and extension catalogs.
• Guides are MDX pages that adapt the upstream Bootstrap 6 documentation to Idea React wrappers and keep the required CC BY 3.0 attribution with links to each upstream source.
• Shared documentation layout with sticky header, grouped sidebar, in-page table of contents, and footer; inner pages use one consistent content column.
• Live examples use LiveExample, CodeExample, CodeCard, and LiveRunner (built on LiveTSX), plus docs-only interactive demos (DialogDemo, DialogModelDemo, DrawerDemo, LoadingDemo, NavbarDemo, SelectDemo, ToastDemo).
• Every JSX/TSX code fence renders through the Shiki-backed CodeBlock, imported directly in the MDX page. The build keeps two small helpers: remarkInlineButtonChildren unwraps auto-generated paragraphs inside inline wrappers, and rehypeBootstrapTable adds the table class and a table-responsive wrapper to Markdown tables. No code-fence AST rewriting.
• Site-wide features: search index generated from the exported HTML (Ctrl/⌘+K), persisted light/dark color mode, copy-command buttons, and a root error handler that reports unhandled rejections.
• ViNext stays pure SSG: Bootstrap 6 CSS and Icons load from unpkg, output deploys as static files from document/dist/client/, and no Tailwind is used.

Tooling and tests

• Version bumped to 3.0.0-alpha.1; react-bootstrap is no longer a runtime dependency and the preview/ workspace with its Parcel build is removed.
• 24 test files / 54 tests use the Node.js native test runner with node:assert/strict and native mocks, covering the new and refactored wrappers (including ListGroup, ButtonGroup, Grid, Drawer, Card, Popover, Tooltip).
• AGENTS.md now documents the Bootstrap upgrade workflow, client-component directives and displayName, MobX action conventions, render-method structure, component composition and prop reuse, docs styling rules, testing stages, deployment, and Git workflow.

Breaking changes

• react-bootstrap is no longer a runtime dependency; Bootstrap 6 CSS is required.
• Toast options use theme instead of variant.
• Bootstrap 5 component markup and class names are replaced by their Bootstrap 6 equivalents.
• Structural wrappers are now composed from parts (Card, Drawer, NativeDialog); the old single-element title/dialog layout props are replaced by sub-components.

Validation

• Root tsc --noEmit
• document workspace tsc --noEmit (fixed the index signature in TimeDistance and the RefCallback return types in TypeEcho/animate)
• Node native test suite: 54/54 passing
• Docs workspace build: 46 routes prerendered (45 pages + 404), 0 skipped, 45 pages indexed
• All 43 guides render their JSX/TSX snippets as Shiki-highlighted blocks in both light and dark themes
• Browser verification (Edge/CDP, desktop and 500 px): sticky header, mobile navbar drawer, menu, custom popover/tooltip placement, live toast, button toolbars, card list groups and grid columns, row-column/breakpoint grids, dialog and drawer parts, UserRank leaderboard (podium + table, hydrated), TimeDistance output, and TypeEcho typing animation — no console or hydration errors
• ESLint and Prettier on changed source, config, and stylesheet files

Fixes #75

[cloudflare-workers-and-pages]

Deploying idea-react with    Cloudflare Pages

Latest commit:	b15c5ab
Status:	✅  Deploy successful!
Preview URL:	https://8fa20b69.idea-react.pages.dev
Branch Preview URL:	https://copilot-upgrade-bootstrap-v6.idea-react.pages.dev

View logs