updates on the ui changes and the ai bot implementation

src/components/nearle_components/PageLayout.js

@@ -56,7 +56,11 @@ import { Divider } from '@astryxdesign/core/Divider';
 // ---------------------------------------------------------------------------
 const FILL_CLASS = 'dt-page-fill';
 
-export function PageShell({ children, gap = 6, fill = false }) {
+// `className` is forwarded so a page can scope its own stylesheet to the
+// shell (e.g. Create Order's `.co-root` token block). It used to be dropped
+// silently, which made every page-scoped rule fail to match with no error —
+// the styles simply never applied.
+export function PageShell({ children, gap = 6, fill = false, className }) {
   return (
     <>
       {fill && (
@@ -69,7 +73,12 @@ export function PageShell({ children, gap = 6, fill = false }) {
           }
         `}</style>
       )}
-      <VStack gap={gap} padding={0} className={fill ? FILL_CLASS : undefined} style={fill ? { flex: 1, minHeight: 0 } : undefined}>
+      <VStack
+        gap={gap}
+        padding={0}
+        className={[fill ? FILL_CLASS : null, className].filter(Boolean).join(' ') || undefined}
+        style={fill ? { flex: 1, minHeight: 0 } : undefined}
+      >
         {children}
       </VStack>
     </>
@@ -79,7 +88,8 @@ export function PageShell({ children, gap = 6, fill = false }) {
 PageShell.propTypes = {
   children: PropTypes.node,
   gap: PropTypes.number,
-  fill: PropTypes.bool
+  fill: PropTypes.bool,
+  className: PropTypes.string
 };
 
 // ---------------------------------------------------------------------------