fix(layout): address code review feedback - icon edge case, area deps

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

packages/layout/src/AppSchemaRenderer.tsx

@@ -345,6 +345,8 @@ export function AppSchemaRenderer({
     () => areas.length > 0 ? areas[0].id : null,
   );
 
+  const areaIds = areas.map((a) => a.id).join(',');
+
   useEffect(() => {
     if (areas.length > 0) {
       setActiveAreaId((prev) =>
@@ -353,7 +355,7 @@ export function AppSchemaRenderer({
     } else {
       setActiveAreaId(null);
     }
-  }, [schema.name, areas.length]);
+  }, [schema.name, areaIds]);
 
   const activeArea = areas.find((a) => a.id === activeAreaId);
   const resolvedNavigation: NavigationItem[] = activeArea?.navigation ?? flatNavigation;

packages/layout/src/NavigationRenderer.tsx

@@ -101,6 +101,7 @@ export function resolveIcon(name?: string): React.ComponentType<any> {
   // kebab-case → PascalCase
   const pascal = name
     .split('-')
+    .filter(Boolean)
     .map((p) => p.charAt(0).toUpperCase() + p.slice(1))
     .join('');
   if ((LucideIcons as any)[pascal]) {