updates on the ui changes and frully removed the mui and converted into astryx and color change

src/components/nearle_components/PageHeader.js

@@ -1,45 +1,39 @@
 import PropTypes from 'prop-types';
-import { Box, Stack, Typography } from '@mui/material';
+
+import { HStack } from '@astryxdesign/core/HStack';
+import { VStack } from '@astryxdesign/core/VStack';
+import { Heading } from '@astryxdesign/core/Heading';
+import { Text } from '@astryxdesign/core/Text';
+import { StatusDot } from '@astryxdesign/core/StatusDot';
 
 // ==============================|| PAGE HEADER (Doormile-style clean title) ||============================== //
 // A plain, un-boxed page title + optional live subtitle + an action slot
 // (zone selector, primary button, etc.). Replaces the heavy boxed/gradient
 // header so every operator page opens with a calm, corporate heading.
+//
+// Astryx: Heading level={1} resolves to --text-heading-1-size (1.5rem), the
+// same size the old MUI `variant="h3"` rendered — the visual weight of every
+// page title is unchanged by the migration. The old responsive
+// `direction={{ xs: 'column', sm: 'row' }}` is now wrap="wrap" on a single
+// HStack: the action slot drops to its own line once it can't fit, which is
+// the behaviour that breakpoint was approximating.
 
 export default function PageHeader({ title, subtitle, live = false, action }) {
   return (
-    <Stack
-      direction={{ xs: 'column', sm: 'row' }}
-      justifyContent="space-between"
-      alignItems={{ xs: 'flex-start', sm: 'center' }}
-      spacing={1.5}
-      sx={{ mb: { xs: 2, md: 2.5 } }}
-    >
-      <Box sx={{ minWidth: 0 }}>
-        <Typography variant="h3" sx={{ fontWeight: 700, letterSpacing: '-0.02em', color: 'grey.800' }}>
+    <HStack justify="between" vAlign="center" wrap="wrap" gap={2} paddingBlock={2}>
+      <VStack gap={0.5} padding={0} minWidth={0}>
+        <Heading level={1} maxLines={1}>
           {title}
-        </Typography>
+        </Heading>
         {subtitle && (
-          <Stack direction="row" alignItems="center" spacing={0.75} sx={{ mt: 0.5 }}>
-            {live && (
-              <Box
-                sx={{
-                  width: 7,
-                  height: 7,
-                  borderRadius: '50%',
-                  bgcolor: 'success.main',
-                  boxShadow: '0 0 0 3px rgba(16,185,129,0.18)'
-                }}
-              />
-            )}
-            <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 500 }}>
-              {subtitle}
-            </Typography>
-          </Stack>
+          <HStack gap={1} vAlign="center">
+            {live && <StatusDot variant="success" label="Live" isPulsing />}
+            <Text type="supporting">{subtitle}</Text>
+          </HStack>
         )}
-      </Box>
-      {action && <Box sx={{ flexShrink: 0, width: { xs: '100%', sm: 'auto' } }}>{action}</Box>}
-    </Stack>
+      </VStack>
+      {action && <HStack gap={1.5}>{action}</HStack>}
+    </HStack>
   );
 }