website refactor

apps/website/eslint-rules/no-display-objects-in-ui.js

@@ -0,0 +1,40 @@
+/**
+ * ESLint rule: Forbid DisplayObject imports in components and templates
+ * 
+ * Architecture:
+ * - DisplayObjects are for Builders and ViewModels
+ * - Components and Templates must receive already-formatted data
+ */
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Forbid DisplayObject imports in components and templates',
+      category: 'Architecture',
+      recommended: true,
+    },
+    messages: {
+      noDisplayObjectsInUi: 'DisplayObjects cannot be used in components or templates. Use ViewData Builders or View Models to format data before passing it to the UI. See docs/architecture/website/DISPLAY_OBJECTS.md',
+    },
+  },
+
+  create(context) {
+    const filename = context.getFilename();
+    const isUiFile = filename.includes('/components/') || filename.includes('/templates/');
+    
+    if (!isUiFile) return {};
+
+    return {
+      ImportDeclaration(node) {
+        const importPath = node.source.value;
+        if (importPath.includes('/lib/display-objects/')) {
+          context.report({
+            node,
+            messageId: 'noDisplayObjectsInUi',
+          });
+        }
+      },
+    };
+  },
+};