iPhone 17 Pro Max frame + CLI catalog integration

- Replaced basic phone frame with realistic iPhone 17 Pro Max:
  titanium metallic gradient bezel, side buttons (action,
  volume, power), Dynamic Island, screen reflection overlay,
  hidden scrollbars
- CLI generatePlan now resolves package install commands from
  catalog.json (62 entries) with alias fallback for name mismatches
- Added loadResources(), resolveFromCatalog(), catalogIndex exports
- Catalog descriptions/categories/sizes now flow into generated plans

Author: officialnullobjectweb

packages/design-forge-cli/index.js

@@ -2,6 +2,38 @@ const fs = require('fs');
 const path = require('path');
 const catalog = require('./resources/catalog.json');
 
+const CATALOG_INDEX = {};
+Object.values(catalog).forEach(category => {
+  if (Array.isArray(category)) {
+    category.forEach(entry => {
+      CATALOG_INDEX[entry.name] = entry;
+    });
+  }
+});
+
+const CATALOG_ALIASES = {
+  'Lucide Icons': 'Lucide',
+  'MagicUI': 'Magic UI',
+  'Tailwind CSS': null,
+  'shadcn/ui': 'shadcn/ui',
+  'Framer Motion': null,
+  'Aceternity UI': null,
+  'NextAuth': null,
+  'React Email': null,
+  'React Three Fiber': null,
+  'AutoAnimate': null,
+  'Fontsource': 'Inter Font',
+  'Glassmorphism CSS': null,
+  'Stripe': null,
+};
+
+function resolveFromCatalog(key) {
+  if (CATALOG_INDEX[key]) return CATALOG_INDEX[key];
+  const alias = CATALOG_ALIASES[key];
+  if (alias && CATALOG_INDEX[alias]) return CATALOG_INDEX[alias];
+  return null;
+}
+
 const RESOURCE_MAP = {
   'Tailwind CSS':       { name: 'Tailwind CSS',       description: 'Utility-first CSS framework', install: '', category: 'core' },
   'shadcn/ui':          { name: 'shadcn/ui',          description: 'Copy-paste React components', install: 'npx shadcn@latest init -d --force', category: 'ui' },
@@ -27,16 +59,34 @@ const RESOURCE_MAP = {
   'Glassmorphism CSS':  { name: 'Glassmorphism CSS',  description: 'Glassmorphism backdrop utilities', install: '', category: 'css' },
 };
 
+function loadResources() {
+  const flat = [];
+  Object.values(catalog).forEach(category => {
+    if (Array.isArray(category)) {
+      category.forEach(entry => flat.push(entry));
+    }
+  });
+  return flat;
+}
+
 function generatePlan(type, styles, features) {
   const plan = [];
   const added = new Set();
 
   function add(key) {
-    const resource = RESOURCE_MAP[key];
-    if (resource && !added.has(key)) {
-      added.add(key);
-      plan.push({ ...resource, type: 'install' });
-    }
+    if (added.has(key)) return;
+    const catalogEntry = resolveFromCatalog(key);
+    const fallback = RESOURCE_MAP[key];
+    if (!catalogEntry && !fallback) return;
+    added.add(key);
+    plan.push({
+      name: key,
+      description: (catalogEntry || fallback).description,
+      install: (catalogEntry && catalogEntry.install) || fallback.install,
+      category: (catalogEntry && catalogEntry.category) || fallback.category,
+      size: (catalogEntry && catalogEntry.size) || 'small',
+      type: 'install',
+    });
   }
 
   add('Tailwind CSS');
@@ -152,4 +202,7 @@ module.exports = {
   applyConsistency,
   PreviewGenerator,
   resources: catalog,
+  loadResources,
+  resolveFromCatalog,
+  catalogIndex: CATALOG_INDEX,
 };

src/app/wizard/page.tsx

@@ -415,28 +415,85 @@ function DesignPreview({ type, style }: { type: ProjectType; style: Style }) {
           </div>
         </div>
       ) : (
-        <div className="flex justify-center py-4">
+        <div className="flex justify-center py-3">
           <div className="relative" style={{
             width: '280px',
-            borderRadius: '36px',
-            border: '3px solid #1a1a1a',
-            background: '#000',
-            padding: '8px',
-            boxShadow: '0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08)',
+            padding: '10px',
+            borderRadius: '50px',
+            background: 'linear-gradient(135deg, #c8c9cb 0%, #8e8e93 25%, #636366 50%, #8e8e93 75%, #c8c9cb 100%)',
+            boxShadow: '0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(255,255,255,0.08)',
           }}>
             <div style={{
-              width: '80px', height: '20px', background: '#000',
-              borderRadius: '16px', margin: '0 auto 6px',
-            }} />
-            <div className="overflow-y-auto" style={{
-              borderRadius: '28px',
-              maxHeight: '480px',
+              borderRadius: '40px',
+              overflow: 'hidden',
+              background: '#000',
+              position: 'relative',
             }}>
-              {previews[type]}
+              <div className="overflow-y-auto" style={{
+                maxHeight: '480px',
+                background: t.bg,
+                scrollbarWidth: 'none',
+                msOverflowStyle: 'none',
+              }}>
+                <style>{`.overflow-y-auto::-webkit-scrollbar { display: none }`}</style>
+                {previews[type]}
+              </div>
+              <div style={{
+                position: 'absolute', top: '8px', left: '50%',
+                transform: 'translateX(-50%)',
+                width: '80px', height: '20px',
+                background: '#000',
+                borderRadius: '12px',
+                zIndex: 20,
+              }} />
+              <div style={{
+                position: 'absolute', bottom: '6px', left: '50%',
+                transform: 'translateX(-50%)',
+                width: '90px', height: '3px',
+                background: '#222',
+                borderRadius: '2px',
+                zIndex: 20,
+              }} />
+              <div style={{
+                position: 'absolute', top: 0, left: 0, right: 0,
+                height: '45%',
+                background: 'linear-gradient(to bottom, rgba(255,255,255,0.05), transparent 80%)',
+                borderRadius: '40px 40px 0 0',
+                pointerEvents: 'none',
+                zIndex: 15,
+              }} />
+              <div style={{
+                position: 'absolute', bottom: 0, left: 0, right: 0,
+                height: '15%',
+                background: 'linear-gradient(to top, rgba(0,0,0,0.15), transparent)',
+                borderRadius: '0 0 40px 40px',
+                pointerEvents: 'none',
+                zIndex: 15,
+              }} />
             </div>
             <div style={{
-              width: '90px', height: '3px', background: '#222',
-              borderRadius: '2px', margin: '6px auto 0',
+              position: 'absolute', left: '-3px', top: '85px',
+              width: '3px', height: '16px',
+              background: 'linear-gradient(to bottom, #a1a1aa, #71717a)',
+              borderRadius: '1px 0 0 1px',
+            }} />
+            <div style={{
+              position: 'absolute', left: '-3px', top: '115px',
+              width: '3px', height: '28px',
+              background: 'linear-gradient(to bottom, #a1a1aa, #71717a)',
+              borderRadius: '1px 0 0 1px',
+            }} />
+            <div style={{
+              position: 'absolute', left: '-3px', top: '148px',
+              width: '3px', height: '28px',
+              background: 'linear-gradient(to bottom, #a1a1aa, #71717a)',
+              borderRadius: '1px 0 0 1px',
+            }} />
+            <div style={{
+              position: 'absolute', right: '-3px', top: '130px',
+              width: '3px', height: '36px',
+              background: 'linear-gradient(to bottom, #a1a1aa, #71717a)',
+              borderRadius: '0 1px 1px 0',
             }} />
           </div>
         </div>