website refactor

apps/website/eslint-rules/index.js

@@ -270,7 +270,8 @@ module.exports = {
         'gridpilot-rules/no-raw-html-in-app': 'warn',
         'gridpilot-rules/ui-element-purity': 'error',
         'gridpilot-rules/no-nextjs-imports-in-ui': 'error',
-        'gridpilot-rules/component-classification': 'warn',
+        'gridpilot-rules/component-classification': 'error',
+        'gridpilot-rules/no-generic-ui-primitives-in-components': 'error',
         
         // Route Configuration Rules
         'gridpilot-rules/no-hardcoded-routes': 'error',

apps/website/eslint-rules/no-generic-ui-primitives-in-components.js

@@ -21,8 +21,9 @@ module.exports = {
     fixable: null,
     schema: [],
     messages: {
-      noGenericPrimitive: 'Generic UI primitive "{{name}}" is not allowed in components. Primitives are internal to the UI layer. Use semantic UI elements from @/ui instead (e.g., Card, Section, Table, Stack, Grid). If a semantic element is missing, create one in apps/website/ui/ using primitives.',
+      noGenericPrimitive: 'Generic UI primitive or wrapper "{{name}}" is not allowed in components. Primitives (Box, Surface) and generic wrappers (Layout, Container) are internal to the UI layer. Use semantic UI elements from @/ui instead (e.g., Card, Section, Table, Stack, Grid). If a semantic element is missing, create one in apps/website/ui/ using primitives.',
       noPrimitiveExport: 'Do not re-export primitives from the UI layer. Primitives should remain internal to apps/website/ui/primitives/.',
+      noClassName: 'The "className" prop is not allowed in components. Styling must be encapsulated within UI elements in apps/website/ui/. Use semantic UI elements or create a new one if you need custom styling.',
     },
   },
 
@@ -48,8 +49,12 @@ module.exports = {
           // Legacy direct paths
           importPath.endsWith('/ui/Box') ||
           importPath.endsWith('/ui/Surface') ||
+          importPath.endsWith('/ui/Layout') ||
+          importPath.endsWith('/ui/Container') ||
           importPath === '@/ui/Box' ||
-          importPath === '@/ui/Surface';
+          importPath === '@/ui/Surface' ||
+          importPath === '@/ui/Layout' ||
+          importPath === '@/ui/Container';
 
         if (isPrimitiveImport) {
           node.specifiers.forEach(specifier => {
@@ -70,6 +75,17 @@ module.exports = {
         }
       },
 
+      JSXAttribute(node) {
+        if (!isComponent) return;
+        
+        if (node.name.name === 'className') {
+          context.report({
+            node,
+            messageId: 'noClassName',
+          });
+        }
+      },
+
       ExportNamedDeclaration(node) {
         if (!isUiLayer) return;
         if (!node.source) return;